I am using Webpack4 to build my react app and the webpack.config.js looks as following:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path');
module.exports = {
entry: ['#babel/polyfill', './src/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
},
{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: true
}
}]
},
{
test: /\.scss$/,
use: [{
loader: MiniCssExtractPlugin.loader
}, {
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "sass-loader",
options: {
includePaths: ["./node_modules"]
}
}]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html"
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
};
Try to compile the app, the compiler complains:
ERROR in ./src/index.scss
Module build failed: ReferenceError: window is not defined
at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:23:2)
at eval (webpack:///./node_modules/style-loader/lib/addStyles.js?:12:46)
at module.exports (webpack:///./node_modules/style-loader/lib/addStyles.js?:77:88)
at eval (webpack:///./src/index.scss?./node_modules/style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--6-3:16:134)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/index.js!./node_modules/sass-loader/lib/loader.js??ref--6-3!./src/index.scss (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:104:1)
at __webpack_require__ (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:21:30)
at /Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:70:18
at Object.<anonymous> (/Volumes/Develop/react-reason/cockpit/node_modules/style-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/css-loader/index.js!/Volumes/Develop/react-reason/cockpit/node_modules/sass-loader/lib/loader.js??ref--6-3!/Volumes/Develop/react-reason/cockpit/src/index.scss:73:10)
at Module._compile (internal/modules/cjs/loader.js:678:30)
at exec (/Volumes/Develop/react-reason/cockpit/node_modules/mini-css-extract-plugin/dist/loader.js:54:10)
# ./src/index.js 9:0-23
# multi (webpack)-dev-server/client?http://localhost:8080 #babel/polyfill ./src/index.js .
the content of index.scss file looks as following:
#import './font-awesome/scss/fontawesome.scss';
#import 'bootstrap/scss/bootstrap';
What do I am window missing?
I removed style-loader and resolve my issue
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
//'style-loader',
'css-loader',
'sass-loader'
]
}]
Related
i am creating react library. when i use that libary in my project i am facing this issue
(https://i.stack.imgur.com/HymU0.png)](https://i.stack.imgur.com/HymU0.png)
This is my webpack.config file
var path = require("path");
module.exports = {
mode: "production",
entry: "./tables.js",
output: {
// path: path.resolve("build"),
libraryTarget: "umd",
path: __dirname + '/dist',
publicPath: '/',
filename: 'index.js',
},
module: {
rules: [
{
test: /\.jsx?$/, exclude: /node_modules/
, use: {
loader: 'babel-loader',
options: {
presets: [
['#babel/preset-env', { targets: "defaults" }, '#babel/preset-react'
]
],
plugins: ['#babel/plugin-proposal-class-properties']
}
}
},
{
test: /\.(s*)css$/,
use: ['style-loader', 'css-loader', 'sass-loader']
},
]
},
externals: {
'react': 'react',
}
};
i am expecting to load this chunk in my project without facing this issue
This code is my webpack.config.js file.
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "./dist"),
publicPath: '/dist/',
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
],
devServer: {
publicPath: '/dist/'
}
};
Attached is my error message.
I've tried reinstalling some packages and modifying this config file from the starterkit but to no avail.
Thanks in advance!
Im trying to webpack react project using this webpack.config.js:
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
mode: "production",
entry: "./app/src/plugin.js",
output: {
filename: "build/static/js/bundle-project.min.js",
libraryTarget: "commonjs"
},
node: {
fs: "empty"
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.svg$/,
loader: "svg-inline-loader"
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader: "url-loader?limit=100000"
},
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: ["#babel/preset-react", "#babel/preset-env"],
plugins: [
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-transform-modules-commonjs"
]
}
}
]
},
plugins: [
new TerserPlugin({
parallel: true,
terserOptions: {
ecma: 6
}
})
],
resolve: {
alias: {
utils: path.resolve("./src/utils"),
"user-abilities": path.resolve("./src/user-abilities"),
shared: path.resolve("./src/shared"),
components: path.resolve("./src/components"),
store: path.resolve("./src/store")
}
},
externals: {
react: "commonjs react"
}
};
then im doing npm publish and import the package in a different project
using
import Main from #my-repo-package
Im getting this error when trying to render the package in a different project:
I have build a react-stepper and uploaded it to github.
When i want to build my App, webpack does not include font-awesome css. But it includes my own style.scss file. I use the style loader in webpack.
In dev mode everything works fine. Only in build mode it does not work.
Here is my repo:
https://github.com/tkwant/react-stepper-wizard
Here is my webpack.build.config file:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: "./src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(scss|css)$/,
use: [
{
loader: "style-loader" // creates style nodes from JS strings
},
{
loader: "css-loader" // translates CSS into CommonJS
},
{
loader: "sass-loader" // compiles Sass to CSS
}
]
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
}
]
},
resolve: {
extensions: ["*", ".js", ".jsx"]
},
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "react-stepper-wizard.js",
library: "Stepper",
libraryTarget: "umd"
},
externals: ["react", "react-dom", "font-awesome"],
plugins: [
new CleanWebpackPlugin(["dist"]),
new webpack.HotModuleReplacementPlugin()
],
devtool: "source-map",
devServer: {
contentBase: "./examples",
hot: true,
port: 9001
}
};
It would be fine if somebody can help me here or can do a PR to fix this problem.
You're copying a .css file, right?
You may want to try the webpack-copy-plugin
solution was to use url loader.
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
I am trying to use react-music (https://github.com/FormidableLabs/react-music), after npm start i get this error message
ERROR in Cannot find module './_Stack'
# multi main
webpack: bundle is now VALID.
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: [
'./demo/index',
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/',
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
}),
],
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
}, {
test: /\.css$/,
loader: 'style!css!postcss',
}],
},
};