I have installed react-hot-loader and referenced the module in the webpack.config.js. However when i try to run webpack to compile the scripts, i get an error.
Please see below screen shot. Could someone please advise of what the issue could be. FYI, i am using all the latest libraries.
[1]: http://i.stack.imgur.com/2GCa1.jpg
/*webpack.config.js
module.exports = {
devtool: 'eval-source-map',
entry: {
main: [
'./src/main.js'
]
},
output: {
filename: './public/[name].js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot','babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
}
}
/*UPDATE*/
Code update
I have added an "s" after loader. It is now giving me the below error.
[2]: http://i.stack.imgur.com/LL1nn.jpg
Based on your second picture, you could try the following:
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['react-hot'],
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: ['babel-loader'],
query: {
presets: ['es2015', 'react']
}
}
]
I've created a starter with webpack, babel and react-hot-loader. Please have a look into my config: https://github.com/skrobek/webpack-react/blob/master/webpack.config.js
and package.json https://github.com/skrobek/webpack-react/blob/master/package.json#L19
Feel free to use it :-)
Related
I am discovering the CSS modules in a react application, I also use Webpack.
I edit the webpack configuration file, I try to change the color of a paragraph using a css file to test but the style is not applied.
Visual studio code tells me that the module is not found but I have yet entered the correct path of the file.
I think it's a problem with the webpack configuration file.
I did a lot of research, I tried different solutions ...
I thank you in advance for your help and your answers
I tried to follow the tutorial of this site => https://javascriptplayground.com/css-modules-webpack-react/
I did research on stack overflow, I try several solutions proposed in the different posts but it still does not work.
I then check with the webpack documentation to add the loaders "style-loader" and "css-loader"
Webpack configuration file
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
rules: [
{
enforce: 'pre',
test: /\.js$/,
loader: 'standard-loader',
exclude: /node_modules/
}, {
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader' ]
}
],
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
},
resolve: {
extensions: ['', '.js', '.jsx','css']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
File CSS
.title {
color: yellow;
font-size: 124px;
}
Test code snippet
import styles from './home.css';
<p className={styles.title}>hello world</p>
I want to change the color of a paragraph, using a CSS module but the style does not apply to the refresh of the page.
Right now I'm trying to create the above compiler using npm and gulp. But I keep getting stuck.
I only need it to compile jsx and stylus files to run on a localhost server.
In your webpack config, Add loader for jsx and stylus like below code.
For JSX & Stylus:
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.styl$/,
loader: 'css-loader!stylus-relative-loader?paths=node_modules/bootstrap-stylus/stylus/'
}
]
},
I have been using this webpack config for loading babel and css loaders, but getting error. My webpack config works very well, if I use only babel loader, but css loader isn't working.
var path = require('path');
var config = {
entry: './main.js',
output: {
path : path.join(__dirname, './'),
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader',
}
]
}
}
module.exports = config;
The error I am getting while running webpack is
ERROR in ./~/css-loader!./main.js
Error screenshot
You need to configure the CSS loaders for imports matching .css not .jsx. Right now you're passing a JavaScript file to the css-loader, which isn't valid CSS, so it fails. The correct loader configuration is:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader',
}
]
}
You need style loader in your webpack config:
Example from one of my projects:
var ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
loaders: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},
],
},
...
Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:
ERROR in ./src/index.jsx
Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string
I have updated my loaders to match the new format:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'file-loader',
query: {
name: '[path][name].[hash].[ext]',
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader',
query: {
limit: 100000
}
},
{
test: /\.icon-svg$/,
use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}]
},
// Bootstrap 3
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
}
]
},
It's as if something is not being compiled the way it was before, therefore causing a TypeError.
Turns out I was babelifing twice.
If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.
Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error
Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.
Removed .jsx and its working as expected.
A snippet of my webpack.config.js looks like this.
{
test: /\.js$/,
exclude: [/(node_modules)/],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'transform-class-properties',
'transform-decorators-legacy'
]
}
}
]
}
In case someone else is having the same issue, I had to remove the following from loader for it to work
{
test: /\.jsx?$/,
use: ['react-hot-loader/webpack']
}
In my case it helped when I removed devtool: 'inline-source-map' from webpack
I've read lots of other S/O posts that detail a similar problem, however I cannot find a solution for my specific issue.
I installed a node module, but I am now receiving this error message:
(syllable - is the module I installed)
index.js:641 ./~/syllable/problematic.json
Module parse failed: /Desktop/App/node_modules/syllable/problematic.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
Here is my Webpack config
var config = {
entry: './main.js',
output: {
path: './',
filename: 'index.js',
},
devServer: {
inline: true,
port: 3000
},
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
},
{ //<-- this line is throwing an unexpected token error
test: /\.json$/,
loader: 'json'
}
}
]
}
}
module.exports = config;
Note: I have es2015 installed, and I have tried re-writing the webpack.config.js several times to no avail.
What am I doing incorrectly?
It is trying to load a .json file. You currently do not have a json-loader setup to handle this sort of thing. Have a look at json-loader.
Example
npm install --save-dev json-loader
webpack.config.js
...
module: {
loaders: [
{
test: /\.jsx$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.json$/,
loader: 'json'
}
}
]
...
What is error and message
index.js:641 ./~/syllable/problematic.json Module parse failed:
/Desktop/App/node_modules/syllable/problematic.json Unexpected token
(2:11) You may need an appropriate loader to handle this file typ
And answer
You should really read it, It clearly says that Module parse failed. It gave you file name and told you that You may need an appropriate loader to handle this file typ
json-loader what you need
install json-loader with npm and add it to your config.
{
test: /\.json$/,
loader: 'json'
}
Currently your regular expression does not match any file extension. If you're trying to test both .js and .jsx file remove the last $ and replace it with ? and remove the |.
module:{
loaders: [
{
test: /\.jsx?/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
}