Storybook: Cannot compile JSX files

[neginbasiri]

My webpack.config.js

const path = require('path');
const merge = require('webpack-merge');

module.exports = (storybookBaseConfig, configType, defaultConfig) => ({
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /\.jsx?$/,
                loaders: ['babel-loader', require.resolve('@storybook/addon-storysource/loader')],
                include: [path.resolve(__dirname, '../src/stories'), path.resolve(__dirname, '../src/components')],
                enforce: 'pre'
            }
        ]
    },
    resolve: {
    ...defaultConfig.resolve,
    extensions: ['.jsx','.js', ...defaultConfig.resolve.extensions],
  }
});

My src/stories/components/button.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, boolean } from '@storybook/addon-knobs/react';
import Button from '../../components/button.jsx';

const stories = storiesOf('Button', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);

stories.add('Basic Button', withInfo()(() => <Button onClick={action('clicked')}>Hello Button</Button>));
stories.add('Basic Disabled Button', withInfo()(() => <Button disabled={boolean('Disabled', true)} onClick={action('clicked')}>Hello Button</Button>));
stories.add(
    'Basic Button With Emoji',
    withInfo()(() => (
        <Button onClick={action('clicked')}>
            <span role="img" aria-label="so cool">
                Cool 😎
            </span>
        </Button>
    ))
);

My src/components/button.jsx

import React from 'react';
import PropTypes from 'prop-types';
import '../styles/components/index.scss';

/** Button component description imported from comments inside the component file */
const Button = ({ children, onClick, disabled }) => (
    <button type="button" onClick={onClick} disabled={disabled}>
        {children}
    </button>
);

Button.defaultProps = {
  children: '',
  disabled: false,
    onClick: () => {}
};

Button.propTypes = {
    /** button label. */
    children: PropTypes.string.isRequired,
    /** onClick handler */
    onClick: PropTypes.func,
    /** disable flag */
    disabled: PropTypes.bool
};

export default Button;

The error which I am getting is

`

ERROR in ./src/components/button.jsx 7:1
Module parse failed: Unexpected token (7:1)
You may need an appropriate loader to handle this file type.
| /** Button component description imported from comments inside the component file */
| const Button = ({ children, onClick, disabled }) => (

  <button type="button" onClick={onClick} disabled={disabled}>

| {children}
|
@ ./src/stories/components/button.js 6:0-49 16:2-8 23:2-8 30:2-8
@ ./src/stories/components sync .js$
@ ./.storybook-react/config.js
@ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook-react/config.js (webpack)-hot-middleware/client.js?reload=true
`

• @storybook/react ^4.0.0-alpha.16
• @storybook/addon-[anything] ^4.0.0-alpha.16

[igor-dv]

Does it happen without addon-storysource configured?

[ASnow]

Same problem
https://gist.github.com/ASnow/b3489e674c91c3d61d8b466f5619979b

Possible problem area - babel v7

Start log also warn

[0] WARN => Custom configuration file /my/package/.storybook/webpack.config.js is detected
[0] WARN    but impossible to import loader for .js

[neginbasiri]

@igor-dv I removed require.resolve('@storybook/addon-storysource/loader') from loader array and still getting error.
PS: I don't have any .babelrc in my app or in my .storybook folder.

[ASnow]

In my case prolem was in webpack.config.js.

Add next line into /node_modules/@storybook/core/dist/server/loadCustomWebpackConfig.js:108 file:

console.log(e);

You should get something like:

  for (var i = 0; i < customConfigCandidates.length; i += 1) {
    var customConfigPath = customConfigCandidates[i].path;
    if (_fs2.default.existsSync(customConfigPath)) {
      if (registerCompiler(_interpret2.default.extensions[customConfigCandidates[i].ext]) === 0) {
        _nodeLogger.logger.warn('=> Custom configuration file ' + customConfigPath + ' is detected');
        _nodeLogger.logger.warn('   but impossible to import loader for ' + customConfigCandidates[i].ext);
      }
      try {
        return requireConfig(customConfigPath);
      } catch (e) {
        console.log(e); // <===== 108 line ADD LOGGING HERE!
        // do nothing
      }
    }
  }

When you start it will show error in console if something wrong.

[andormade]

I'm having the same problem. If I import a file with .jsx extension, I will get the unexpected token error, but it works if I change the extension to .js

[igor-dv]

What kind of file? Do you have a webpack.config.jsx ?

[SimenB]

This commit seems to have removed /\.jsx?$/ in favor of just /\.js$/ (notice missing x?) 4652a292c27209116904c70c9ea521e79be2f90b.

Might not be it, but custom webpack config, fishing out the babel-loader rule and doing this fixes it: babelRule.test = /\.jsx?$/;

[igor-dv]

I will bring it back

[nocturn2023]

same problem.
Webpack version is 4.2.0.
@storybook/react ^4.0.0-alpha.16

[igor-dv]

The jsx is back to the core. It will be in the next release.

[nocturn2023]

@igor-dv

I`ve updated to alpha.18, seems like everything is ok.