We Keep Coding

"TypeError: Invalid value used in weak set" while build using webpack

I'm trying to add scss to the project. I want to build css files from scss ones, but I get an error that says "TypeError: Invalid value used in weak set" since I added MiniCssExtractPlugin.
Here's my webpack.config.js:
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const config = {
// TODO: Add common Configuration
module: {},
};
const js = Object.assign({}, config, {
name: 'js',
entry: path.resolve(__dirname, 'index.js'),
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'main.js',
},
});
const scss = Object.assign({}, config, {
name: 'scss',
entry: path.resolve(__dirname, './scss/styles.scss'),
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /\.(s*)css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
implementation: require('sass'),
},
},
],
},
],
},
output: {
path: path.resolve(__dirname, '../some/path/here'),
filename: 'styles.css',
},
});
module.exports = [js, scss];
I googled a lot but didn't find any answers.
I use Node.js v 8.4.0.
Console output (There is more, but I think this is enough):
TypeError: Invalid value used in weak set
at WeakSet.add (native)
at MiniCssExtractPlugin.apply (/path/path/path/path/path/path/path/node_modules/mini-css-extract-plugin/dist/index.js:362:18)
PS: I'm new to webpack, so I'll be glad if you help me to make this code better. The main idea is to keep js compilation the same and add scss compilation. I also want to compile included scss files as separated ones.
PSS: If you need more information, I'll provide some, coz idk what else can be useful.

Maybe the latest mini-css-extract-plugin version has bugs. And I tried to use another version of this package. And its Worked!!!
Remove your last package version:
npm uninstall mini-css-extract-plugin
Download this version 0.9.0 (its worked for me):
npm i --save-dev mini-css-extract-plugin#0.9.0
*optionally (--save-dev)
checkout all versions:
mini-css-extract-plugin/all-versions

This is most likely due to either a bug or an incompatible version of webpack, e.g. upgrading to the current major v2.0.0 releases on webpack 4.
For more information, please check the changelog for breaking changes and fixes.

I think you'll need to downgrade some other plugins as well. I was following a tutorial when I had the same error. This is what worked for me:
{
"name": "recipe-blocks",
"scripts": {
"dev": "cross-env BABEL_ENV=default webpack --watch",
"build": "cross-env BABEL_ENV=default NODE_ENV=production webpack -p"
},
"main": "index.js",
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-react-jsx": "^7.2.0",
"#wordpress/babel-preset-default": "^3.0.1",
"babel-loader": "^8.0.4",
"classnames": "^2.2.6",
"cross-env": "^5.1.5",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"raw-loader": "^2.0.0",
"sass-loader": "^7.1.0",
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2"
},
"version": "1.0.0",
"license": "MIT"
}
Then Run:
npm install
npm run dev

Webpack bundle build error - Module parse failed: Unexpected Token

I am attempting to build a webpack bundle.
When running:
webpack --config webpack.config.js
I get this error:
ERROR in ./templates/components/lobby/index.js 13:20
Module parse failed: Unexpected token (13:20)
This seems to be a common error people have when using webpack. I have consulted many stackoverflow pages describing the issue, and github discussions such as this one: https://github.com/babel/babel-loader/issues/173
Most people seem to solve the issue by changing their webpack version. I have tried webpack versions in increments, from 4.28.0 up to 4.42.0, never yielding any success. I have also tried doing a clean install, and using yarn instead of npm to install packages. This had not worked either.
This leads me to believe my issue is not with versioning of my build tools, but with my webpack.config.js or my package.json themselves.
This is my webpack.config.js:
// load the needed node modules
var path = require("path");
var webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
// webpack project settings
module.exports = {
context: __dirname,
entry: {
lobby: './templates/components/lobby/index',
},
output: {
path: path.resolve('./static/bundles/'),
filename: "[name]-[hash].js"
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
new BundleTracker({path: __dirname, filename: './webpack-stats.json'})
],
module: {
rules: [
{
test: /\.jsx$/,
exclude: /(node_modules)/,
loader: 'babel-loader', // 'babel-loader' is also a legal name to reference
query: {
presets: ['es2015', 'react']
},
//options: {
// presets: ['#babel/preset-env','#babel/preset-react']
//}
},
]
},
resolve: {
modules: ['node_modules'],
extensions: ['*', '.js', '.jsx']
},
mode: 'development'
}
And this is my package.json:
{
"name": "name",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"acorn-dynamic-import": "^4.0.0",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"jquery": "^3.4.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-websocket": "^2.1.0",
"webpack": "^4.42.0",
"webpack-bundle-tracker": "^0.4.3"
}
}
And this is the full error given when I run webpack --config webpack.config.js:
ERROR in ./templates/components/lobby/index.js 13:20
Module parse failed: Unexpected token (13:20)
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
| // renders out the base component
| function render_component(){
ReactDOM.render(, document.getElementById('lobby_component'))
| }
|
I'm new to web development, and really have no idea what the issue could be. I've spent the past day browsing around online looking for potential solutions, to no avail. Any tips or recommendations would be very much appreciated.
Thank you!

