storybook: Module parse failed: You may need an appropriate loader to handle this file type

for people facing this issue in newer versions of storybook:

.storybook/main.js

module.exports = {
  ...
  webpackFinal: (config) => {
    config.module.rules.push({
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        {
          loader: require.resolve('babel-loader'),
          options: {
            presets: [
              require('@babel/preset-typescript').default,
              [require('@babel/preset-react').default, { runtime: 'automatic' }],
              require('@babel/preset-env').default,
            ],
          },
        },
      ],
    })

    config.resolve.extensions.push('.ts', '.tsx')

    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })

    config.resolve.extensions.push('.mjs')

    return config
  },
}

@igor-dv @Hypnosphi I tried:

1. git clean -fdx
2. Remove package-lock.json since (1) does not delete it
3. npm install
4. npm run storybook

Nope. Still the same error.

@AssisrMatheus, @d-spiridonov, @lucasavila00 I created example repo with problem solution storybook-typescript-problem.

I’m not familiar with webpack at all, I try hard to avoid it 😄. It would be amazing if whatever the defaults are supported npm-linked stuff but I’ll try

I fixed this issue by looking at some of the webpack.config.js files from examples shared by storybooks. In the project that I’m working on they decided to move to another styleguide generator but I managed to make it work before moving it so in case someone want’s to have a look at it, here it’s my working webpack.config file:

var path = require('path');

module.exports = {
	module: {
		rules: [
			// Transform all ES6 files to plain old ES5.
			{
				test: /\.(js|jsx)$/,
				exclude: [/bower_components/, /node_modules/, /styles/],
				loader: 'babel-loader',
				include: path.resolve(__dirname, '../../src')
			},
			// Load images.
			{
				test: /\.(gif|jpe?g|png)$/,
				loader: 'url-loader?limit=25000',
				query: {
					limit: 10000,
					name: 'static/media/images/[name].[hash:8].[ext]'
				}
			},
			{
				test: /\.scss$/,
				loaders: ['style-loader', 'css-loader', 'sass-loader', 'resolve-url-loader?sourceMap', 'sass-loader?sourceMap'],
				include: path.resolve(__dirname, '../../')
			},
			{
				test: /\.css$/,
				loader: 'style!css?importLoaders=1'
			},
			// Fonts
			{
				test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
				loader: 'url-loader?limit=10000&mimetype=application/font-woff',
				query: {
					name: 'static/media/files/[name].[hash:8].[ext]'
				}
			},
			{
				test: /\.svg$/,
				use: [
					{
						loader: 'babel-loader',
						query: {
							presets: ['airbnb'],
						},
					},
					{
						loader: 'react-svg-loader',
						query: {
							jsx: true,
						},
					},
				],
			},
		],
	},
	/**
	 * Resolve import paths from global.SRCDIR
	 * @see  http://moduscreate.com/es6-es2015-import-no-relative-path-webpack/
	 */
	resolve: {
		modules: [
			path.resolve(__dirname, '../../src'),
			path.resolve(__dirname, '../../node_modules'),
		],
		extensions: ['.js', '.jsx']
	}
};

I’m still running into this. @isc30 Your fix did not work for me 😢

[Solved] Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)

the easiest way to do that is git clean -fdx (removes everything that’s not in git)

@Luchanso Your example works! It saves my day, thank you.

@Kucerenko171 Do you use latest version of storybook?

@mmo0307 it looks working. Thank you

@Kucerenko171 Try to connect this loader { test: /.s[ac]ss$/i, use: [ // Creates style nodes from JS strings MiniCssExtractPlugin.loader, // Translates CSS into CommonJS “css-loader”, // Compiles Sass to CSS “sass-loader”, ], }

@isc30 thanks for this 👍 Can confirm this works for my case: Lerna create-react-app monorepo using Typescript. Now all my stories (other than the example introduction that comes shipped with Storybook) show up!

@Luchanso Your example works! It saves my year, thank you.

@Luchanso did you manage to get it to work?

@ndelangen example repository for reproduce problem:

https://github.com/Luchanso/storybook-typescript-problem

Outputs logs:

• Webpack
• Error

Maybe later I’ll try to play with webpack.config.js

@helloncanella @pouyajabbarisani I had set the include point to src/index.js instead of src/ which fixed my issue.

Common Path

/* Location of all Paths used */

const path = require('path');

module.exports = {
    srcPath:path.resolve(__dirname, '../src/'),
    inputPath: path.resolve(__dirname, '../src/index.js'),
    outputPath: path.resolve(__dirname, '../public')
}

Webpack.config.js

'use strict';

const webpack = require('webpack');
const htmlWebpack = require('html-webpack-plugin');

const commonPaths = require('./common-paths');

module.exports = {
    // Entry: First file webpack starts(your dependency graph)
    entry: {
        app: commonPaths.inputPath,
    },
    // Output: How and where to put bundles and format them
    output: {
        filename: 'bundle.js',
        path: commonPaths.outputPath,
        publicPath: '/',
    },
    // Loaders:  How to treat files before adding to dependency graphs
    module: {
        rules: [{
                test: /\.(js|jsx)$/,
                include: [commonPaths.srcPath],
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['es2015', {
                                modules: false
                            }], 'react', 'airbnb'
                        ],
                        plugins: ['transform-runtime'],
                        cacheDirectory: true,
                    },
                },
            },
            {
                test: /\.png$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1000,
                    },
                }, ],
            },
        ],
    },
    // Plugins: Extremely Customizable
    plugins: [
        new webpack.ProgressPlugin(),
        new htmlWebpack({
            template: `${commonPaths.outputPath}/index.html`,
        }),
    ],
};

This is caused by having a JSX file in node_modules. Note that in the above webpack configs (and I’m having this same issue) the ones with the issues are excluding node_modules or only including the source directory for the project. One solution is ejecting with npm run eject and then adding the node_modules directory to the webpack configs.

I’m unsure if there is a solution that doesn’t require ejecting – searching for one now.

private i will say…i came across a solution git submodule add repository

yes my solution was:

webpack.config.js

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }, {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

Sure ! There’s one on Storybook page, https://storybook.js.org/configurations/custom-webpack-config/ Let me know if you can fix your problem with this one. I adapted example above and it works like a charm on my configuration with scss.

+1, I’ve got the same issue