Closed Wulfheart closed 9 months ago
Hi @Wulfheart you need to access the storybook URL outputted by the blast:launch command
, not the /storybook_preview
path on your Laravel application.
@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/blast@1.0.0 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/blast@1.0.0 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/blast@1.0.0 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
It isn't starting correctly so you're not getting it in your output. Which node version are you using?
v18.16.0 - it is quite recent-ish.
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.
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'),
],
}
See https://github.com/area17/blast/issues/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).
https://flareapp.io/share/A7E9pky7