Develop Reference

Webpack Error: Can't resolve style-loader from my webpack.config.js

I created a django project with django apps, one of which contains React. I am basically capturing the data in a Django Rest API then sending data to my REact and thus rendering "dynamic" views.
But, when I try to style my react or do pretty much anything except use Javascript, I run into an error. The error I have right now is after installing the css loader for webpack via the documentation page: https://www.npmjs.com/package/css-loader, the error says: ERROR in ./src/index.js 3:0-21 Module not found: Error: Can't resolve 'style-loader' in 'C:\Users\andrew.bregman\Documents\AppDev\django-react\django_react\frontend'
Here is my webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
]
}
};
Please let me know what other files you would like. Thanks in advance!

This sounds like you don't have the style-loader module installed: npm install -D style-loader. The WebPack documentation is a little weak; it tells you to install the css-loader but it forgets completely to tell you to install the style-loader.

Webpack unable to compile js in already working node package

I'm trying to make some style changes to a node package I have installed using patch-package, and in order to do so I have to use webpack to compile the code in the src/ directory to get new code in dist/. When I run npx webpack I get the following error:
ERROR in ./src/index.js 189:12
Module parse failed: Unexpected token (189:12)
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
| render() {
| return (
> <div>
This node package worked fine out of the box, I remind you. I'm not sure what I'm missing here.
The package doesn't come with any config file other than the default. Here's what's in there:
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env']
}
}
},
Thanks in advance!
Edit: removing node_modules & package-lock and reinstalling does not solve the issue

clean your node_modules and reinstall the packages might help.

Error with webpack 4 and babel 7

I have a project with React and Webpack as build system. My devDependencies
devDependencies
"webpack": "^4.5.0",
webpack.config.js
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
...
And I get this error:
ERROR in ./node_modules/project/components/InfiniteScroller.jsx
Module parse failed: Unexpected token (9:8) You may need an
appropriate loader to handle this file type.
What I am doing wrong?

It looks like you're including uncompiled code from node_modules, your loader specifically excludes compiling node_modules code (exclude: /node_modules/) for efficiency reasons. Usually modules expose a compiled version of the library (usually in /dist, usually pointed to by "main" property in the package.json of the module).
If you want to parse code in node_modules, I recommend you just do it for node_modules/project, rather than all modules for efficiency. Modify your exclude statement accordingly, something like: exclude: /node_modules(?!\/project)/
You'll also need to make sure you use the necessary presets to handle the files (e.g. babel-preset-env, babel-preset-react) and any plugins the file might need (e.g. transform-object-rest-spread etc).

Since I don't have enough points to comment, I'll post as an answer -
I see you're importing a .jsx module - You should try adding
query: {
presets: ['es2015','react']
}
to your rule after use

javascript + gulp + babel + webpack. error: Module not found: Error: Can't resolve 'babel-loader'

I'm creating a javascript project. To create it I'm using gulp and babel.
My problem is that I can't develop my code over multiple file, so I'm search a solution to 'enable' importing. At the moment I'm trying to configure webpack.
The Gulp Task is this:
gulp.task('webpack', () => {
return webpack_stream(webpack_config)
.pipe(rename('webpack_code.js'))
.pipe(gulp.dest('.build/asset/webpack/'));
});
The webpack.config.js is this:
module.exports = {
entry: ['./src/asset/js/main.js'],
output: {
filename: 'bundle.js',
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: [
['env', 'stage-0',{ modules: false }],
],
},
},
],
},
resolveLoader: {
modules: ['./node_modules'],
},
resolve: {
modules: ['./node_modules'],
},
target: 'node',
};
My current error is this:
Error in plugin 'webpack-stream'
Message:
multi ./src/asset/js/main.js
Module not found: Error: Can't resolve 'babel-loader' in ...
What's wrong?
Another Question: What's I have to put as value of entry key? Only the entry point js file or the whole files of the project?
Thanks!!

What's wrong?
I'd guess that in your project, your Webpack instance is not finding the babel loader because of your config / environment specific issues.
I've had the exact same issue as you. Here are some troubleshooting steps for to check first:
See if babel-loader is actually installed. I know it is simple, but it can save you time.
Check which Webpack/Babel versions you're dealling with in your package.json file. I'm using Webpack 4 and Babel 8. Sounds like some newer versions doesn't accept this: use: 'babel' in your webpack.config file. You need to ensure that the -loader is being used as it follows: use: 'babel-loader'.
Reinstall your node_modules folder. Sometimes it works.
Another Question:
What's I have to put as value of entry key?
Only the entry point js file or the whole files of the project?
Accordingly to Webpack's docs:
The entry object is where webpack looks to start building the bundle. The context is an absolute string to the directory that contains the entry files. - Webpack Ref
Considering that, you should pass to the entry object, the path of a folder or a file that will be used to generate your final JS file with all your modules in it.
If you have nested files, that you don't import as modules, I think you'll have to head to the docs and see this specific case.
But if this files are nested and are being imported as modules, in your entry file/folder, they will be generated in the output file.
I know it's not much but following these steps, helped me to solve it. :)

Bundling non-native npm modules with Webpack

Description
I have a nodejs + TypeScript + express project and currently the source *.ts files are being bundled with webpack and node_modules is ignored with webpack-node-externals.
When I deploy bundle.js in Docker, I would need to still run npm i --production on the target image to install the dependencies, which installs all the modules listed in package.json
The Problem:
If I am using only one function from lodash which does not have native parts, the whole lodash module (4.8MB) is installed nonetheless (which is intended).
This results in a huge node_modules folder where functions inside packages aren't always necessarily used in bundle.js. This problem is especially prevalent when containerizing the application with Docker.
Is there any way to bundle non-native modules with Webpack while leaving native modules alone?

This is very similar to https://stackoverflow.com/a/54393299/2234013 - I believe you're looking for nodeExternals({ whitelist }) and babel-loader exclude:
// excerpt from https://stackoverflow.com/a/54393299/2234013
externals: [
nodeExternals({
whitelist: [/lodash/]
})
],
...
module: {
rules: [
{
...
exclude: /node_modules\/(?!(lodash).*/,
use: {
loader: 'babel-loader',
...
}
}
]
}