The program runs correctly. But when I import an css file into the component, I encounter the following error.
webpack:///./node_modules/style-loader/lib/addStyles.js?:23
return window && document && document.all && !window.atob;
^
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?:57:46)
at eval (webpack:///./public/testStyle.css?:12:134)
at Object../public/testStyle.css (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:193:1)
at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
at eval (webpack:///./src/client/pages/HomeContainer.js?:31:1)
at Object../src/client/pages/HomeContainer.js (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:541:1)
at __webpack_require__ (/media/ehsan/A26877236876F57F/01-MyDriver/myProjects/02-develop/13-news-ssr/build/bundle.js:23:30)
at eval (webpack:///./src/client/Routes.js?:17:22)
[nodemon] app crashed - waiting for file changes before starting...
I encountered another problem and raised the question in the css-loader repository and I encountered this problem after running it.
The project has three webpack files, one of which is the webpack.base.js file, the contents of which are given below :
'use strict';
// const isInProduction = process.env.NODE_ENV === 'production';
module.exports = {
context: __dirname,
module: {
rules: [
{
test: /\.(pdf|ico|jpg|eot|otf|woff2|woff|ttf|mp4|webm)$/,
exclude: /node_modules/,
use: {
loader: 'file-loader',
query: {name: '[name].[ext]'},
},
},
{
test: /\.js$/,
exclude: /node-modules/,
loader: 'babel-loader'
},{
test: /\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {modules: true, sourceMap: true}
}
]
}
]
}
};
and also the content of the .babelrc file :
{
"presets": [
["es2015", {"modules": false}],
["env", {
"targets": {
"browsers": ["last 2 versions"],
"node":"current"
}
}
],["react"],"stage-0"
]
}
packages version :
"webpack": "^3.11.0", "style-loader": "^0.18.2", "css-loader": "^0.28.9"
I emphasize that before asking this question, I have studied all the issues related to this problem, but I have not achieved the desired result.
NOTE : The project uses the react server side and I use 2 important files for render. one for the client side and one for the server side. and also redux is used.
To view the details of the project files, I can refer here .
Do you know the solution to this problem ?
Again, I emphasize that I have had a lot of research before solving this question that has not reached the desired result.
Thank you for your guidance.
This is what style-loader do:
- Adds CSS to the DOM by injecting a tag
& this is what ExtractTextWebpackPlugin do:
- extract text from a bundle, or bundles, into a separate file.
You'll probably never need to do both at one place but it's great to have inlining as a fallback to when ExtractTextWebpackPlugin fails.
window isn't defined, because there isn't any during CSS extraction.
then you can try this:
{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader' ] }) },
Related
I'm trying to build with webpack
npm run build
But I get the following error
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.min.css 1:0
Module parse failed: Unexpected character '#' (1:0)
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
#charset "UTF-8";/*!
| * Bootstrap v5.0.2 (https://getbootstrap.com/)
| * Copyright 2011-2021 The Bootstrap Authors
My webpack config looks like this
const path = require("path");
module.exports = {
mode: "production",
entry: "./paginate.js",
output: {
path: path.resolve("./"),
filename: "index.js",
libraryTarget: "commonjs2",
},
module: {
rules: [
{
test: /\.js|jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react']
}
}
}
],
},
externals: {
react: "react",
},
};
.babelrc file looks like
{
"presets": ["#babel/preset-env", ["#babel/preset-react", {
"runtime": "automatic"
}]]
}
I've searched but can't seem to find the right loader for this.
I'm not sure, just a guess, most likely bootstrap is trying to import CSS or scss and you don't have a loader for it defined.
Try adding:
{
test: /\.s?[ac]ss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
exclude: [/node_modules/],
},
To your webpack rules and also install those modules with --save-dev.
Side node, this regular exression test: /\.js|jsx?$/, is incorrect, just use test: /\.jsx?$/,. The "?" means the x is optional.
I am attempting to use foundation in the react-static site I am creating. Everything is working great while using npm start to start a local node server with live reloading, however I am not able to successfully build my site with npm run build.
The error that I keep encountering is:
/Users/abroccoli/Documents/apm.net/apm-react-static/node_modules/foundation-sites/dist/js/npm.js:1
(function (exports, require, module, __filename, __dirname) { import $ from 'jquery';
^^^^^^
SyntaxError: Unexpected token import
Through my research into webpack and react-static and node.js, I believe that node is having an issue with the ES6 syntax of the foundation-sites file. However, react-static is written in ES6 and uses import at the beginning of every file.
I am using the basic webpack configuration that comes with react-static and should include the proper loaders for parsing ES6 with Babel, according to the README.
webpack: (config, { defaultLoaders, stage }) => {
config.module.rules = [
{
oneOf: [
{
test: /\.s(a|c)ss$/,
use:
stage === 'dev'
? [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'sass-loader' }]
: ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader',
options: {
importLoaders: 1,
minimize: true,
sourceMap: false,
},
},
{
loader: 'sass-loader',
options: { includePaths: ['src/'] },
},
],
}),
},
defaultLoaders.cssLoader,
defaultLoaders.jsLoader,
defaultLoaders.fileLoader,
],
},
]
return config
},
I suspect that I am not loading foundation-sites in properly. How can I get foundation-sites to work when I go to build my react-static site?
Update node to be able to use the new ES6 standard.
I am trying to setup my react project so I can use SASS in the SCSS format.
This is in my webpack.config.dev.js:
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('sass-loader'),
}
]
}
I import the scss files into my jsx in two different ways:
import './index.scss';
import css from './ModalWrapper.scss';
When I run the app I am currently getting the error:
./src/index.scss
Module build failed:
body {
^
Invalid CSS after "m": expected 1 selector or at-rule, was "module.exports = __"
in /pathtoapp/web/src/index.scss (line 1, column 1)
It appears me, that one, react is trying to interpret the SCSS as CSS which should work. In addition, react believes that body is not valid CSS. There, I would believe that neither CSS or SCSS are being loaded correctly.
Any help would be appreciated. There are quite a few unanswered questions to this problem.
If you are on Webpack 3, add this to module.rules
{
test: /\.scss$/,
loader: [
require.resolve('style-loader'),
require.resolve('css-loader'),
require.resolve('sass-loader'),
]
},
And then add the file loader and make sure to add .scss to the array of the key exclude like this
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/, /\.scss$/,],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
And of course, make sure you have style-loader, sass-loader, css-loader and file-loader in you package.json. This code snippet worked for me when using the latest version of create-react-app.
This is what ended up working for me:
{
test: /\.scss$/,
use: [{
loader: 'style-loader'
}, {
loader: 'css-loader',
options: {
modules: true,
sourceMap: true,
localIdentName: "[local]___[hash:base64:5]",
},
}, {
loader: 'sass-loader',
options: {
outputStyle: "expanded",
sourceMap: true,
},
}]
},
I'm sure the other answers are just as good, but for maximum brevity, this works for me (I erased some of the internal webpack.config.dev.js comments presumably made by the create react folks):
module: {
strictExportPresence: true,
rules: [
{
test: /\.scss/,
use: ['style-loader','css-loader', 'sass-loader']
},...
I don't know if it matters, but I put this on the top. Also, yes, make sure to add the scss file to the excluded array as mentioned above.
For some reason my yarn run dev command is failing due to the following:
SyntaxError: /src/components/home/index.scss:Unexpected token (1:0)
> 1 | .home {
...
I'm using webpack 2.2.0 which is setup like so:
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
include: path.resolve(__dirname, 'src'),
}, {
test: /\.(scss)/,
include: path.resolve(__dirname, 'src'),
use: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]',
'sass-loader',
{
loader: 'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
]
}
}
}
],
include: path.resolve(__dirname, 'src')
}
]
}
And all I'm doing in my index.js component is import s from './styles.scss'. If I remove the import statement and allow the app to boot and then put the import statement back in while the app is running and refresh the page then the styles are present... I find this extremely odd and haven't encountered this issue before...
That thread explains the reason why you are getting this error:
I think I found out why it didn't work on the first place. Though Webpack allows requiring static assets on the client side, babel, which compiles the server code, fails to do so as on the server side Node's require understands only JS files. This means that server side rendering is not possible with the default Webpack and babel.
There are several solutions to solve that issue, more or less complex to put in place.
The easiest one, is to ignore .scss on the server as so:
I added a run-server.js file to the project
require('babel-core/register')({
presets: ['es2015-node5', 'stage-0'],
plugins: ['transform-decorators-legacy'] //was needed to support decorators
})
require.extensions['.scss'] = () => {
return;
}
require.extensions['.css'] = () => {
return;
}
require('./server')
Run that with instead:
"cross-env NODE_ENV=development node ./run-server.js"
Added to your project:
npm install babel-preset-es2015-node5 babel-plugin-transform-decorators-legacy -D
Hello I am stuck with my application, my application working fine in all other browser not in IE it's throw the error
0x800a0416 - JavaScript runtime error: Multiple definitions of a property not allowed in strict mode
I have implemented loader in webpack.config
module: {
loaders: [{
test: /\.js?$/,
exclude: /(node_modules|bower_components)/,
loaders: ['babel'],
include: path.join(__dirname, 'scripts')
}]
}
and my Package.json Script contain "build": "./node_modules/.bin/webpack --config webpack.config.production.js --progress --profile --colors", for build the bundle
If I will explicitly find use strict and remove it from bundle then it works fine so how can I remove that strict mode while create a bundle using webpack
If you're seeing that error then most likely you've got somewhere in your codebase where you're declaring multiple properties on the same object. Disabling the alarm bell just fixes the symptom.
I've found this error to pop up if I declare duplicate properties in my JSX, e.g. when doing <MyComponent className="foo" onClick={onClick} className="foobar" /> or accidentally duplicating some other property.
Find and fix the actual error instead of just suppressing the error message. IE should tell you what line it's happening on and it shouldn't be too hard to look at what's there and figure out which component has the problem.
Check out this package: https://www.npmjs.com/package/babel-plugin-transform-remove-strict-mode
I was looking for a convenient way to get rid of the 'use strict' and it seems to be doing just that.
I have include the blacklist option in my .babelrc file like
blacklist: ["useStrict"]
and it's working fine.
You have few ways around this, bottom line setting modules to false either in .babelrc or your webpack since you use webpack
webpack.mix.js
module : {
loaders : [
{
test: /\.js?/,
include: APP_DIR,
use: {
loader: 'babel-loader',
options: {
"presets": [
['es2015', {modules: false}]
],
}
},
exclude: /node_modules/
},
]
},
or .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"debug": true,
"modules": false,
"forceAllTransforms": true,
"useBuiltIns": "usage"
}
]
]
}