webpack, sass, react-css-modules - ReferenceError window is not defined - sass

I'm using webpack and React with react-css-modules and scss files. When i try and build it gives me an error on every file that imports scss files -
ERROR in ./app/components/Buttons/Button.scss
Module build failed: ReferenceError: window is not defined
I have googled for a solid day and a half and have got no where! Please help!
Here's my webpack set up:
var webpack = require('webpack');
var PROD = (process.env.NODE_ENV === 'production');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.jsx'
],
output: {
path: __dirname + '/dist',
filename: PROD ? 'bundle.min.js' : 'bundle.js'
},
watchOptions: {
poll: true
},
module: {
preLoaders: [
{
test: /\.jsx$|\.js$/,
loader: 'eslint-loader',
include: __dirname + '/assets',
exclude: /bundle\.js$/
}
],
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', ['style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded'])
}
]
},
postcss: [autoprefixer({ browsers: ['last 2 versions'] })],
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: PROD ? [
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
})
] : [
HTMLWebpackPluginConfig,
new ExtractTextPlugin("styles.css", {
allChunks: true
})
]
};
Thanks in advance!

This question keeps popping up when I tried to resolve the same error for Webpack 2, scss, extracttextplugin, and react. The following worked for me.
{
test:/\.scss$/,
use:ExtractTextPlugin.extract({fallback:"style-loader",use:["css-loader","sass-loader"]}),
include:path.join(__dirname,"client/src"),
},
Hope this helps.

I think you have to change it to this, the second parameter goes as a string instead of array. Also removed the repeated use of the style loader.
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded')

Related

Webpack 3 loading module two times

I am using Webpack 3 as a module loader for my application. But when I analyze my vendor.js bundle, I see that d3 is loaded twice in there - once a separate module, and once as a dependency. How can I make it load only once?
I tried these, but did not work:
Adding it as alias
Adding it in the CommonsChunkPlugin
Here is my webpack config file:
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
autoprefixer = require('autoprefixer'),
WebpackNotifierPlugin = require('webpack-notifier'),
ngAnnotatePlugin = require('ng-annotate-webpack-plugin'),
path = require('path'),
bourbon = require('bourbon').includePaths,
BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
var ENV = process.env.npm_lifecycle_event;
var isProd = false;
module.exports = {
cache: true,
entry: {
// vendor: [
// 'angular',
// 'jquery',
// 'velocity-animate',
// 'highcharts',
// 'd3',
// 'rickshaw',
// 'angular-block-ui',
// 'angular-sanitize',
// 'angular-animate',
// 'angular-cookies',
// './Private/Scripts/app/session/session.module',
// 'jquery.viewport',
// 'oclazyload',
// 'angular-ui-router',
// 'moment',
// 'bootstrap/js/tooltip'
// ],
wealth: './Private/Scripts/app/wealth/bootstrap.ts',
goal: './Private/Scripts/app/goal/bootstrap.ts',
login: './Private/Scripts/app/login/login.bootstrap.ts',
register: './Private/Scripts/app/register/register.bootstrap.ts',
dashboard: './Private/Scripts/app/dashboard/bootstrap.ts',
personal: './Private/Scripts/app/personal/bootstrap.ts',
resetPassword: './Private/Scripts/app/reset-password/reset-password.bootstrap.ts',
forgottenPassword: './Private/Scripts/app/forgotten-password/forgotten-password.bootstrap.ts',
products: './Private/Scripts/app/products/products.bootstrap.ts',
onboarding: './Private/Scripts/app/onboarding/onboarding.bootstrap.ts',
portfolio: './Private/Scripts/app/portfolio/bootstrap.ts',
investments: './Private/Scripts/app/investments/bootstrap.ts',
savings: './Private/Scripts/app/savings/bootstrap.ts',
customerIdentification: './Private/Scripts/app/customer-identification/customer-identification.bootstrap.ts',
wealthCoach: './Private/Scripts/app/wealth-coach/wealth-coach.bootstrap.ts',
shared: './Private/Scripts/app/shared/shared.bootstrap.ts',
riskTest: './Private/Scripts/app/risk-test/module.ts',
riskProfile: './Private/Scripts/app/risk-profile/bootstrap.ts',
upgradeProduct: './Private/Scripts/app/upgrade/upgrade.bootstrap.ts',
pendingActivation: './Private/Scripts/app/pending-activation/pending-activation.bootstrap.ts',
meeting: './Private/Scripts/app/meeting/meeting.bootstrap.ts'
},
output: {
path: __dirname + '/Private/build',
filename: 'scripts/[name].js',
publicPath: '/Private/build/'
},
devtool: 'eval',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.js'],
alias: {
config: path.join(__dirname, "/Private/Scripts/app/config/", process.env.npm_lifecycle_event),
d3: path.resolve('./node_modules/d3'),
}
},
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
use: 'ts-loader'
},
{
test: /\.scss$/,
use: [
'file-loader?name=styles/[name].css',
'extract-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
},
// {
// loader: 'fast-sass-loader',
// }
{
loader: 'sass-loader',
options: {
sourceComments: false,
outputStyle: "compressed",
includePaths: [require('bourbon').includePaths]
}
}
]
},
{
test: /\.woff(2)?(\?[a-z0-9]+)?$/,
use: ['url-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.(ttf|eot|svg|otf)(\?[a-z0-9]+)?$/,
use: ['file-loader?name=styles/fonts/[name].[ext]']
},
{
test: /\.json$/,
use: 'json-loader'
}
]
},
node: {
fs: 'empty'
},
plugins: [
new ngAnnotatePlugin({
add: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'humanizeDuration': 'humanize-duration',
'moment': 'moment',
CONFIG: 'config'
}),
new WebpackNotifierPlugin({
excludeWarnings: true,
alwaysNotify: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: 'vendor.js',
minChunks(module, count) {
var context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(isProd)
}),
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/),
new webpack.optimize.ModuleConcatenationPlugin(),
new BundleAnalyzerPlugin()
]
};

