I'm new on stackoverflow to ask you a question that I never find on the internet... I hope I'm in the good website :)
So here is my problem : I would like to import some css files to a react application from node_modules dependencies. I use webpack for the developpement and I got an error I don't understand and that is in the title.
So here is the error details from the compiler :
ERROR in ./src/scss/app.scss
Module not found: Error: Can't find options with ident 'postcss'
# ./src/scss/app.scss 9:10-188
# ./src/app/App.js
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src
also, in the nav console I got this :
Error: Cannot find module '-!../../node_modules/css-loader/index.js?{"importLoaders":1}!../../node_modules/postcss-loader/lib/index.js??postcss!react-big-calendar/lib/css/react-big-calendar.css'
that is the content of my scss file cannot load css files.
App.scss :
exports.i(require("-!../../node_modules/css-loader/index.js?{\"importLoaders\":1}!../../node_modules/postcss-loader/lib/index.js??postcss!react-big-calendar/lib/css/react-big-calendar.css"), "");
You can check also my webpack config file :
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
}
]
},
plugins: [htmlWebpackPlugin],
resolve: {
extensions: ['.js', '.jsx', '.json', '.css']
}
};
What's wrong with my code ?
Thank you very much to help me ! If I'm not very clear, please ask me any other informations
You probably need to change your postcss-loader config to this. Depends really on which version of the loader you have, not needed from 4.0.0 (https://github.com/webpack-contrib/postcss-loader/releases/tag/v4.0.0)
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
},
}
Related
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 ^^
When I try to run Webpack, it throws an error:
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";
| .k-theme-test-class,
| .k-common-test-class {
# ./src/App.js 19:0-52
# ./src/index.js
# multi #babel/polyfill ./src/index.js
At first I thought the issue is the # symbol and then I realized it is not supposed to even run through node_modules, right?
My webpack.config.js is:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const PrettierPlugin = require('prettier-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
entry: ['#babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
chunkFilename: '[id].js',
publicPath: '/',
},
devServer: {
historyApiFallback: true,
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
exclude: /node_modules/,
},
{
test: /\.s?css$/,
exclude: /node_modules/,
oneOf: [
{
test: /\.module\.s?css$/,
exclude: /node_modules/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
sourceMap: true,
},
},
{ loader: 'sass-loader' },
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [['autoprefixer', {}]],
},
},
},
],
},
{
exclude: /node_modules/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=10000&name=img/[name].[ext]',
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '/src/index.html'),
filename: 'index.html',
inject: 'body',
}),
new ESLintPlugin(),
new MiniCssExtractPlugin(),
// new PrettierPlugin({
// configFile: '.prettierrc',
// }),
],
};
If I remove the 3 css-related exclude: I get the following error:
ERROR in ./node_modules/#progress/kendo-theme-default/dist/all.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Internal Error: Incompatible units: 'px' and 'em'.
at C:\www\Svila\SvilaReact\svila-erp\node_modules\webpack\lib\NormalModule.js:316:20
at C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\www\Svila\SvilaReact\svila-erp\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at Object.callback (C:\www\Svila\SvilaReact\svila-erp\node_modules\sass-loader\dist\index.js:62:7)
at Object.done [as callback] (C:\www\Svila\SvilaReact\svila-erp\node_modules\neo-async\async.js:8069:18)
at options.error (C:\www\Svila\SvilaReact\svila-erp\node_modules\node-sass\lib\index.js:293:32)
# ./src/App.js 19:0-52
# ./src/index.js
# multi #babel/polyfill ./src/index.js
where the culprit is:
border-width: max( 1px, .015em );. This is invalid sass and can be generally fixed by wrapping with calc border-width: calc(max( 1px, .015em )); as mentioned here
So I have the following questions in order of importance:
Why does this file get piped through the loaders, given it has a exclude: /node_modules/?
Are files from external libraries supposed to be piped through the loaders/plugins in Webpack, or do they have another way of including themselves in the dev/production version?
Why is the .js for babel-loader excluding /node_modules/ but not s?css? (I see such tendency around random webpack.config.js files)
Interestingly enough, the culprit line margin-left: calc(24px + 1em); is actually a valid css according to World Wide Web Consortium. That makes me wonder - should a plain css be piped at all through a sass-loader? Maybe this is not entirely correct, or is it?
What is the right way to fix it?
I am using webpack and react js.
I am getting this error when i try to import image or font file inside my scss file.
I have tried many solutions but none of them solved my problem,
webpack.common.js
enter image description here
const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: {
main: "./src/index.js",
vendor: "./src/vendor.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: ["html-loader"]
},
{
test: /\.(ttf|svg|png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[hash].[ext]",
outputPath: "imgs"
}
}
}
]
}
};
Here is another webpack.dev.js
module.exports = merge(common, {
mode: "development",
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "dist")
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/template.html"
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", //3. Inject styles into DOM
"css-loader", //2. Turns css into commonjs
"sass-loader" //1. Turns sass into css
]
}
]
}
});
ERROR in ./src/assets/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/assets/index.scss)
Module not found: Error: Can't resolve '../../../src/assets/fonts/icomoon.ttf' in 'C:\Users\jamal\Documents\webpack-demo-app\src\assets'
# ./src/index.js
# multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
You need to remember that the import actually takes "place" from the root index.scss file (the one that loads all the other partials). So the path you are using to fetch the asset is not accurate.
You need to use ./fonts/icomoon.ttf instead of ../fonts/icomoon.ttf
your file structure:
assets/
------/fonts
------/images
------/sass
------/---/partial1.scss // while the reference to the image is here
------/index.scss // the actual root of the reference call is here
I am learning reactjs with webpack. I found a error while i add
import 'bootstrap/dist/css/bootstrap.min.css'; in my index.js
I have successfully installed bootstrap loader but not getting why this error i am seeing.
I notice some question previously asked many people but those problem couldnt solve my problem, please don't report it as duplicate question
this is my webpack:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlWebpackPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ["babel-loader", "bootstrap-loader"]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader", "bootstrap-loader"]
}
]
},
plugins: [htmlWebpackPlugin]
};
the error fired:
ERROR in ./src/index.js
Module build failed (from ./node_modules/bootstrap-loader/loader.js):
Error: Cannot find module './lib/bootstrap.loader!./no-op.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
As I write webpack.config.js like this
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
}
};
And in index.jsx I import a react module App
import React from 'react';
import { render } from 'react-dom';
import App from './containers/App';
let rootElement = document.getElementById('box')
render(
<App />,
rootElement
)
I find if I named module app in App.jsx, then webpack will say in index.jsx can't find module App, but if I named named module app in App.js, it will find this module and work well.
So, I'm confuse about it. In my webpack.config.js, I have writed test: /\.jsx?$/ to check file, but why named *.jsx can't be found?
Webpack doesn't know to resolve .jsx files implicitly. You can specify a file extension in your app (import App from './containers/App.jsx';). Your current loader test says to use the babel loader when you explicitly import a file with the jsx extension.
or, you can include .jsx in the extensions that webpack should resolve without explicit declaration:
module.exports = {
entry: './index.jsx',
output: {
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx'],
}
};
For Webpack 2, leave off the empty extension.
resolve: {
extensions: ['.js', '.jsx']
}
In the interest of readability and copy-paste coding. Here is the webpack 4 answer from mr rogers comment in this thread.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
resolve: {
extensions: [".js", ".jsx"]
},
use: {
loader: "babel-loader"
}
},
]
}
Adding to the above answer,
The resolve property is where you have to add all the file types you are using in your application.
Suppose you want to use .jsx or .es6 files; you can happily include them here and webpack will resolve them:
resolve: {
extensions: ["", ".js", ".jsx", ".es6"]
}
If you add the extensions in the resolve property, you can remove them from the import statement:
import Hello from './hello'; // Extensions removed
import World from './world';
Other scenarios like if you want coffee script to be detected you should configure your test property as well like:
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
// you can now require('file') instead of require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
As mentioned in the comments on the answer from #max, for webpack 4, I found that I needed to put this in one of the rules that were listed under module, like so:
{
module: {
rules: [
{
test: /\.jsx?$/,
resolve: {
extensions: [".js", ".jsx"]
},
include: ...
}
]
}
}
Verify, that bundle.js is being generated without errors (check the Task Runner Log).
I was getting 'can't find module if file named jsx' due to the syntax error in html in component render function.
I was facing similar issue, and was able to resolve using resolve property.
const path = require('path');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.join(__dirname,'public'),
filename: 'bundle.js'
},
module : {
rules: [{
loader: 'babel-loader',
test: /\.jsx$/,
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.js', '.jsx']
}
}
As You can see I have used .jsx in there which resolved following error
ERROR in ./src/app.jsx
Module not found: Error: Can't resolve
For Reference: https://webpack.js.org/configuration/resolve/#resolve-extensions
I faced similar issue with imports while building my typescript project having the following webpack dependencies:
"webpack": "^5.28.0",
"webpack-cli": "^4.5.0"
So, I had a App.tsx file present in the correct path and exported with named export. But, yarn build was failing with Module not found: Error: Can't resolve './App' in '/app/sample_proj/src'. The relevant code for this error is: import {App} from './App';. To fix this, I had to add .tsx under webpack known extensions. Sample entry from webpack.config.js is :
module.exports = {
......
resolve: {
extensions: [ '.ts', '.js', '.tsx', '.jsx'],
}
}
Also, for this error, it does not matter, if the imports are default or named. webpack only needs to know the kind of file extensions it should deal with.
I found restarting my server fixed this issue. simply run
npm start