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.

How to use Craco to add instructions to Webpack

I would like to add these instructions to Webpack through Craco:
{
test: /\.json$/,
loader: 'url-loader',
options: {
limit: false,
publicPath: 'assets'
},
type:'javascript/auto'
}
How to do this?
I'm not familiar with Webpack or Craco at all
Basically what I'm trying to do is that I have animals.json file but currently when importing it via:
import animals from './animals.json'
I end up with the contents of the json file when I actually want a URL like localhost:8000/static/media/animals.json and only when I open that link should the contents of the json file be displayed...
I have been instructed that overriding webpack's default functionality via the above lines can accomplish this...

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. :)

Webpack2 - How to require an image from HTML

Webpack claims to manage module dependencies including image files. I understand that the following webpack config allows me to require jpg files from JS/CSS:
module.exports = {
module: {
rules: [
{
test: /\.jpg$/,
use: [ 'file-loader' ]
}
]
}
}
using url(/image.png) or require('./image.png'), but how would I include an image from an HTML file?
<img src="/image.png">
I know I can use copy-webpack-plugin to copy over static files into the output directory, but I'm wondering if there is a way to require images directly from HTML.

'html-loader' will do this for you by default, however if you are reading this behavior from your main index.html page, you will need to make webpack treat it as module also. Luckily html-webpack-plugin can do this for you in conjunction with html-loader: html-webpack-plugin.