Storybook worked for me fine, but I added a separate folder for slices called "unique_slices". It seems that after that, I started getting the following error when I run yarn run storybook:
kris@kris-macbook miso3 % yarn run storybook
yarn run v1.22.10
$ start-storybook -p 8888
info @storybook/react v6.3.2
info
info => Loading presets
info => Loading 1 config file in "/Users/kris/Documents/code/freelance/miso3/.storybook"
info => Adding stories defined in "/Users/kris/Documents/code/freelance/miso3/.storybook/main.js"
info => Using PostCSS preset with postcss@8.3.5
info => Using default Webpack4 setup
10% building 1/1 modules 0 active
info => Using cached manager
42% building 273/285 modules 12 active ...ocuments/code/freelance/miso3/node_modules/airbnb-js-shims/target/es2017.js
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
webpack built preview 365361bc698a13307a2b in 6340ms
✖ ｢wdm｣: Hash: 365361bc698a13307a2b
Version: webpack 4.46.0
Time: 6340ms
Built at: 13/07/2021 12:00:57
Asset Size Chunks Chunk Names
iframe.html 4.45 KiB [emitted]
main.iframe.bundle.js 93.4 KiB main [emitted] main
main.iframe.bundle.js.map 30.1 KiB main [emitted] [dev] main
runtime~main.iframe.bundle.js 33.5 KiB runtime~main [emitted] runtime~main
runtime~main.iframe.bundle.js.map 34.7 KiB runtime~main [emitted] [dev] runtime~main
vendors~main.iframe.bundle.js 3.55 MiB vendors~main [emitted] [big] vendors~main
vendors~main.iframe.bundle.js.map 3.14 MiB vendors~main [emitted] [dev] vendors~main
Entrypoint main [big] = runtime~main.iframe.bundle.js runtime~main.iframe.bundle.js.map vendors~main.iframe.bundle.js vendors~main.iframe.bundle.js.map main.iframe.bundle.js main.iframe.bundle.js.map
[0] multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 88 bytes {main} [built]
[./.slicemachine/assets sync recursive ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.js)$] ./.slicemachine/assets sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.js)$ 291 bytes {main} [built]
[./.storybook/generated-stories-entry.js] 336 bytes {main} [built]
[./.storybook/preview.js] 34 bytes {main} [built]
[./.storybook/preview.js-generated-config-entry.js] 3.88 KiB {main} [built]
[./.storybook/storybook-init-framework-entry.js] 26 bytes {main} [built]
[./node_modules/@storybook/client-api/dist/esm/index.js] 967 bytes [built]
[./node_modules/@storybook/client-logger/dist/esm/index.js] 4.3 KiB {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/globals.js] 105 bytes {vendors~main} [built]
[./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js] 97 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/esm/client/index.js] 236 bytes {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/features/symbol/index.js] 489 bytes {vendors~main} [built]
[./node_modules/core-js/modules/es.array.filter.js] 622 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined] (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined 7.68 KiB {vendors~main} [built]
+ 1194 hidden modules
ERROR in ./node_modules/next-slicezone/index.js 6:2
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const PageInfo = ({ title, description }) => (
> <div
| style={{
| height: '80vh',
@ ./components/common/Footer.js 10:0-39 52:40-49
@ ./components/common/index.js
@ ./slices/Hero/index.js
@ ./.slicemachine/assets/slices/Hero/index.stories.js
@ ./.slicemachine/assets sync ^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.js)$
@ ./.storybook/generated-stories-entry.js
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 6.23 KiB HtmlWebpackPlugin_0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 1.98 KiB {HtmlWebpackPlugin_0} [built]
ModuleParseError: Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| const PageInfo = ({ title, description }) => (
> <div
| style={{
| height: '80vh',
at handleParseError (/Users/kris/Documents/code/freelance/miso3/node_modules/webpack/lib/NormalModule.js:469:19)
at /Users/kris/Documents/code/freelance/miso3/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/kris/Documents/code/freelance/miso3/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/kris/Documents/code/freelance/miso3/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/kris/Documents/code/freelance/miso3/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array.<anonymous> (/Users/kris/Documents/code/freelance/miso3/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
at Storage.finished (/Users/kris/Documents/code/freelance/miso3/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
at /Users/kris/Documents/code/freelance/miso3/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
at /Users/kris/Documents/code/freelance/miso3/node_modules/graceful-fs/graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:73:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
My .storybook/main.js looks like this:
const path = require("path");
const { getStoriesPaths } = require("slice-machine-ui/helpers/storybook");
module.exports = {
addons: [
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
stories: [...getStoriesPaths() /*...*/],
webpackFinal: async (config, { configType }) => {
config.resolve.modules = [path.resolve(__dirname, ".."), "node_modules"];
return config;
},
};
and my next.config.js looks like this:
const withPlugins = require("next-compose-plugins");
const withTM = require("next-transpile-modules")(["next-slicezone"]);
const nextConfiguration = {
trailingSlash: true,
images: {
loader: "imgix",
path: "",
deviceSizes: [82, 110, 140, 640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
};
module.exports = withPlugins([withTM], nextConfiguration);
Any help will be greatly appreciated!
