Storybook: Bug: Storybook Error Support for the experimental syntax 'jsx' isn't currently enabled

[rterala]

Below is my folder structure
app

• .storybook

• .babelrc
• main.js
• webpack.config.js
• stories
• package-lock.json
• package.json

Content of .babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}

Content of main.js
module.exports = {
stories: ['../stories/*/.stories.jsx']
};

Webpack.config.js
const path = require('path');

module.exports = {
entry: {
main: '../stories/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'builddeploy.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
performance: {
hints: false,
},

module: {
    rules :[{
        test: /\.js$/,
        use: 'babel-loader',
        exclude: path.resolve(__dirname,'node_modules')
    }, {
        test: /\.jsx$/,
        use: 'babel-loader',
        exclude: path.resolve(__dirname,'node_modules')
    }, {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              modules: {
                localIdentName: '[name]-[local]-[hash:base64:3]'
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader'
      }
]
}

};

Content of package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-es2016": "^7.0.0-beta.53",
"@babel/preset-react": "^7.10.4",
"@babel/preset-stage-0": "^7.8.3",
"@babel/register": "^7.10.5",
"@storybook/addon-docs": "^6.0.0-beta.45",
"babel-cli": "^6.26.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"react-router": "^5.2.0"
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@storybook/addon-actions": "^5.3.19",
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"babel-loader": "^8.1.0",
"storybook-addon-jsx": "^7.3.3"
}
}

I'm not sure what am I doing wrong in order to resolve the experimental syntax error. I'm also attaching a screenshot of the folder structure. Please help me with this.

[rterala]

@shilman Doesn't seem like your beta version worked, but at the same time I'm not sure if I had any other issues in my setup.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

We've released 6.0. Is it fixed there?

[tapanbabbarRP]

@shilman I am facing the same issue on version 6.0

[rterala]

try this webpack config and see if it works for you

module.exports = ({ config }) => ({
  ...config,
  module: {
    ...config.module,
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              sourceType: 'unambiguous',
              babelrc: false,
              presets: ['react-app']
            }
          }
        ]
      },
      {
        test: /\.mdx?$/,
        use: ['babel-loader', '@mdx-js/loader']
      },
      {
        test: /\.(css|scss)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              sourceMap: true,
              modules: {
                localIdentName: '[name]-[local]-[hash:base64:3]'
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg|jpg)$/,
        loader: 'url-loader'
      }
    ]
  }
});

and here is the copy of my package.json dev dependencies

"devDependencies": {
    "@babel/preset-react": "^7.10.4",
    "@mdx-js/loader": "^1.6.16",
    "@storybook/addon-actions": "^6.0.21",
    "@storybook/addon-backgrounds": "^6.0.21",
    "@storybook/addon-docs": "^6.0.21",
    "@storybook/addon-essentials": "^6.0.21",
    "@storybook/addon-knobs": "^6.0.21",
    "@storybook/addon-links": "^6.0.21",
    "@storybook/addon-storysource": "^6.0.21",
    "@storybook/addons": "^6.0.21",
    "@storybook/react": "^6.0.21",
    "babel-loader": "^8.1.0",
    "babel-preset-react-app": "^9.1.2",
    "sass-loader": "^7.0.1",
    "storybook-addon-state": "^1.0.3"
  }

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[tapanbabbarRP]

@rterala worked like a charm. Thank you.

[rterala]

Closing as the webpack config works