I have an issue about Storybook. I can't start storybook and I have an error about my SCSS file.
Here is the error:
ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
.h1 {
| color: red;
| }
at handleParseError (/myproject/node_modules/#storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:469:19)
I mean this is juste a simple class. But when the file is empty, the compilation is okay, so I don't understand how I can resolve this.
My SCSS file
.h1 {
color: red;
}
My Webpack file
const webpack = require('webpack');
const path = require('path');
module.exports = {
mode: 'development',
entry: path.resolve(__dirname, './src/index.js'),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.scss?$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
},
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx'],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.resolve(__dirname, './dist'),
hot: true,
},
};
My main.js file in the .storybook folder
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.#(js|jsx|ts|tsx)",
"../src/**/**/*.stories.#(js|jsx|ts|tsx)"
],
"addons": [
"#storybook/addon-links",
"#storybook/addon-essentials"
]
}
Is anyone has a solution please?
Thanks by advance
Finally, I have solved my problem, so here is how I did it.
First of all, I uninstalled the storybook (How to remove storybook from the react project), then the reinstalled via webpack (https://storybook.js.org/blog/storybook-for-webpack-5/).
For once with Webpack it works whereas installing it with NPM (or Yarn for my part) brought me to the complications that I had posted above. My guess is that it works for Webpack 5, whereas with NPM, I was getting an error about the css-loader loader that told me about Webpack 4.
Storybook worked, but I was still worried about .scss files. My terminal told me that I did not have a specific loader. So I took a loader for this type of file by adding a webpack.config.js in the .storybook folder created when we install Storybook. I used the instructions found here: https://storybook.js.org/docs/react/configure/webpack
About Sass files: Storybook is case sensitive, and also doesn't take into account files starting with _, so not possible to use partials
I hope you don't have this kind of problem, but if you do, maybe these answers will help you ^^
Related
I'm trying to build with webpack
npm run build
But I get the following error
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
#charset "UTF-8";/*!
| * Bootstrap v5.0.2 (https://getbootstrap.com/)
| * Copyright 2011-2021 The Bootstrap Authors
My webpack config looks like this
const path = require("path");
module.exports = {
mode: "production",
entry: "./paginate.js",
output: {
path: path.resolve("./"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
],
},
externals: {
react: "react",
},
};
.babelrc file looks like
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
I've searched but can't seem to find the right loader for this.
I'm not sure, just a guess, most likely bootstrap is trying to import CSS or scss and you don't have a loader for it defined.
Try adding:
{
test: /\.s?[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: [/node_modules/],
},
To your webpack rules and also install those modules with --save-dev.
Side node, this regular exression test: /\.js|jsx?$/, is incorrect, just use test: /\.jsx?$/,. The "?" means the x is optional.
I am trying to build a react app and am getting this error from webpack: 'ERROR in ./src/App.css 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.' The first line in App.css where the error occurs is this: #import url('https://fonts.googleapis.com/css?family=Alata|Comfortaa:400,600,700|Roboto&display=swap');
I am using the url-loader I learned about in a thread I read online that was supposed to fix it.
And here is my full web.config.js:
/* eslint-env node */
const webpack = require('webpack');
// eslint-disable-next-line #typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [/node_modules/],
loader: ['babel-loader', 'eslint-loader']
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
exclude: /node_modules/,
use: [
{
loader: 'url-loader?limit=100000',
options: {
name: '[name].[ext]',
limit: 1024,
publicPath: 'dist/assets/',
outputPath: 'dist/assets/'
}
}
]
}
]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
// path: __dirname + '/dist',
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
filename: 'bundle.js'
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: './dist',
hot: true
}
};
It appears you are using SASS inside of a .css file (#import url(foo) is not valid CSS, it is SASS, thus Webpack does not know to handle this line). Since you are trying to compile a SASS file, you need to configure your Webpack build to handle this type of file. You should install the sass-loader plugin and add configuration for it.
See the plugin README https://github.com/webpack-contrib/sass-loader
Additionally, you should rename your src/App.css to src/App.scss so that Webpack knows to use the sass-loader plugin for this file.
I am trying to create a custom npm package that will allow me to import some of my components over multiple projects. I wrote a simple package yesterday which can be found here: demo npm package. It's a simple starter project that has a webpack config and a uses npx babel to transpile and copy the files to the dist and lib folder.
If I include this package into my own project it works but not as I would expect. when I use the following code:
import {NavBar, HelloLib} from "testprivatenprodney;
It gives an error "Module not found".
when I use
import { NavBar, HelloLib } from "testprivatenprodney/lib/HelloLib";
it works as long as the navBar component does not have any child components. If it has I get "Module not found" error again.
I think I am missing something in my webpack configuration. yet all I can find is to have the resolve array, which is included.
const webpack = require("webpack");
module.exports = {
devtool: "source-map",
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.css$/,
loaders: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx"]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
]
};
any help would be much appreciated.
I have a fairly basic webpack setup that runs babel and out comes my minified js with a source map.
Now when I run my source map in chrome I get the js before babel and before minification. However I would often like to have my source map after babel but before minification. Is this possible?
TL;DR I want source map to post-babel pre-minifcation. Possible?
For completeness
I run babel-loader 8 with webpack 4
Here is a screenshot from chrome showing the problem. As you can see the Dropzone tag indicates this is jsx (and so before babel)
Secondly here is my webpack config (not that it actually matters for my question).
const path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts', 'react'),
entry: {
client: './client'
},
output: {
path: path.join(__dirname, 'Scripts', 'app'),
filename: '[name].bundle.min.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
plugins: [require('#babel/plugin-proposal-object-rest-spread')],
presets: ["#babel/es2015", "#babel/react", "#babel/stage-0"]
}
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
externals: {
// Use external version of React (from CDN for client-side, or
// bundled with ReactJS.NET for server-side)
react: 'React'
},
devtool: 'source-map'
};
Running webpack with -d gives a second set of source maps in chrome that does the trick.
I want to convert webpack 1 configuration file to webpack 2 version.
In addition, I want to exclude node modules from bundle.
I got following Exception
Using removed Babel 5 option: base.modules - Use the corresponding module transform plugin in the plugins option. Check out http://babeljs.io/docs/plugins/#modules
In addition, I get another error
ERROR in ./index.js
Module parse failed: Unexpected token (9:16)
You may need an appropriate loader to handle this file type.
The errors seem informative but I can't find what is wrong.
Do I miss something from migration guide?
Version 1
const config = {
entry: './index.js',
output: {
path: '/',
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
module.exports = config;
Version 2
const config = {
entry: './index.js',
output: {
path:'/',
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
rules:[
{
test:/\.jsx?$/,
use:[
{
loader:'babel-loader',
options:{
only:['/node_modules/'],
presets:['es2015', 'react']
},
}
]
}
]
}
};
module.exports = config;
For the first error with Babel, you likely have a dependency that still uses Babel 5 and it contains a config that is no longer allowed in Babel 6. That probably happens because you're trying to transpile your node_modules, as you have removed the exclude option, which has not been changed in webpack 2. Babel always uses the closest config it can find.
For the second error, you are using some syntax that requires Babel, presumably JSX. But you have set the only option on babel-loader, which tells Babel to only transpile files that match the given path. Hence, it's only applied to the node_modules, not the rest of your project. That is exactly the opposite of what you wanted.
Your .jsx rule should be:
{
test:/\.jsx?$/,
exclude:/node_modules/,
use:[
{
loader:'babel-loader',
options:{
presets:['es2015', 'react']
},
}
]
}
You are also setting the output.path to /. That is the root of your file system, not the root of your project. To use the directory where the webpack config is, you can use Node's __dirname, which is the absolute path to the directory of the currently executed file (i.e. webpack.config.js).
output: {
path: __dirname,
filename: 'bundle.js',
},