We Keep Coding

Changes in node_modules does not reflect to React (possibly bundle.js not getting updated)

I'm using a library in my react application that I want to make a few changes to. I know how to use patch-package so the persistence of the changes will not be a problem, but I can't fiddle with the code for developing purposes because my changes are not reflected when I run react.
Here's an example of the folder structure in the library;
x-library
-dist
--components
---index.js
--bundle.js
When I make changes in index.js, it does not reflect to react. It does so when I make the same change in bundle.js, so I'm guessing index.js gets ignored somehow? I don't know how webpack/bundle.js works very well but from what I understand, bundle.js is a compressed version of the code that the browser uses. Is it that my changes in code does not get compressed again for a new version of bundle.js and uses the old one?
Here's the library's webpack.config.js;
var path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.tsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
library: 'Wheel',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.tsx?$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|dist)/,
use: 'ts-loader',
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
externals: {
react: {
commonjs: 'react',
commonjs2: 'react',
amd: 'React',
root: 'React',
},
'react-dom': {
commonjs: 'react-dom',
commonjs2: 'react-dom',
amd: 'ReactDOM',
root: 'ReactDOM',
},
},
}
And here's the library's package.json;
{
"name": "react-custom-roulette",
"version": "1.1.8",
"description": "Customizable React roulette wheel with spinning animation",
"main": "./dist/bundle.js",
"repository": {
"type": "git",
"url": "https://github.com/effectussoftware/react-custom-roulette"
},
"keywords": [
"react",
"custom",
"roulette",
"spinning",
"wheel",
"fortune",
"prize"
],
"license": "MIT",
"types": "./dist/index.d.ts",
"private": false,
"dependencies": {
"#types/jest": "^25.2.3",
"#types/node": "^14.0.9",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"react-scripts": "^4.0.3"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"devDependencies": {
"#testing-library/jest-dom": "^5.9.0",
"#testing-library/react": "^10.0.6",
"#testing-library/user-event": "^11.0.0",
"#typescript-eslint/eslint-plugin": "^4.16.1",
"#typescript-eslint/parser": "^4.16.1",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "8.1.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-preset-env": "^1.7.0",
"css-loader": "^3.5.3",
"eslint": "^7.21.0",
"eslint-config-airbnb-typescript-prettier": "^2.1.1",
"eslint-plugin-react": "^7.22.0",
"husky": "^4.2.5",
"jest-canvas-mock": "^2.2.0",
"prettier": "^2.0.5",
"styled-components": "^5.1.1",
"ts-loader": "8.0.7",
"typescript": "^4.2.2",
"url-loader": "^4.1.0",
"webpack": "4.44.2",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "3.11.1"
},
"scripts": {
"start-server": "react-scripts start",
"start": "webpack --watch",
"build": "webpack && tsc && cp -R ./src/assets ./dist",
"test": "react-scripts test",
"coverage": "CI=true npm test -- --env=jsdom --coverage",
"eject": "react-scripts eject",
"format": "prettier --write src/**/*.{js,ts,tsx}",
"lint": "eslint src/**/*.{js,ts,tsx}",
"link-react": "cd example/node_modules/react && npm link && cd ../react-dom && npm link && cd ../../.. && npm link react react-dom"
},
"husky": {
"hooks": {
"pre-commit": "yarn format && yarn lint"
}
},
"jest": {
"coveragePathIgnorePatterns": [
"src/serviceWorker.ts"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement?

Hot Module Replacement '[HMR] Waiting for update signal from WDS...' forever, how to enable Hot Module Replacement or send signal from Webpack Dev Server?
I want Hot Module Replacement be enabled.
Therefore, I set hot: true in webpack.config.js.
I stuck at
[HMR] Waiting for update signal from WDS...
I expected to see
[HMR] Waiting for update signal from WDS...
[WDS] Hot Module Replacement enabled.
I tried webpack serve --hot --inline command, but I got nothing...
webpack.config.js
// Paths
const path = require('path');
const srcPath = path.join(__dirname, 'src');
const distPath = path.join(__dirname, 'dist');
const publicPath = path.join(__dirname, 'public');
// Plugins...
// Modules
module.exports = {
mode: 'development',
entry: path.join(srcPath, 'index.tsx'),
output: {
path: distPath,
filename: 'bundle.js',
},
module: {
rules: [
// TypeScript
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use: ['babel-loader']
},
},
// resolves...
devServer: {
contentBase: distPath,
historyApiFallback: true,
hot: true,
inline: true,
writeToDisk: true
},
// plugins...
.babelrc
// .babelrc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": [
"react-hot-loader/babel"
]
}
App.tsx
I use 'react-hot-loader'.
import { hot } from 'react-hot-loader/root';
// some codes
export default hot(App);
if I change code 'webpack-dev-server' shows
i ｢wdm｣: Compiling...
./src/App.tsx 1.62 KiB [built] [code generated]
i ｢wdm｣: Compiled successfully.
Here is package.json
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.6",
"#testing-library/react": "^11.1.2",
"#testing-library/user-event": "^12.2.2",
"#types/jest": "^26.0.15",
"#types/node": "^12.19.5",
"#types/react": "^16.9.56",
"#types/react-dom": "^16.9.9",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"typescript": "^4.0.5",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "webpack serve",
"build": "webpack",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "^7.12.7",
"#babel/preset-typescript": "^7.12.7",
"#hot-loader/react-dom": "^17.0.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.2",
"fork-ts-checker-webpack-plugin": "^6.0.3",
"html-webpack-plugin": "^5.0.0-alpha.14",
"image-minimizer-webpack-plugin": "^1.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.1",
"imagemin-svgo": "^8.0.0",
"raw-loader": "^4.0.2",
"react-hot-loader": "^4.13.0",
"sass": "^1.29.0",
"sass-loader": "^10.1.0",
"ts-loader": "^8.0.11",
"url-loader": "^4.1.1",
"webpack": "^5.6.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
}
}

There's a bug https://github.com/webpack/webpack-dev-server/issues/2758 when using browserslist with webpack-dev-server and webpack 5 at the moment, you can set target: 'web' to work around the issue until webpack-dev-server v4 is out.

Webpack: TypeError: Cannot read property 'properties' of undefined

Here is the branch and repo in question: https://github.com/Futuratum/moon.holdings/tree/dev
/Users/leongaban/projects/Futuratum/moon.holdings/node_modules/webpack-cli/bin/config-yargs.js:89
describe: optionsSchema.definitions.output.properties.path.description,
Not sure why I'm getting this error, but I upgraded from Webpack 3 to 4.
webpack
/* eslint-disable no-console */
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import path from 'path';
const moonholdings = path.resolve(__dirname, 'moonholdings');
const app = path.resolve(__dirname, 'app');
const nodeModules = path.resolve(__dirname, 'node_modules');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
inject: 'body'
});
const ExtractTextPluginConfig = new ExtractTextPlugin({
filename: 'moonholdings.css',
disable: false,
allChunks: true
});
const CopyWebpackPluginConfigOptions = [{
from: 'app/static',
to: 'static/'
}];
const CopyWebpackPluginConfig = new CopyWebpackPlugin(CopyWebpackPluginConfigOptions);
const PATHS = {
app,
build: moonholdings
};
const LAUNCH_COMMAND = process.env.npm_lifecycle_event;
const isProduction = LAUNCH_COMMAND === 'production';
process.env.BABEL_ENV = LAUNCH_COMMAND;
const productionPlugin = new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
});
const base = {
entry: ['babel-polyfill', PATHS.app],
performance: {
hints: false,
maxAssetSize: 1000000
},
output: {
path: PATHS.build,
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [app, nodeModules]
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.s?css/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)/,
loader: 'file-loader?name=[path][name].[ext]'
}
]
}
};
const developmentConfig = {
devtool: 'inline-source-map',
devServer: {
contentBase: moonholdings
},
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig
]
};
const productionConfig = {
devtool: false,
plugins: [
CopyWebpackPluginConfig,
ExtractTextPluginConfig,
HtmlWebpackPluginConfig,
productionPlugin
]
};
export default Object.assign(
{}, base,
isProduction === true ? productionConfig : developmentConfig
);
package.json
{
"name": "moon.holdings",
"version": "1.0.0",
"description": "Cryptocurrency asset portfolio",
"main": "index.js",
"repository": "https://github.com/Futuratum/moon.holdings.git",
"author": "Leon Gaban <leongaban#gmail.com>",
"license": "MIT",
"scripts": {
"start": "webpack && webpack-dev-server",
"webpack": "webpack-dev-server",
"dev": "webpack-dev-server",
"build": "webpack -p",
"production": "webpack -p",
"test": "yarn run test-eslint; yarn run test-jest:update",
"test-eslint": "eslint app",
"test-eslint:fix": "eslint --fix app",
"test-sasslint": "./node_modules/.bin/sass-lint 'app/**/*.scss' -v -q",
"test-jest": "jest",
"test-jest:watch": "jest --watch",
"test-jest:coverage": "jest --coverage",
"test-jest:update": "jest --updateSnapshot"
},
"setupFiles": [
"<rootDir>/config/polyfills.js",
"<rootDir>/src/setupTests.js"
],
"now": {
"name": "moonholdings",
"alias": "moon.holdings"
},
"jest": {
"moduleNameMapper": {},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules",
"app"
],
"setupTestFrameworkScriptFile": "./app/utils/testConfigure.js"
},
"dependencies": {
"axios": "^0.18.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.2",
"babel-loader": "^7.1.4",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.26.0",
"copy-webpack-plugin": "^4.5.0",
"css-loader": "^0.28.10",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"enzyme-to-json": "^3.3.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "^16.1.0",
"eslint-import-resolver-node": "^0.3.2",
"eslint-plugin-dependencies": "^2.4.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"flexboxgrid": "^6.3.1",
"git-hooks": "^1.1.10",
"history": "^4.7.2",
"html-webpack-plugin": "^3.0.6",
"jest": "^22.4.2",
"lodash": "^4.17.10",
"node-sass": "^4.7.2",
"path-to-regexp": "^2.2.0",
"ramda": "^0.25.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-hot-loader": "^4.0.0",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
"react-sortable-hoc": "^0.6.8",
"react-test-renderer": "^16.3.2",
"redux": "^3.7.2",
"redux-mock-store": "^1.5.1",
"redux-thunk": "^2.2.0",
"rest": "^2.0.0",
"sass-lint": "^1.12.1",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.2",
"svg-inline-loader": "^0.8.0",
"svg-loader": "^0.0.2",
"url-loader": "^1.0.1",
"webpack": "^4.20.2",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "2.11.1"
}
}

