object-rest-spread doesn't transform the spread syntax - redux

Nothing seems to work to get webpack to recognize the spread operator.
I've also tried adding the 7.0.0-beta's for babel-core and object-rest-spread.
When I run, I get the message I need an appropriate loader to handle the file type. With an unexpected token on the place of the spread-operator. (see img)
This is my .babelrc:
{
"plugins": [
"syntax-dynamic-import",
"transform-async-to-generator",
"transform-es2015-destructuring",
"transform-es2015-parameters",
"transform-object-rest-spread",
["react-intl", {
"messagesDir": "./translations/messages/"
}]],
"presets": ["es2015", "react", "stage-0"]
}
This is my webpack.config.js:
require('babel-polyfill');
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/index'
],
module: {
loaders: [
{test: /\.jsx$/, loader: 'babel-loader', /*...*/},
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
{ test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' },
{ test: /\.(svg|png|wav)$/, loader: 'file-loader'},
{ test: /\.css$/, loader: 'style-loader!css-loader'},
{ test: /\.(eot|woff|woff2|ttf)$/, loader: 'url-loader?limit=100000'},
],
},
resolve: {
extensions: ['.js', '.jsx', '.scss']
},
output: {
path: path.join(__dirname, '/dist'),
publicPath: '/',
filename: 'bundle.js'
},
This is my package.json:
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.0",
"babel-plugin-react-intl": "^2.2.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"es6-object-assign": "1.1.0",
The file where the error occurs:
const initialState = {
sprites: {},
stage: {}
};
const reducer = function (state, action) {
if (typeof state === 'undefined') state = initialState;
switch (action.type) {
case UPDATE_TARGET_LIST:
return Object.assign({}, state, {
sprites: action.targets
.filter(target => !target.isStage)
.reduce(
(targets, target, listId) => Object.assign(
targets,
//error message spread operator not handled
{[target.id]: {order: listId, ***...target***}}
),
{}
),
stage: action.targets
.filter(target => target.isStage)[0] || {}
});
case UPDATE_EDITING_TARGET:
return Object.assign({}, state, {editingTarget: action.target});
default:
return state;
}
};

Related

You forgot to add 'mini-css-extract-plugin' plugin

I'm using mini-css-extract-plugin in my webpack, version 1.3.6 but when trying to run dev build getting the below error. css and scss both are in the app.
ERROR in ./src/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = ({ mode } = { mode: "production" }) => {
console.log(`mode is: ${mode}`);
return {
mode,
entry: "./src/index.tsx",
output: {
publicPath: "/",
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: "image-webpack-loader",
},
"url-loader?limit=100000",
],
// type: 'asset/inline'
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
},
],
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css",
outputPath: "css",
esModule: false,
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: { auto: true },
},
},
{
loader: "sass-loader",
options: {
webpackImporter: true,
},
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico",
}),
new MiniCssExtractPlugin({
linkType: "text/css",
}),
],
devServer: {
open: true,
},
};
};
package.json
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel": "^6.23.0",
"babel-loader": "^8.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"css-loader": "^5.2.7",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.0.0",
"image-webpack-loader": "^8.1.0",
"mini-css-extract-plugin": "^1.3.6",
"node-sass": "6.0.1",
"postcss-loader": "^6.2.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.2.0",
"url-loader": "^4.1.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^3.11.1"
}

Webpack 4 - Minify CSS that was compiled from SCSS

Developing a wordpress site and using webpack to bundle assets.
I have a setup where I'm compiling SCSS to CSS among other things. I want to minify the output CSS and remove comments. I tried to add optimize-css-assets-webpack-plugin and configure it as example suggests, but it doesn't work (no errors)...
So how can I modify this webpack config so that output is (1) stripped of comments and (2) minified?
webpack.config.js:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
],
},
plugins: [
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};
additional postss.config.js:
module.exports = {
plugins: {
'autoprefixer': {}
}
}
Package.json:
{
"name": "EZTheme",
"version": "1.0.0",
"description": "EZ Theme",
"main": "index.js",
"scripts": {
"test": "test",
"build": "webpack",
"start": "webpack --watch",
"serve": "webpack-dev-server --open"
},
"repository": {
"type": "git",
"url": ""
},
"author": "",
"license": "ISC",
"bugs": {
"url": ""
},
"homepage": ""
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.6.3",
"autoprefixer": "^9.3.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"browser-sync-webpack-plugin": "^2.2.2",
"css-loader": "^1.0.1",
"exports-loader": "^0.7.0",
"extract-loader": "^3.1.0",
"extract-text-webpack-plugin": "^4.0.0-alpha.0",
"file-loader": "^2.0.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"popper.js": "^1.14.6",
"postcss-cli": "^6.0.1",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"bootstrap": "^4.1.3"
}
}
It turns out the problem was that I was trying to use extract-text-webpack-plugin which does not work with webpack 4.
Instead, I switched to mini-css-extract-plugin along with optimize-css-assets-webpack-plugin.
My new webpack.config.js file:
const path = require("path");
const config = require('./config.js');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'production',
entry: ["./src/app.js", "./src/scss/style.scss"],
output: {
path: path.resolve(__dirname, "wp-content/themes/ezdigital"),
filename: "js/[name].js"
},
module: {
rules: [
{
test: /\.scss$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css"
}
},
{
loader: "extract-loader"
},
{
loader: "css-loader?-url"
},
{
loader: "postcss-loader"
},
{
loader: "sass-loader"
}
]
},
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ["file-loader"]
}
]
},
//remove comments from JS files
optimization: {
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false,
},
},
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css"
}),
new BrowserSyncPlugin( {
proxy: config.url,
files: [
'**/*.php'
],
reloadDelay: 0
}
)
]
};

