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.

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

How to add font awesome from node_modules directory using webpack

I've installed font-awesome using npm install font-awesome --save-dev, and now Im having trouble including it on my project. Below are my code.
webpack.config.js
{
test: /\.(svg|woff|woff2|ttf|eot|otf)$/,
loader: 'file-loader?name=assets/[name].[ext]',
}
app.scss
$fa-font-path: "~font-awesome/fonts";
#import "~font-awesome/scss/font-awesome.scss";
Error
ERROR in ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
Module parse failed: /ProjectSite/node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0 Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.

By reading doing some research I finally solved it by adding ([\?]?.*)$ on the regex part.
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
loader: 'file-loader?name=assets/fonts/[name].[ext]',
}

Have you installed the npm file-loader package?
npm install --save-dev file-loader
I have a webpack example repository in which I include font-awesome. It might help. You can find it here

with new webpack versions you may wanna try
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
use: [
{
loader: 'file-loader?name=assets/fonts/[name].[ext]'
}
]
}

React webpack / browserify "unexpected token"

I have this npm module that I created and every time I try to include it to see if it works I get this error:
Unexpected token <
You may need an appropriate loader to handle this file type.
I've used react-starterkit and included it in main.js like so
var ReactDOM = require('react-dom');
var ColorPicker = require('color-picker-react');
ReactDOM.render(<ColorPicker />, document.getElementById('app'));
then when i run gulp which runs webpack I get the error. Here's the webpack.config.js
module.exports.getConfig = function(type) {
var isDev = type === 'development';
var config = {
entry: './app/scripts/main.js',
output: {
path: __dirname,
filename: 'main.js'
},
debug : isDev,
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}]
}
};
if(isDev){
config.devtool = 'eval';
}
return config;
}
I've tried everything I could think of and still can't get it to work. I'm not using ES6 anywhere and I've tried many different react starter kits but I just can't get it to work. Please help!!!
P.S. I am able to get the project to run when I clone it locally and build out app.js with browserify like so: browserify -t [ babelify --presets [ react ] ] app.js -o bundle.js

To solve the problem you need to remove the line exclude: /node_modules/ if you are not the author of the npm module (But you should go with another module).
The component color-picker-react doesn't seem to have a release build or script that compile the jsx. So you need to do it by your own and compile the jsx file on the fly using wepack.
Instead of just removing the exclude: /node_modules/
You can exclude all /node_modules/ except the /node_modules/color-picker-react folder by using a regex pattern :
//will exclude all modules except `color-picker-react`
exclude: /node_modules\/(?!color-picker-react).*\//,
EDIT Basics for creating a npm module:
A correct setup for a npm module is to add a prepublish script to
ensure compilation happens automatically before uploading to NPM.
Thus when you push your module to npm the users doesn't need to compile the module they can just require it.
Taking an example of a node_module:
https://github.com/securingsincity/react-ace/blob/master/package.json
The package.json file is saying which file is the entry point when you required the module
"main": "lib/ace.js",
You can see in the github repository that the lib folder doesn't exist because added to the .gitignore but the line
"prepublish": "npm run clean && npm run build"
is run before uploading to NPM so on the npm repository the lib/ folder exist and you can see it when you do npm install --save react-ace the lib folder appears in the node_modules/react-ace/ folder
A great link that explains how to build npm modules in es6 for example http://javascriptplayground.com/blog/2015/10/authoring-modules-in-es6/
EDIT explain what needs to be done on react-color-picker module :
Sorry i didn't see that you was the author of the module so you should go with the solution below.
The react-color-picker for example doesn't have a prepublish script and the main file is index.js which is
var ColorPicker = require('./colorpicker.js'); // require a file with jsx will throw an error if not precompiled
module.exports = ColorPicker;
So a syntax error is thrown.
To be able to use the npm module in your other applications :
Create a webpack config for the npm module to handle the conversion of your react component written using jsx (you can take some of the webpack configs of this module https://github.com/securingsincity/react-ace set libraryTarget: 'umd' you module will be more easy to consume from various module systems (global, AMD, CommonJS).)
add a prepublish script that output a precompiled version of the color picker (lib/pickedprecompiled.js)
change the main to "main": "lib/pickedprecompiled.js",

How should I use moment-timezone with webpack?

In using webpack to build my project, I typically require modules in CommonJS from npm modules. I need moment-timezone in my project, however in building the package you must also build all the data from moment-timezone, which can be quite a lot.
Additionally the build is failing with the following error:
ERROR in ./~/moment-timezone/data/packed/latest.json
Module parse failed: /site/node_modules/moment-timezone/data/packed/latest.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "version": "2015a",
| "zones": [
| "Africa/Abidjan|LMT GMT|g.8 0|01|-2ldXH.Q",
# ./~/moment-timezone/index.js 4:15-51
At this point I am not as concerned with the build failing, as I am about the size of the build if it actually succeeds. Though, obviously the failing build will need to be addressed too at some point.
I would appreciate any pointers on how to handle this, especially if any of you have encountered this same issue using webpack (or browserify too, probably).

You can fix this by adding the JSON loader to your webpack configuration.
$npm install json-loader
And add it to your loaders in webpack.config.js. Don't forget to add the extension as well.
{
module: {
loaders: [
{include: /\.json$/, loaders: ["json-loader"]}
]
},
resolve: {
extensions: ['', '.json', '.jsx', '.js']
}
}

If you're using webpack 2.x (currently in beta)
npm install json-loader
then include this in your rules
{
test: /\.json$/,
loader: "json-loader"
}