Configuration
webpack.config.js
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
'postcss-loader'
]
})
...
new ExtractTextPlugin('../css/[name].bundle.css')
postcss.config.js
module.export = {
plugins: [
require('autoprefixer')
]
}
package.json
"webpack": "^3.10.0",
"css-loader": "^0.28.9",
"style-loader": "^0.20.1",
"extract-text-webpack-plugin": "^3.0.2",
"postcss-loader": "^2.0.10",
"autoprefixer": "^7.2.5",
Additional Info
$ node -v
v9.4.0
Issue
I get not errors, when running this configuration. It runs as if postcss-loader doesn't exist and gives me plain css. I am trying to run the basic example posted on the autoprefixer site
webpack.config.js
test: /\.css$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')
]
}
}
]
})
...
new ExtractTextPlugin('/css/[name].bundle.css')
Related
I am trying to move from a CRA app to using webpack, but having trouble with the loaders.
I have npm modules that start with '#', including but not limited to #material-ui/core/styles.
Removal of this '#' is not an option, I need to figure out how to get around this error.
The error I am seeing it this:
ERROR in ./node_modules/#connect/nav/lib/Canvas/index.js 116:17
Module parse failed: Unexpected character '#' (116:17)
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
|
| "use strict";
> module.exports = #material-ui/core/styles;
My webpack.config.js is
const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/'
},
resolve: {
modules: [path.join(__dirname, 'src'), 'node_modules'],
alias: {
react: path.join(__dirname, 'node_modules', 'react'),
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
},
],
},
{
test: /\.svg$/,
use: {
loader: 'svg-url-loader',
options: {
encoding: 'base64'
}
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
options: {
name: '/public/assets/[name].[ext]'
}
}
],
},
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html',
}),
],
devServer: {
historyApiFallback: true,
}
};
Using the following packages:
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
I'm trying to implement SSR using React (create-react-app) and Firebase. To do so, I'm currently working on my webpack configuration following this tutorial and github dir:
module.exports = [{
entry: './src/index.js',
module: {
rules: [
{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
{test: /\.(png|jpe?g|gif|svg|otf)$/i, loader: 'file-loader', exclude: /node_modules/},
]
},
output: {
filename: 'public/bundle.js',
path: __dirname
}
}];
Somehow for react states, webpack returns the following error:
SyntaxError: /Users/timfuhrmann/Documents/Entwicklung/React/auriga/src/shared/ImageHolder.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:11):
5 | class LazyImage extends Component {
6 |
> 7 | state = {
| ^
8 | src: null,
9 | transition: false
10 | };
Browsing the web I found that I need to install plugin-proposal-class-properties - but how do I configure this inside of webpack?
Babel:
"devDependencies": {
"#babel/cli": "^7.7.7",
"#babel/core": "^7.7.7",
"#babel/plugin-proposal-class-properties": "^7.7.4",
"#babel/preset-env": "^7.7.7",
"#babel/preset-react": "^7.7.4",
"css-loader": "^3.4.0",
"express": "^4.17.1",
"file-loader": "^5.0.2",
"firebase-admin": "^8.9.0",
"firebase-functions": "^3.3.0",
"firebase-tools": "^7.11.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
.babelrc:
{
"presets":[
"#babel/preset-env", "#babel/preset-react"
]
}
You just need to put it in your Babel plugins:
.babelrc:
{
"presets": [
"#babel/preset-env", "#babel/preset-react"
],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
Source: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
I'm getting this below error when I upgraded my project from webpack 3.x to webpack 4.0.0
ERROR in multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx
Module not found: Error: Can't resolve 'babel-loader' in 'C:\projects\rebasing\uisrc'
# multi script-loader!jquery/dist/jquery.min.js script-loader!foundation-sites/dist/js/foundation.min.js eventsource-polyfill webpack-hot-middleware/client?reload=true ./src/index.jsx
The rules configurations is as shown below in config file
rules: [
{
test: /\.(jsx?)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
]
Package.json have following libraries
"devDependencies": {
"babel-cli": "6.26.0",
"babel-core": "6.8.0",
"babel-eslint": "7.0.0",
"babel-loader": "7.1.5",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.5.0",
"babel-preset-stage-2": "6.17.0",
"babel-register": "6.26.0",
}
Any help would be appreciated.
In webpack4 the configuration should be loader: "babel-loader" but not use: "babel-loader"
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(jsx?)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
]
Here is my working demo of webpack4
Versions I am using
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server":"^3.1.4",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1"
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const webpack = require('webpack');
module.exports = {
target: "web",
entry: [
"whatwg-fetch",
'webpack-dev-server/client?http://localhost:8090',
'webpack/hot/only-dev-server',
'babel-polyfill',
"./src/index.js"
],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
publicPath: "/"
//make sure port 8090 is used when launching webpack-dev-server
},
plugins: [new HtmlWebpackPlugin({
template: "index.html"
}),
new CompressionPlugin({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.jsx$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8
}),
new webpack.HotModuleReplacementPlugin(),
// enable HMR globally
new webpack.NoEmitOnErrorsPlugin(),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
],
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader"
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
},
resolve: {
modules: [
path.resolve("./src"),
path.resolve("./node_modules")
],
extensions: [".js", ".jsx"]
},
devServer: {
watchOptions: {
// Needed for Windows Subsystem for Linux dev environment:
poll: true
},
contentBase: "/build"
},
devtool: "cheap-module-eval-source-map",
node: {
child_process : "empty",
fs: "empty"
}
};
Try clearing your node_modules cache and re-installing if you haven't yet:
rm -rf node_modules/
rm -rf ~/.npm
npm cache verify
npm install
I've started some project in React, using this template:
CoreUI React
It doesn't ship with the properties transform plugin, so i installed it. My babelrc file looks like this:
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
My dev dependencies:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
}
I didn't change anything in the webpack config file(should i?)
Part of my webpack config file:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['react', 'env']
}
}
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(scss)$/,
use: ['css-hot-loader'].concat(extractSCSS.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {alias: {'../img': '../public/img'}}
},
{
loader: 'sass-loader'
}
]
}))
},
{
test: /\.css$/,
use: extractCSS.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.(png|jpg|jpeg|gif|ico)$/,
use: [
{
// loader: 'url-loader'
loader: 'file-loader',
options: {
name: './img/[name].[hash].[ext]'
}
}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader',
options: {
name: './fonts/[name].[hash].[ext]'
}
}]
},
Once i try to compile, using the dev server, i get the nasty error, referring to a property defined in one of my class-based components.
I know this issue was raised here before, but non of the posts seemed to be revolving around a similar setup to mine, so i didn't find the solution there.
Idea, anybody?
You have to remove the options.presets key from the babel-loader config, because otherwise, Babel picks up these presets and ignores your .babelrc file.
Alternatively, you could provide the entire configuration in webpack.config:
options: {
cacheDirectory: true,
presets: ["react", "env"],
plugins: [
"transform-class-properties",
"transform-object-rest-spread"
]
}
This question already has answers here:
Webpack + Babel error
(2 answers)
Closed 5 years ago.
I decided to rewrite my existing React App from ES5 to ES6. Below is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import ToDoList from './to-do-list.jsx';
//Put the components into HTML
ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));
However when I try to build with webpack and launch the app I get the error that:
ERROR in ./src/app/index.js
Module parse failed: /home/sam/devzone/github/simple-react-todo-app/src/app/index.js Unexpected token (6:16)
You may need an appropriate loader to handle this file type.
|
| //Put the components into HTML
| ReactDOM.render(<ToDoList/>, document.getElementById('todo-wrapper'));
I have selected babel-preset-env instead of babel-preset-es2015, but I highly doubt that this is the cause. Below are snapshots of my package.json and my webpack.config.js respectively.
package.json
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
...
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"eslint": "^4.7.2",
"eslint-plugin-react": "^7.4.0",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
"presets": [
["env", {
"loose": true,
"modules": false,
"useBuiltIns": true,
"debug": true,
"include": ["transform-es2015-classes"]
}],
"react"
],
"plugins": [
"babel-plugin-transform-es2015-parameters",
"babel-plugin-transform-es2015-destructuring"
]
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
],
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
As it might be evident that I did a bit trial and error myself, but I seem to be totally lost now.
The app folder structure and other relevant files can be seen inside my repo here.
Any pointers would be appreciated.
Your webpack's config is wrong (it's old config from Webpack 1)
You should change it to:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
rules: [
{
test: /\.jsx?$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
options: {
"presets": [
["env", {
"loose": true,
"modules": false,
"useBuiltIns": true,
"debug": true,
"include": ["transform-es2015-classes"]
}],
"react"
],
"plugins": [
"babel-plugin-transform-es2015-parameters",
"babel-plugin-transform-es2015-destructuring"
]
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
};
Just change
test: /\.jsx?$/,
To
test: /.(js|jsx)?$/,