Storybook addon: Module parse failed: Unexpected token

Description

Using @chakra-ui/storybook-addon, start-storybook doesn’t work.

Link to Reproduction

https://codesandbox.io/s/chakra-storybooks-addon-error-pfy7pn

Steps to reproduce

1. Run npm run start to start storybook
2. Storybook doesn’t start and error is displayed

Chakra UI Version

2.2.6

Browser

Microsoft Edge

Operating System

• macOS
• Windows
• Linux

Additional Information

I get multiple errors of the form:

ERROR in ./node_modules/@chakra-ui/storybook-addon/dist/preset/decorators.cjs.js 87:76 
Module parse failed: Unexpected token (87:76) 
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. 

I tried using the workaround mentioned in the docs

module.exports = {
  stories: ["../src/**/*.stories.@(j|t)sx"],
  addons: ["@storybook/addon-essentials", "@chakra-ui/storybook-addon"],
  framework: "@storybook/react",
  features: {
    emotionAlias: false
  },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto"
    });

    return config;
  }
};

[opeah]

Same problem for me with "@chakra-ui/storybook-addon": "^4.0.8"

ERROR in ./node_modules/@chakra-ui/icon/dist/index.esm.js 58:28
Module parse failed: Unexpected token (58:28)
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
|     __css: styles
|   };
>   const _viewBox = viewBox ?? fallbackIcon.viewBox;
|   if (element && typeof element !== "string") {
|     return /* @__PURE__ */ React.createElement(chakra.svg, {

I’m using @storybook/builder-vite

[nk18chi]

I had the same error but It is working in my environment when I use “webpack5” as the builder.

Here is the error I got.

ERROR in ./node_modules/@chakra-ui/storybook-addon/node_modules/@chakra-ui/icon/dist/index.esm.js 58:28
Module parse failed: Unexpected token (58:28)
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
|     __css: styles
|   };
>   const _viewBox = viewBox ?? fallbackIcon.viewBox;
|   if (element && typeof element !== "string") {
|     return /* @__PURE__ */ React.createElement(chakra.svg, {

package.json

    "@chakra-ui/icons": "^1.1.7",
    "@chakra-ui/react": "2.0.0-next.5",
    "@chakra-ui/storybook-addon": "2.0.0-next.4",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/react": "^6.5.10",

1. Install packages

yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5

1. Add builder in .storybook/main.js

module.exports = {
  ...
  core: {
    builder: 'webpack5',
  },

1. Don’t forget to add theme in .storybook/preview.js

const theme = require('../path/to/your/theme')

export const parameters = {
  ...
  chakra: {
    theme,
  },
}

Reference https://stackoverflow.com/questions/70595004/chakra-ui-is-not-loading-when-used-with-storybook?rq=1
https://github.com/chakra-ui/chakra-ui/issues/5977

I hope this will be helpful to someone.