If it is happening after you have updated npm packages , then remove and reinstall webpack webpack-cli
npm remove webpack webpack-cli
npm install --save-dev webpack webpack-cli
I would suggest you to upgrade/update node before doing anything.

There are two things you need to do:
Remove webpack#4.20.2 and webpack-cli#2.0.10 dependency and specifically install webpack#4.19.0 and webpack-cli#3.0.4 version. Webpack 4.20.x release has error.
Also do not use extract-text-webpack-plugin.
extract-text-webpack-plugin should not be used with Webpack 4 to extract CSS. It doesn't work. Instead of this, try using: mini-css-extract-plugin.
After these changes, webpack should compile your code and generate necessary bundle.
Note: When I cloned mentioned repository on my system, I had to make changes to board.js file. I made change to this import statement: import CoinMarketCap from 'components/Partials/Coinmarketcap/link'; This doesn't work on Linux system as paths are case sensitive.

It's ^ symbol in "webpack-cli": "^2.0.10" dependency which resulting to minor/patch version getting upgraded to latest webpack-cli#2.x.x, which has following change.
Change in webpack resulting in the issue: (change output to outputOptions)
REF: https://github.com/webpack/webpack-cli/pull/605
Solution: (installing webpack-cli#3.x.x)
npm uninstall webpack-cli
npm install --save-dev webpack-cli#3.1.1
REF:Solution

Try to install latest LTS version of Node and test again. Works perfectly fine for me with latest LTS node and npm.

In my case, I just forgot to return the middlewares array in the setupMiddlewares function, like this:
devServer: {
setupMiddlewares: (middlewares, devServer) => {
// Smth very important
return middlewares
}
}

migrating to latest version solved the error for me: webpack-cli^3.3.11

Unexpected token import webpack babel es2015

I have visited hundred webpages but couldn't find solution which fits me. I'm using webpack babel but have error "Unexpected token import" when i try to import express:
.babelrc:
{
"moduleId": "myModule",
"presets": ["es2015", "stage-0"],
"plugins": ["add-module-exports"]
}
webpack.config.js:
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports = {
context:__dirname + '/front',
entry:__dirname + '/front/index.js',
output:{
path:__dirname + '/public/assets',
filename:'bundle.js',
publicPath:'assets'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins:[
new webpack.DefinePlugin({
TEST_ENV:process.env.NODE_ENV === "test"
}),
new ExtractTextPlugin("bundle.css",
{
publicPath: 'assets/core/css',
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']}
},
{
test: /\.html/,
loader: "raw-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version!sass-loader")
}
]
},
devServer: {
port: 7000,
},
devtool: 'source-map',
}
package.json:
{
"name": "SA-19KV",
"version": "1.0.0",
"description": "Project Boilerplate",
"scripts": {
"ngdev": "webpack-dev-server --content-base public/ --progress --colors ",
"nghot": "webpack-dev-server --content-base public/ --progress --colors --inline --hot",
"test": "set NODE_ENV=test && karma start",
"prod": "webpack -p",
"backdev": "nodemon server.js --watch back/"
},
"dependencies": {
"angular": "1.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"style-loader": "^0.13.1"
},
"devDependencies": {
"angular-mocks": "^1.6.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "1.6.1",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-html-detailed-reporter": "^1.1.15",
"karma-mocha": "^1.3.0",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"node-sass": "^4.4.0",
"nodemon": "^1.11.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "1.14.1"
},
"author": "Me :-)",
"license": "ISC"
}

Your package.json scripts aren't loading your webpack's config. You can load it by adding the --config parameter:
webpack-dev-server --config ./webpack.config.js

webpack starting but not watching for changes?

I have a repo set up for a project which is using webpack and works perfectly. I copied the entire repo to start a new project. Now when I run "npm run watch" webpack starts but will not watch for changes. my package.json file looks like this:
{
"name": "donedone-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"watch": "webpack --progress --colors --watch",
"build": "webpack --progress --colors",
"deploy": "NODE_ENV=production webpack -p --progress --colors"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"base-64": "^0.1.0",
"imagesloaded": "^4.1.0",
"imports-loader": "^0.6.5",
"react": "^15.1.0",
"react-dom": "^15.1.0"
},
"devDependencies": {
"babel-core": "^6.5.1",
"babel-loader": "^6.2.2",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"browser-sync": "^2.11.1",
"browser-sync-webpack-plugin": "^1.0.1",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"img-loader": "^1.1.2",
"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
"webpack": "^1.13.1"
}
}
and my webpack config like this:
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
require('webpack/lib/ResolverPlugin');
// const webRoot = './site/'
// const assetsPath = path.join(webRoot, 'assets')
// const srcDir = path.resolve(__dirname, 'src')
// const srcAssetsPath = path.join(srcDir, 'assets')
// const spritePath = path.join(srcAssetsPath, 'sprites')
var config = {
entry: './src/js/main',
externals: {
'jquery': '$'
},
output: {
path: './site/assets',
filename: 'main.js'
},
module : {
loaders : [
{
test : /\.js?/,
loader : 'babel'
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('css!sass')
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url?limit=25000!img?progressive=true'
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader : 'url?limit=90000'
}
]
},
plugins: [
new ExtractTextPlugin('main.css', {
allChunks: true
})
]
};
module.exports = config;
When i run "npm run watch" in terminal, webpack seems to begin normally just as it does with my working repo, except not looking for changes. Here is what it displays:
jordansykes ~/sites/side-projects/mofilm
$ npm run watch
> donedone-api#1.0.0 watch /Users/jordansykes/Sites/side-projects/mofilm
> webpack --progress --colors --watch
Hash: f57ca91a3a54e729eb37
Version: webpack 1.13.1
Time: 789ms
Asset Size Chunks Chunk Names
main.js 1.45 kB 0 [emitted] main
+ 1 hidden modules
Any help on this would be great. Thanks

Thanks for everyone's suggestions. Because I copied the repo in finder, .babelrc file that doesnt show up in finder, was not copied over. When this was created again in the root, everything compiled correctly.