Building a webpack project with a local sub module

I've developing a react component and for demo purpose I've created a react app so that I could test out the module I'm developing. So I've got a separate module which is a react module and I've used npm link to link the module to my project. following is the package json of the module.
package json
{
"name": "sample-module",
"version": "1.0.0",
"description": "",
"main": "build/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack --watch"
},
"author": "Imesh Chandrasiri",
"license": "Apache-2.0",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0"
},
"dependencies": {
"file-loader": "^2.0.0",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"semantic-ui-css": "^2.3.3",
"semantic-ui-react": "^0.82.2",
"url-loader": "^1.1.1"
},
"peerDependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2"
}
}
webpack config
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
devtool: 'inline-source-map',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [{
test: /\.(js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react'],
}
}
},{
test: /\.(css|less)$/,
use: ["style-loader", "css-loader"]
},{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},{
test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
use: ['url-loader'],
}]
},
plugins: [
new ExtractTextPlugin({filename: 'style.css'})
],
externals: {
'react': 'commonjs react'
}
};
Using this config I've npm linked the module to my project which have the following package json and webpack config.
package json
{
"name": "sample-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
"author": "Imesh Chandrasiri",
"license": "Apache-2.0",
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"react-hot-loader": "^4.3.4",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"css-loader": "^1.0.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"style-loader": "^0.22.1"
}
}
webpack config
const webpack = require('webpack');
var path = require('path');
module.exports = {
entry: './src/index.js',
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},{
test: /\.(css|less)$/,
use: ["style-loader", "css-loader"]
}
]
},
output: {
path: path.resolve(__dirname, 'build'),
filename: 'index.js',
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot: true
}
};
Problem
So this setup works fine and when I change a file in the module, it re compiles the in the project and reflects the change. The question is, the project gives me warnings in the console and the recompile time is so high.
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index.js (16.3 MiB)
0.5721d2929929bd15755f.hot-update.js (15 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (31.3 MiB)
index.js
0.5721d2929929bd15755f.hot-update.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
What is the reason for such a warning? Is there anything I could do to improve the build time and avoid the warnings which is shown in the console.?

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
To get rid of this warning you need to set the mode option explicitly.
module.exports = {
mode: 'development', // <- Add this line
entry: './src/index.js',
// The rest of your code
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
index.js (16.3 MiB)
0.5721d2929929bd15755f.hot-update.js (15 MiB)
WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (31.3 MiB)
index.js
0.5721d2929929bd15755f.hot-update.js
WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
This is because the final output files are tremendously big ... 16.3 MiB, 15 MiB and 31.3 MiB. OMG!!!
Imagine every visitor to your website has to download 31.3 MiB in order to view your website. May be the Internet infrastructure of your country is too good compared to the rest of the world. In my country it would take minutes to to download your website. Maybe the browser caching mechanism would save you a bit but not too much.
I cannot give you a guarantee-to-work solution because it highly depends on your project setup and it will be too big to fit in an answer here. But I can give you a suggestion of using code-spliting and this link to webpack documentation on it: https://webpack.js.org/guides/code-splitting/ . It was mentioned in the warning as well so you can trust it.
Basically, the idea is that you split your code into multiple js files. And if it only requires a js file whose size is 200 Kib to render the home page we will only load it. The rest can wait and be loaded on demand.
I suggest you try setting up webpack code-spliting following the documentation and comeback here with another questions on it if any.

Newbie GET error on Webpack, used for http server and bundling

Okay so I'm a designer learning to code. This is probably a pretty simple issue but I'm stuck and I've been banging my head against the wall for hours trying to figure this out.
I'm following this tutorial here:
https://www.smashingmagazine.com/2017/02/a-detailed-introduction-to-webpack/
It has a repo that goes along with it here: https://github.com/joezimjs/Webpack-Introduction-Tutorial
I had a bunch of problems at the beginning because "./dist" was not considered a valid path, because relative paths were banned by webpack or something. Changed it to "/dist" and that fixed stuff, but then I ran into problems with the babel loader trying to process the node modules, so I put exclude node modules. That was something in the code on the repo but not in the tutorial so it took me some digging.
I've gotten to example five in the tutorial and I'm trying to run the server so that it creates the html page, but it's not working. I've tried copying and pasting all the original code, but it won't work. The server runs, but when I visit the localhost:8080 it gets a 404 error from the GET / ( which I guess basically means whatever path it's supposed to be getting via http methods isn't working?)
Here's a link to my repo:
https://github.com/thedonquixotic/webpack-practice
Here's my config.json file:
{
"name": "webpack-practice",
"version": "1.0.0",
"description": "project to practice webpack",
"main": "index.js",
"scripts": {
"prebuild": "del-cli dist -f",
"build": "webpack",
"server": "http-server ./dist",
"start": "npm run build -s && npm run server -s"
},
"author": "David Aslan French",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"del-cli": "^1.1.0",
"handlebars": "^4.0.11",
"handlebars-loader": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"http-server": "^0.11.1",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.8"
},
"dependencies": {
"lodash": "^4.17.10"
}
}
Here's my webpack.config.js file:
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [
'babel-polyfill',
'./src/main.js'
],
output: {
path: '/dist',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/,
options: { plugins: ['transform-runtime'], presets: ['es2015'] }
},
{ test: /\.hbs$/, loader: 'handlebars-loader', exclude: /node_modules/ }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Intro to Webpack',
template: 'src/index.html'
})
]
};
Sooooo... yeah... I'm burnt out and I can't figure out what I'm doing wrong.

