Storybook error - "ModuleParseError: Module parse failed: Unexpected token "

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!

Hey @kris,

Can you send me your project files in a git repo or ZIP file? (Feel free to send in a DM.)

I'll take a look and see if I can find the issue.

Sam

Sent via DM. Thanks, Sam!

1 Like

Thanks, @kris! I tried it out and got the same error as you. I couldn't figure it out, so I submitted an issue with our dev team.

Sam

@samlittlefair Just wanted to check if you've had any luck with this?

@kris I sent a follow-up to the dev team, and I'll let you know what I hear back. :slight_smile: