Error after initial blast:launch about blast

[ifox]

Hi @Wulfheart you need to access the storybook URL outputted by the blast:launch command, not the /storybook_preview path on your Laravel application.

[Wulfheart]

@ifox Thanks for your fast response. I have the following output. Where is the URL?

php artisan blast:launch
0/2 [░░░░░░░░░░░░░░░░░░░░░░░░░░░░] Reusing npm dependencies...
1/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░] Generating Stories...Error [ERR_REQUIRE_ESM]: require() of ES Module /home/aw/Code/priv/dip/brutal-forum/tailwind.config.js from /home/aw/Code/priv/dip/brutal-forum/vendor/area17/blast/src/resolveTailwindConfig.js not supported.
Instead change the require of tailwind.config.js in /home/aw/Code/priv/dip/brutal-forum/vendor/area17/blast/src/resolveTailwindConfig.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/home/aw/Code/priv/dip/brutal-forum/vendor/area17/blast/src/resolveTailwindConfig.js:6:18) {
  code: 'ERR_REQUIRE_ESM'
}

2/2 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] Setup Complete. Booting Storybook and watching stories.
> @area17/[email protected] storybook
> concurrently --i -c "red,blue,yellow" -n storybook,watch-components,watch-data "storybook dev --quiet -s $STORYBOOK_STATIC_PATH -p $STORYBOOK_PORT" "npm run watch-components" "npm run watch-data"

[watch-components] 
[watch-components] > @area17/[email protected] watch-components
[watch-components] > chokidar "$COMPONENTPATH/**/*.blade.php" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories --watchEvent={event} -- '{path}';"
[watch-components] 
[watch-data] 
[watch-data] > @area17/[email protected] watch-data
[watch-data] > chokidar "$COMPONENTPATH/data/**/*.php" "$COMPONENTPATH/**/*.md" -d 0 -c "cd $PROJECTPATH && php artisan blast:generate-stories;"
[watch-data] 
[watch-components] Watching "/home/aw/Code/priv/dip/brutal-forum/resources/views/stories/**/*.blade.php" ..
[watch-data] Watching "/home/aw/Code/priv/dip/brutal-forum/resources/views/stories/data/**/*.php", "/home/aw/Code/priv/dip/brutal-forum/resources/views/stories/**/*.md" ..
[storybook] @storybook/cli v7.1.1
[storybook] 
[storybook] info => Serving static files from ./../../../public at /
[storybook] info => Starting manager..
[storybook] WARN unable to find package.json for eslint
[storybook] WARN unable to find package.json for eslint-config-prettier
[storybook] WARN unable to find package.json for eslint-plugin-prettier
WARN unable to find package.json for husky
[storybook] WARN unable to find package.json for lint-staged
[storybook] WARN unable to find package.json for stylelint
[storybook] WARN unable to find package.json for stylelint-config-recommended
[storybook] WARN unable to find package.json for stylelint-order
[storybook] WARN unable to find package.json for stylelint-prettier
[storybook] info Addon-docs: using MDX2
[storybook] info => Using implicit CSS loaders
[storybook] info => Using default Webpack5 setup
[storybook] <i> [webpack-dev-middleware] wait until bundle finished

[ifox]

It isn't starting correctly so you're not getting it in your output. Which node version are you using?

[Wulfheart]

v18.16.0 - it is quite recent-ish.

[ifox]

Alright, just wanted to make sure. Can you share your project's tailwind config file structure? The error is saying it is failing to require it.

[Wulfheart]

Sure. It is quite standard and I am able to build it using vite.

let colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
export default {
  content: [
      "./resources/**/*.blade.php",
      "./resources/**/*.js",
      "./resources/**/*.vue",
  ],
  theme: {
    extend: {
        colors: {
            'primary': colors.orange[600],
            'primary-dark': colors.orange[700],
            'muted': colors.gray[500],
            'muted-more': colors.gray[400],
            'heading': colors.gray[900]
        },
    },
  },
  plugins: [
      require('@tailwindcss/container-queries'),
  ],
}

[ifox]

See #98.

If you update your config file to use module.exports = {} instead of export default {}, it would work (obviously a workaround until #98 is addressed).