YES!!!! I figured it out!
So here's the deal. It's a bunch of little things adding up.
The core of the problem is that the repo uses webpack 2 but when I npm install webpack it is webpack 4. Webpack 4 requires webpack-cli and webpack-cli doesn't allow for relative paths. So if I change the webpack.config.js file to an absolute path it doesn't create a new folder. And with no folder, there's no way to load the bundled files so it fails the GET the necessary code.
In order to have the correct path I need to use the dirname AND also include the const path =require ('path') solution. Which I just realized #ippi already suggested, and while I had tried the dirname change, I didn't define the const. I'm still really new to Javascript so stuff like that doesn't really occur to me.
Lastly it threw an error for index.html which was just a matter of me needing to add /node_modules/ to the exclude settings for babel. AWESOME! It works!!!!!

Error: File to import not found or unreadable: ~bootstrap/scss/bootstrap

I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
Why am I getting this error??
My webpack.config.js file looks like this...
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
#import "custom";
#import "~bootstrap/scss/bootstrap";

When Sass is precompiled by its own CLI, it processes #imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~
notation with node_modules/ instead.

I had a similar error
File to import not found or unreadable:
node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.

For me, I had to change the way I was importing
#import '../../../node_modules/bootstrap/scss/bootstrap';
Then it works

In Rails 7.0.1, after installing using rails new myapp --css=bootstrap, the same error occured. The problem was solved by:
Replacing the line with stylesheet_link_tag in application.erb by: stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload"
renaming app/assets/stylesheets/application.scss by app/assets/stylesheets/application.bootstrap.scss
Replacing the content by #import '../../../node_modules/bootstrap/scss/bootstrap';

I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:
#import 'bootstrap';
It would work if I just import it like this in my case:
#import "../../../../../bootstrap/scss/bootstrap";
But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:
.pipe(plugins.sass())
to:
.pipe(plugins.sass({
outputStyle: 'nested',
precision: 3,
errLogToConsole: true,
includePaths: ['node_modules/bootstrap/scss']
}))
(notice the includePaths section) and now I can just use
#import 'bootstrap';
In my scss file

I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.
#import "../../../../../node_modules/bootstrap/scss/bootstrap";

I had a similar problem and the fix for me was very basic in the end.
I just had to change "../node_modules/bootstrap/scss/bootstrap"; to "node_modules/bootstrap/scss/bootstrap";.

This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.

If you are having any issue and the answers fail to resolve try this:
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.

I solved the problem by:
remove node_modules
npm install
ng serve
works ;)

I just run npm i bootstrap and it worked.

This is similar to my problem, npx mix fail to import bootsrtap with error;
SassError: Can't find stylesheet to import.
Turns out my application root folder name using "#" that caused npx consider as unusual path and fail to import
npx mix error
Solution:
Rename the folder (remove "#")
Good to go
Hope this helps