webpack not creating CSS file for SCSS

This is my package.json
{
"name": "login-ts-react",
"version": "1.0.0",
"main": "webpack.config.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server"
},
"dependencies": {
"react": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2"
},
"devDependencies": {
"style-loader": "^0.21.0",
"mini-css-extract-plugin": "^0.4.0",
"#types/react": "^16.3.11",
"#types/react-bootstrap": "^0.32.8",
"#types/react-dom": "^16.0.5",
"awesome-typescript-loader": "^5.0.0-1",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"node-sass": "^4.9.0",
"postcss-loader": "^2.1.4",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.1",
"source-map-loader": "^0.2.3",
"typescript": "^2.8.1",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-server": "^3.1.3",
"webpack-env": "^0.8.0"
}
}
And this is my webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.s?[ac]ss$/,
use: [
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}
My understanding is that when I run my application and access is from the browser, I should see a bundle.js and a bundle.css.
When I run my application and see the network tab of chrome develop tools, I see bundle.js but there is no bundle.css.
I have the following SCSS file in my project
$header-img: image-url('../images/image.gif', false, false);
.bg {
background-image: $header-img;
width: 100%;
height: 100vh;
}
Why is webpack not emitting any CSS file for me?
Edit:: Based on suggestion below I added the line to my index.tsx file
require('../styles/style')
Now there are no errors. but still no *.css file in the network output.
Did you make sure to import your main .scss file in your ./src/index.tsx?
e.g:
require('./main.scss');
I kept trying multiple permutation combinations, and finally this webpack.config.js worked for me. With this webpack config, I am able to see main.css in the browser network tab.
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const devMode = process.env.NODE_ENV !== 'production'
module.exports = {
entry: './src/index.tsx',
mode: 'development',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
},
{
enforce: 'pre',
test: '/\.jsx?$/',
loader: 'source-map-loader'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
includePaths: ["styles/"]
}
},
],
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
],
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.scss']
}
}

How to add CSS configuration in reactjs Project?

I've written the webpackconfig but css doesn't seem to work properly and it is throwing and error. Following are my file's contains.
My webpack.config.js:
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
]
},
plugins: [
new ExtractTextPlugin("style.css", {
allChunks: true
})
]
};
and in my Index.js I've added as :
import '../assets/css/style.css';
Package.json :
{
...
"dependencies": {...
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.3",
"css-loader": "^0.28.7",
"style-loader": "^0.19.0"
}
}
As per our chat, this is what your webpack.config.js file is as below:
var path = require("path");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
}
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;
There are two issues with this config.
The are no commas separating the loaders objects.
You are using ExtractTextPlugin but have not imported/required it anywhere in the config.
Issue #1 is quite obvious how to solve; simply add the commas after each definition of a loader object.
Issue #2 as well, you need to install and reference ExtractTextPlugin in you webpack config file.
You can do so by running the following command in your terminal:
npm install --save-dev extract-text-webpack-plugin
This will install the plugin to your node_modules and also list it in your package.json file under thedevDependencies` object.
And then in your webpack.config.js where you are requiring modules, also require the plugin like so:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
After making these changes, you config file should look something like this:
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");
var config = {
entry: SRC_DIR + "/app/index.js",
output: {
path: DIST_DIR + "/app",
filename: "bundle.js",
publicPath: "/app/"
},
module: {
loaders: [
{
test: /\.js?/,
include: SRC_DIR,
loader: "babel-loader",
query: {
presets: ["react", "es2015", "stage-2"]
}
},
{
test: /\.css$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("css-loader!sass-loader")
}
]
},
plugins: [
new ExtractTextPlugin("src/components/assets/css/style.css", {
allChunks: true
})
]
};
module.exports = config;

How to compiling styles in webpack

I have this modules in package.json
{
"name": "v1.0",
"version": "1.0.0",
"description": "",
"main": "app-main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"css-loader": "^0.28.7",
"extract-text-webpack-plugin": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"webpack": "^3.8.1"
},
"dependencies": {
"jquery": "^3.2.1"
}
}
`
My js bundle is working, but styles i cant compiling to 1 bundle for ex. main.bundle.css. This is my webpack.config.js
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main' : './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
When i start webpack, i dont have any errors, my js bundle is working, but css not. How i can fix this problem?
You are missing the call to extract function in your loader rules:
const path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
'app-main': './assets/js/app-main.js',
'vendor-main': './assets/js/vendor-main.js'
},
output: {
path: path.resolve(__dirname, './js'),
filename: '[name].bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["css/scss/main.scss"]
}
}]
})
}],
loaders: [
{
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
plugins: [
new ExtractTextPlugin({
filename: 'css/[name].bundle.css',
allChunks: true,
}),
]
};
One more thing do not forget to require your .scss file in your .js file.

Resources