experimental syntax 'jsx' isn't currently enabled (react storybook)

1.2k views Asked by At

Reciveving the following error when running storybook:

WARNING in ./src/stories/button.stories.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /<path_to_project>/src/stories/button.stories.tsx: Support for the experimental syntax 'jsx' isn't currently enabled (45:35):

  43 | const onClick = () => console.log('clicked');
  44 | 
> 45 | stories.add(NAME, () => { return (<Button onClick={onClick}>Hello Button</Button> );})
     |                                   ^
  46 | 

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
    at Parser._raise (/<path_to_project>/node_modules/@babel/parser/lib/index.js:766:17)

However, .babelrc does contain the preset:

{
    "presets": [
        [
            "@babel/preset-env"
        ],
        [
            "@babel/preset-react"
        ],
        [
            "@babel/typescript"
        ]
    ],
}

As a side note - I have installed storybook-addon-jsx and registered it via addons.js.

Any suggestions about how to resolve this?

0

There are 0 answers