Module parse failed: You may need an appropriate loader to handle this file type #1493
Comments
|
Just to be clear, are you using two webpack configs? Did you add the loaders to both? |
|
Yes, I have an original webpack.config file at `./config/webpack.config.dev.js` that I `require()` from inside of `./config/.storybook/webpack.config.dev.js` and then exporting another webpack.config for storybook only.
Let me know if I'm not being clear
|
|
@dsiaudvytis This is the other webpack config file only for storybooks var path = require('path');
var webpack = require('webpack');
var config = require('../webpack.config.dev.js'); // Getting the original webpack.config
var Loaders = require('../webpack.loaders.js'); // Getting the same loaders that I use for the original config file
module.exports = {
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: Loaders.concat([
{
test: /\.scss$/,
loader: 'style!css!sass!resolve-url!sass?sourceMap&sourceComments'
},
{
test: /\.css$/,
loader: 'style!css?importLoaders=1'
}
])
}
}; |
|
I think you might need to add the |
|
I suspect the line |
|
Same problem. I have CRA 1.3.3 and getstorybook 3.2.3. Didn't fiddle with webpack configs whatsoever. Oddly enough, it shows I tried:
None of which worked. Maybe getstorybook is hardwired to use its custom webpack config's loaders? |
|
+1, I've got the same issue |
|
@Temoto-kun how exactly does the error look in your case? |
|
@Hypnosphi it's exactly the same error as OP. Apparently, storybook's webpack is unable to transpile JSX because somehow the configs don't work. |
|
Can you please create a GitHub repo with minimal reproduction of your issue? |
|
@Hypnosphi I replicated the example from storybook usage with Webpack, so another webpack.config.js and it worked (and still works) |
|
@Hypnosphi here it is: https://github.com/Temoto-kun/create-react-app-storybook-repro What I did is I only ran |
|
@Temoto-kun That's weird. I cloned your repo and I can start storybook with no errors. I tried it with yarn: And with npm 3 and 5:
|
|
Maybe because of Node then? I have 7.7.1. And BTW I'm also running Windows 10. Any other info I can provide? |
|
Works for me with node v7.7.1 on mac. Will test on Windows. Node that node 7 has reached end of support this June UPD: works for me on Win10 with node v7.7.1 as well |
|
Tried updating my Node to 8.4.0. Still didn't work. |
|
@Temoto-kun Is you error message still the same ? |
|
@Temoto-kun, still didn't try your demo, but since @Hypnosphi managed to run it without problems, I may assume it's related to clean environment. Did you try to delete all the |
|
the easiest way to do that is |
|
@igor-dv @Hypnosphi I tried:
Nope. Still the same error. |
|
@Temoto-kun Just ran storybook on your project without any issue (MacOS Sierra 10.12, node 5.3.0 so an old version). Have you access to a Linux machine? |
|
I'm running into the same issue, it seems to happen when I have the storyshots addon installed and use dynamic module loading. Basically it's finding the sample dynamic stories in node_modules and failing when it tries to include them along with my code. I'm able to work around this by only including the folders I want evaluated in 'config.js': const req = require.context('../', true, /.*\/src\/*\.stories\.js$/)
function loadStories() {
req.keys().forEach(filename => req(filename))
}I haven't had luck getting it to exclude node_modules (it seems like |
|
@dbrrt Sorry, I don't have a Linux machine. Only using macOS 10.12.6 (Node 8.1.4) and Windows 10. |
|
@Temoto-kun I'm using almost the same configuration for macOS (10.12.6) and Node 8.2.1 as you, and I was able to run correctly storybook. Which version of storybook are you using ? Have you tried to update |
|
I fixed this issue by looking at some of the 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']
}
}; |
|
Hi Guys, If i have a repository with shared component across different projects and I do npm install with my private-shared-components library my shared components and story book is inside node_modules...I can't run story book from the parent project I get this: You may need an appropriate loader to handle this file type. What's the solution? Thanks, |
|
@unutoiul maybe creating a custom webpack file for storybook. It did the job for me. |
|
@badave I don't think that's related to JSX directly, but to any format not handled by webpack, if you want to have webpack loading markdown, then install the proper parser, and restart, same for JSX or SCSS :) |
|
@helloncanella @pouyajabbarisani I had set the include point to 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`,
}),
],
}; |
|
I was having this issue in any module with JSX in it with I got it working with the this config: // webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['react'],
},
},
],
},
],
},
}; |
|
Hello, I am having the same problem. I think I have both loaders and I import css in my main jsx file. This is my webpack configurations. Please help! |
|
@monsooness is that the webpack.config.js in the .storybook folder? Seems like that wouls be the config for your app. To configure storybook's webpack config you need a webpack.config.js in the .storybook folder. https://storybook.js.org/configurations/custom-webpack-config/ |
|
@ndelangen You can have a custom |
The jsx story was breaking storybook so I removed it. It probably needs a custom webpack.config.js inside /config/storybook. See storybookjs/storybook#1493
|
Seems like npm-linked projects aren't supported or something? I get these errors when linking a React project, makes it kind of hard to use private packages. Parcel supports packages with |
|
@tj I think the issue is that the file's path matches the ignore regex for the babel loader or it doesn't match the include regex. Can you try to use a custom webpack config that changes those regex's so your files will pass through the babel loader? |
|
I'm not familiar with webpack at all, I try hard to avoid it :D. It would be amazing if whatever the defaults are supported npm-linked stuff but I'll try |
|
@ndelangen example repository for reproduce problem: https://github.com/Luchanso/storybook-typescript-problem Outputs logs: Maybe later I'll try to play with webpack.config.js |
|
@Luchanso did you manage to get it to work? |
|
@AssisrMatheus I'll take manage it on the weekend |
|
@AssisrMatheus, @d-spiridonov, @lucasavila00 I created example repo with problem solution storybook-typescript-problem. |
|
@Luchanso Your example works! It saves my day, thank you. |
|
@Luchanso Your example works! It saves my year, thank you. |
|
I'm facing the same problem here Project Package.jsonProject webpack.config.js.storybook/main.jsStorythe output from webpackFinalAn finally i'm not sure why it's not indenting thanks |
|
Please paste the complete terminal errors here @pfmartins4 otherwise I can't know what's wrong. |
|
i am getting same isssue looks like it is something rrelated to SCSS loader of webpack
|
|
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
},
} |
|
@isc30 thanks for this 👍 |
|
I'm still running into this. @isc30 Your fix did not work for me 😢 |
@isc30 Thanks for this |
|
Did it. But it doesn't work |
|
@Kucerenko171 Try to connect this loader |
|
@mmo0307 it looks working. Thank you |
|
@Kucerenko171 Do you use latest version of storybook? |
|
I upgraded Storybook from v7 to v8 and started getting failures about import syntax not recognized, which is an indicator that babel is not being used to load files properly. I only needed this portion to fix my Storybook to use babel-loader properly (thanks @isc30 for the original code!): webpackFinal: (webpackConfig) => {
webpackConfig.module?.rules?.push({
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: require.resolve('babel-loader'),
},
],
});
webpackConfig.resolve?.extensions?.push('.ts', '.tsx');
return webpackConfig;
},Still, would be nice to know why we have to do this though. Why is Storybook v8 breaking this when Storybook v7 worked before? |
|
All the person who are facing this issue can install this extension in storybook 8 npm i @storybook/addon-webpack5-compiler-swc and add it to your main.js or main.ts file Example : |
and others
Sorry if this is an already answered issue but trust me when i told you that i spend most of the day googling about this and couldn't find a solution.
I have an existing project (with custom
webpack.config.dev.jsfile) that I want to integrate withstorybooksbut after following the getting started guide and installing whateverbabelor any other kind of dependency available on the web, i'm still not able to overcome this annoing issue.Based on the error message i think it has something to do with the configuration in
.babelrc. This is my actual setupPackage.json
Config dir
Located in
./config/.storybook.babelrc
(I installed almost EVERYTHING I found related to babel)
{ "presets": ["es2015", "react", "stage-0"], "plugins": [ "transform-runtime", "transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "react-hot-loader/babel", "typecheck", "transform-es2015-modules-commonjs", "add-module-exports", "import-asserts" ] }config.js
webpack.config.dev.js
I'm trying to use the original
webpack.config.dev.jsfile that I setup for my project developmentStory file
And finally the story file
The text was updated successfully, but these errors were encountered: