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

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!!!!!

Webpack looking for index in datatables extension which has none

What I am trying to do is use datatables. I get the error:
ERROR in ./index.js
Module not found: Error: Can't resolve 'datatables.net-dt' in path/src
for all the datatables requires when I try to webpack it. I ran webpack with --display-error-details and found the problem to be that it is looking in the datatable directories for an index file of some sort. e.g.
Field 'browser' doesn't contain a valid alias configuration
path/node_modules/datatables.net-colreorder-dt/index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
path/node_modules/datatables.net-colreorder-dt/index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
path/node_modules/datatables.net-colreorder-dt/index.json doesn't exist
I don't understand why it is looking for the index. I have followed all the documentation I can find on webpack and datatables and according to the datatables download section I should only have to add the packages (which I have done) and add the require's part and it should work.
I have looked at the repos for datatables and its extensions and there is no index in any of them. I've googled this in every which way possible and can't find any answer so I'm hoping someone here might have an idea as I have tried many different things which either didn't work or produced even more errors.
This is my index.js
require('./index.html');
var AWS = require('aws-sdk');
require( 'datatables.net-dt' )();
require( 'datatables.net-buttons-dt' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-dt' )();
require( 'datatables.net-fixedheader-dt' )();
require( 'datatables.net-rowgroup-dt' )();
No code after the requires runs so I haven't included it.
This is my package.json
{
"name": "TestCode",
"version": "1.0.0",
"description": "Test",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": " ",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.116.0",
"datatables.net-buttons-dt": "^1.4.2",
"datatables.net-colreorder-dt": "^1.4.1",
"datatables.net-dt": "^1.10.16",
"datatables.net-fixedheader-dt": "^3.1.3",
"datatables.net-rowgroup-dt": "^1.0.2",
"jquery": "^3.2.1",
"raw-loader": "^0.5.1"
},
"devDependencies": {
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
}
and this is my webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-module-eval-source-map',
context: path.resolve(__dirname, 'src'),
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.resolve(__dirname, 'src')
},
module: {
loaders: [
{
test: /\.json$/,
loaders: ['json']
},
{
test: /\.html$/,
loader: ['raw-loader']
}
]
},
resolveLoader: {
moduleExtensions: ['-loader']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './index.html'
})
]
};

First off, your require statements don't need an extra () at the end. require('module'); is fine.
Secondly, you have one statement with a .js extension. It shouldn't be there because you're requiring modules, not files.
Finally, to the solution that fixes your problem: You're missing a resolve field in your webpack.config.js. When you leave the resolve field out, all of the require() statements are looking for modules inside your given context folder, which in your case is the source (src) folder (defaults to root folder when not defined).
To solve this problem, add something like the following to your webpack.config.js:
resolve: {
modules: [
path.resolve('./node_modules')
]
}
Or wherever your node modules may be.
The reason webpack is looking for the index, is because it's default. It couldn't find the module you referenced, so it's looking for an index file instead. The reason you're getting multiple errors on the same import is because it's looking for more than one extension.
The extensions default to extensions: [".js", ".json"]. This is why you see the .js and .json in your error logs. (btw this is also why you can leave extensions out of your require() statements)
If you need more help understanding webpack feel free to ask, or check out https://webpack.js.org/configuration/resolve/ for the documentation on the resolve options for more stuff you can do with resolving your modules.

Webpack with multiples entries cannot resolve 'file' or 'directory'

This is my first time setting up webpack, and so far I'm just confused. I'm trying to gather all of my jsx files in their respective files, but webpack seems to think they don't exist...
webpack --display-error-details
I get this errors that look like so:
ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./static/js/base in /Users/Maude/Projects/School/entry
resolve file
/Users/Maude/Projects/School/entry/static/js/base.js doesn't exist
/Users/Maude/Projects/School/entry/static/js/base.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base is not a file
resolve directory
/Users/Maude/Projects/School/entry/static/js/base/package.json doesn't exist (directory description file)
directory default file index
resolve file index in /Users/Maude/Projects/School/entry/static/js/base
/Users/Maude/Projects/School/entry/static/js/base/index doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.jsx doesn't exist
/Users/Maude/Projects/School/entry/static/js/base/index.js doesn't exist
My static file structure looks like this:
static
|- js
|- base
|- base.jsx
|- classes
|- classes.jsx
|- locations.jsx
|- students
|- students.jsx
|- network.jsx
|- teachers
|- teachers.jsx
|- less
And lastly my webpack.config.js file:
module.exports = {
entry: {
base: './static/js/base',
classes: './static/js/classes',
students: './static/js/students',
teachers: './static/js/teachers',
},
output: {
path: './static/bundles',
filename: '[name].js'
},
devServer: {
inline: true,
port: 3333
},
module: {
loaders: [
{
test: /\.js$/,
exclude: '/node_modules/',
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
resolve: {
modulesDirectories: ['/node_modules/'],
extensions: ['', '.js', '.jsx'],
},
}
Why am I receiving errors like ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' when they're clearly there? Help obi-wan!
Also my package.json:
{
"name": "--",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"bower": "^1.7.9",
"gulp": "^3.9.1",
"gulp-bower": "0.0.13",
"gulp-changed": "^1.3.1",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-html-replace": "^1.6.1",
"gulp-less": "^3.1.0",
"gulp-load-plugins": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-react": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-replace": "^0.5.4",
"gulp-shell": "^0.5.2",
"gulp-uglify": "^1.5.4",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}
}

i think you only need the one entry file, base.jsx, unless you have an extra index file in your structure.
webpack will crawl through the imports and build up the tree structure from that
entry: './static/js/base.jsx'
edit: for a single entry point you want the file that has something like:
React.render(<App />, document.getElementById('app')
from your packaged.json, it looks like it might be index.js, if so then you put in webpack.config.js
entry: './index.js'
then webpack should pull in the entire react app by following the import statements to build the complete bundle file.
btw. there is no real need to use .jsx file extensions. Just use .js. It means you also don't need to worry about the extensions field in webpack
btw2. why are you mixing gulp and webpack? Never seen that before. Maybe better to go either the gulp/browserify route, or just stick to webpack.