extract text plugin not extracting css from .scss

I have the following webpack.cofig.js file
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
app: './src/main.ts',
polyfills: './src/polyfills.ts'
},
output: {
path: path.resolve('dist'),
filename: '[name].js',
publicPath: 'assets/'
},
resolve: {
// only discover files that have those extensions
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'awesome-typescript-loader'
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
},
{
test: /\.html$/,
loader: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
}
]
},
plugins: [
new ExtractTextPlugin({ filename: 'mystyle.css', disable: false, allChunks: true })
]
};
However when I run this, the css file that should be generated does not appear. I am using extract-text-webpack-plugin however this does not work. It does not throw an error, however it does not work either.
Ok I got this to work, the reason was that in my root app component (angular2) I had the following for referring to the main stylesheet.
styleUrls: ['./app.component.scss'],
This worked fine even without the scss loader (I am using the awesome typescript loader). However when I included the following
const styles = require('./app.component.scss');
Then the additional css got generated.

Prestashop 1.7 webpack very slow

Here is my stats file for analyse.
I use latest version of prestashop (1.7), i want to use build in webpack script placed on _dev, the problem is a very slow compilating and watch tasks.
I run webpack by:
npm run watch
Result:
Version: webpack 1.14.0
Time: 12092ms
How i can improve performance?
I found same problem my webpack.config file is
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var plugins = [];
var production = false;
if (production) {
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
);
}
plugins.push(
new ExtractTextPlugin(
path.join(
'..', 'css', 'theme.css'
)
)
);
module.exports = {
entry: [
'./js/theme.js'
],
output: {
path: '../assets/js',
filename: 'theme.js'
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loaders: ['babel-loader']
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract(
"style",
"css?sourceMap!postcss!sass?sourceMap"
)
}, {
test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
loader: 'file-loader?name=../css/[hash].[ext]'
}, {
test: /\.css$/,
loader: "style-loader!css-loader!postcss-loader"
}]
},
postcss: function() {
return [require('postcss-flexibility')];
},
externals: {
prestashop: 'prestashop'
},
devtool: 'source-map',
plugins: plugins,
resolve: {
extensions: ['', '.js', '.scss']
}
};

Webpack ExtractTextPlugin blues

I cannot seem to get the ExtractTextPlugin working appropriately. I've never seen a CSS file. Before I tried to switch to this plugin the scss files were being bundled without issue.
var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: "./index.js",
output: {
path: "dist/",
filename: "bundle.min.js",
publicPath: "/",
sourceMapFilename: 'bundle.min.map'
},
devtool: '#source-map',
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ['babel'],
query: {
presets: ['es2015', 'stage-0', 'react']
}
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style", "css", "sass")
},
{
test: /\.(png|jpg|jpeg|gif|woff|woff2|svg)$/,
loader: 'url-loader?limit=8192'
}
]
},
plugins: [
new ExtractTextPlugin("bundle.css")
],
sassLoader: {
includePaths: [path.resolve(__dirname, './stylesheets')]
}
};
SCSS file make the bundle.min.js file no problem with this...
{
test: /\.scss$/,
loader: ['style', 'css?sourceMap', 'sass?sourceMap']
}
But I need the CSS text to include in a server rendered response.
Instead of ExtractTextPlugin.extract("style", "css", "sass") you'll want to use ExtractTextPlugin.extract("style", "css!sass"). The API is a little weird that way.

Webpack ExtractTextPlugin throws error when loading Sass

Trying to add sass-loader to my webpack config and running into an error:
70% 1/1 build modules/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81
r.forEach(function(r) {
^
TypeError: undefined is not a function
at /Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:81:5
at Array.reduce (native)
at LoadersList.match (/Users/a557789/Documents/f/Portal/node_modules/webpack/node_modules/webpack-core/lib/LoadersList.js:80:27)
webpack.config:
var webpack = require("webpack");
var baseDir = "dist";
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
module.exports = {
context: __dirname + "/app",
entry: {
app: "./main"
},
resolve: {
extensions: ['', '.js', '.ts', '.css', '.scss']
},
output: {
path: __dirname + "/dist",
sourceMapFilename: "[name].map",
filename: "[name].js"
},
module: {
loaders: [
//https://www.npmjs.com/package/webpack-typescript
{
test: /\.ts$/,
loader: "ts-loader"
},
{
test: /\.scss$/,
loaders: ExtractTextPlugin.extract("style", "css!sass")
//loaders: ExtractTextPlugin.extract("style!css!sass")
}
],
noParse: [ /angular2\/bundles\/.+/ ]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(true),
new ExtractTextPlugin("style.css"),
new HtmlWebpackPlugin({
template: "../index.html",
inject: "body"
})
],
devtool: "source-map"
};
I've tried a bunch of different options for the params to the extract() call but with no luck. Any help would be greatly appreciated.
Instead of using
loaders: ExtractTextPlugin.extract("style", "css!sass")
you should use
loader: ExtractTextPlugin.extract("style", "css!sass")
instead.
The error isn't particularly descriptive in this case.
In my case solution was instead ExtractTextPlugin use MiniCssExtractPlugin. More details in this video https://www.youtube.com/watch?v=JlBDfj75T3Y&list=PLblA84xge2_zwxh3XJqy6UVxS60YdusY8&index=10
So, my config looks like
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "[name].[contenthash].bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
//babel
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env"],
},
},
},
//css
{
test: /\.less$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",
title: "My app",
}),
new MiniCssExtractPlugin(),
new CleanWebpackPlugin(),
],
};

Resources