Fixing Webpack's Watch Option - node.js

I had code that worked just fine, but now I've updated some packages, especially webpack, and I'm getting some warnings that I'd like to remove.
When I run the command npm run watch, I get the following error:
[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument need to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.
My package.json is as follows:
{
"name": "simple-flask-react-template",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack -p --progress --config webpack.config.js",
"dev-build": "webpack --progress -d --config webpack.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --progress -d --config webpack.config.js --watch"
},
"author": "jadiker",
"license": "None",
"homepage": "https://github.com/rbarbaresco/simple-flask-react-template#readme",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.2.1",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"jquery": "^3.5.1",
"popper.js": "^1.14.7",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"webpack": "^5.11.1",
"webpack-cli": "^3.3.10"
},
"babel": {
"presets": [
"env",
"react"
]
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.28",
"#fortawesome/free-solid-svg-icons": "^5.13.0",
"#fortawesome/react-fontawesome": "^0.1.9",
"query-string": "^6.11.1",
"react-router-dom": "^5.1.2"
}
}
My webpack.config.js is as follows:
const webpack = require('webpack');
const config ={
mode: 'development',
entry: {
login: './js/login.jsx',
signup: './js/signup.jsx',
index: './js/index.jsx',
search: './js/search.jsx',
ask: './js/ask.jsx',
question: './js/question.jsx',
help: './js/help.jsx',
test: './js/test.jsx',
},
devtool: 'inline-source-map',
output: {
path: __dirname + '/dist/bundle',
filename: '[name].bundle.js',
},
resolve:{
extensions:[
'.js',
'.jsx',
'.css'
]
},
module:{
rules:[
{
test:/\.jsx?/,
exclude:/node_modules/,
use:'babel-loader'
},
{
test:/\.(jpe?g|png|gif|svg)$/i,
loader:"file-loader",
},
{
test:/\.css$/,
use:[
'css-loader'
],
},
]
}
};
module.exports = config;
What can I change in the code in order to get that warning to go away?

Related

NodeJS Application works fine, but failes to start after webpack build

I have a nodejs application, that i have been developing and it works fine when i run it with "npm run dev" nodemon. However when i build the application to dist with webpack it fails to start.
The failure dumps the full JS to the console followed by the lines below. I have tried to build in in Linux and Windows but I get the same error.
ReferenceError: FinalizationRegistry is not defined
at Object.76792 (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:1694255)
at __webpack_require__ (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2614557)
at Object.78400 (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2216708)
at __webpack_require__ (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2614557)
at Object.91378 (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2207183)
at __webpack_require__ (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2614557)
at Object.88428 (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2211728)
at __webpack_require__ (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2614557)
at Object.31534 (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2222457)
at __webpack_require__ (/mnt/c/Users/accou/workspace/io.thatsimple.audible-series/api/dist/api.bundle.js:2:2614557)
my package file
{
"name": "nodejs-restapi-mongo-ts",
"version": "1.0.0",
"description": "Example Project on how to build and develop REST API with NodeJS and MongoDB",
"main": "index.js",
"scripts": {
"start": "ts-node index.ts",
"dev": "nodemon",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "cross-env ENVIRONMENT=production webpack",
"prod-build": "cross-env ENVIRONMENT=production gulp"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bbachi/nodejs-restapi-mongo-ts.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/bbachi/nodejs-restapi-mongo-ts/issues"
},
"homepage": "https://github.com/bbachi/nodejs-restapi-mongo-ts#readme",
"dependencies": {
"amqplib": "^0.10.3",
"axios": "^0.27.2",
"cheerio": "^1.0.0-rc.12",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"dotenv": "^8.6.0",
"express": "^4.17.1",
"minio": "^7.0.32",
"moment": "^2.29.4",
"mysql2": "^2.3.3",
"pine": "^1.1.1",
"pino": "^8.6.1",
"pino-pretty": "^9.1.1",
"swagger-jsdoc": "^6.0.1",
"swagger-ui-express": "^4.1.6",
"timespan-parser": "^1.2.0"
},
"devDependencies": {
"#types/amqplib": "^0.8.2",
"#types/express": "^4.17.11",
"#types/minio": "^7.0.13",
"#types/mongoose": "^5.10.3",
"#types/mysql": "^2.15.21",
"#types/swagger-jsdoc": "^6.0.0",
"#types/swagger-ui-express": "^4.1.2",
"cross-env": "^7.0.3",
"del": "^6.0.0",
"fancy-log": "^2.0.0",
"gulp": "^4.0.2",
"gulp-zip": "^5.1.0",
"nodemon": "^2.0.7",
"ts-loader": "^9.2.6",
"ts-node": "^9.1.1",
"typescript": "^4.1.3",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-stream": "^7.0.0"
}
}
my webpack.config.ts
const path = require('path');
const webpack = require('webpack');
const environment = process.env.ENVIRONMENT;
console.log('environment:::::', environment);
module.exports = {
entry: './index.ts',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'api.bundle.js',
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['.ts', '.tsx', '.js'],
},
module: {
rules: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: 'ts-loader' },
],
},
target: 'node',
plugins: [
//new webpack.DefinePlugin(ENVIRONMENT_VARIABLES),
],
};
The full code can be found here: https://github.com/KRSogaard/io.thatsimple.audible-series/tree/main/api

Working on a React App with a team using VSCode, when I save my code I don't see the updates, but my teammates can see theirs just fine

So I am working on my react web app with a team. We are all using Git/Gitlab.
Everyone was instructed to clone the project using git, and we all did so.
The problem is that when I run the project on VS CODE, I try to edit the file, save the file, and hope to see the changes In real time. But in order for me to see it, I have to turn off the project with Ctrl+C and redo "npm run dev", have it recompile, and then I'll see my changes after a minute.
Everyone else on the other hand can see their changes in real time.
Our file path is..
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned
(I'm running a linux sub system (ubuntu) as well
So we run
npm install
AND
npm run dev
in the above location
Then we run...
npm install
AND
npm run start
in
/mnt/c/Users/major/OneDrive/Documents/PENNY/penny-earned(this is the folder I cloned)/server (this is the backend folder)
Full Disclosure, I have been tinkering with VS Code like changing the integrated terminal using WSL, zsh and powerlevel9k extensions. But other than that, I don't see what the problem is.
Addition:
package.json
{
"name": "react-penny-earned",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx webpack-dev-server --mode development",
"build": "npx webpack --mode development",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.8.3",
"#babel/core": "^7.8.3",
"#babel/helper-compilation-targets": "^7.15.4",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.3",
"#babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"react-hot-loader": "^4.12.19",
"style-loader": "^1.1.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"#babel/runtime": "^7.8.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#mui/icons-material": "^5.0.1",
"#mui/lab": "^5.0.0-alpha.50",
"#mui/material": "^5.0.2",
"lodash": "^4.17.21",
"react": "^17.0.2",
"react-dom": "^16.12.0",
"react-google-charts": "^3.0.15",
"react-icons": "^4.2.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0"
}
}
package.json (server)
{
"name": "react-ecosystems-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npx babel-node src/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "1.19.0",
"cors": "2.8.5",
"express": "4.17.1",
"uuid": "3.3.3"
},
"devDependencies": {
"#babel/core": "7.7.5",
"#babel/node": "7.7.4",
"#babel/preset-env": "7.7.6"
}
}
***Not sure if this should impact anything considering my teammates have the exact same configuration on their system
Webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true,
historyApiFallback: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};

How can i manage to use flow in Cypress?

I want to use Flow in a React application that I test with Cypress I use a web preprocessor plugging with a flow preset. First, I code the preprocessor in ./cypress/plugin/index.js:
const webpack = require('#cypress/webpack-preprocessor')
module.exports = (on) => {
const options = {
// send in the options from your webpack.config.js, so it works the same
// as your app's code
webpackOptions: require('../../webpack.config'),
watchOptions: {}
}
on('file:preprocessor', webpack((options)))
}
Then I install the #cypress/webpack-preprocessor' and the #babel/preset-flow The package.json looks like this:
{
"name": "TimeLogging",
"version": "1.0.0",
"description": "React Time Logging",
"main": "index.js",
"engines": {
"node": "8.11.4",
"npm": "5.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"eslint": "eslint",
"flow": "flow"
},
"author": "CodeMix",
"license": "ISC",
"dependencies": {
"flow-bin": "^0.81.0",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "^1.1.1"
},
"devDependencies": {
"#babel/preset-flow": "^7.0.0",
"#cypress/webpack-preprocessor": "^3.0.0",
"cypress": "^3.1.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0"
}
}
> And the webpack.config.js looks like this:
module: {
rules: [
{{
test: /\.(js|jsx?)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: {
presets: [
'babel-preset-env',
'babel-preset-react',
'babel-preset-flow'
],
},
}],
},
]
}
}
When I exeutes the test in Cypress I get this error:
/cypress/integration/TogableTimerForm.spec.jsx Module build failed
(from
./node_modules/#cypress/webpack-preprocessor/node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only
functions. In
/Users/stein/Development/TimeLogging/TimeLogging/node_modules/babel-preset-flow/lib/index.js
How do I fix this error?
Install these dependencies
yarn:
yarn add --dev #babel/preset-flow #cypress/browserify-preprocessor
npm
npm install --save-dev #babel/preset-flow #cypress/browserify-preprocessor
Add this to your cypress/plugins/index.js
const browserify = require('#cypress/browserify-preprocessor');
module.exports = (on, config) => {
const options = browserify.defaultOptions;
options.browserifyOptions.transform[1][1].presets.push(
'#babel/preset-flow',
);
on('file:preprocessor', browserify(options));
};

webpack windows invalid character

I am creating a simple react project using webpack npm and babel.
I am able to install all the dependencies using npm.
when I try to start the webpack-dev-server, it errors out.
Can someone please suggest a way out.
I use the command npm run dev to start, defined in the package.json
here is my webpack.config.js
var webpack = require('webpack');
var path = require('path');
var config = {
entry: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
output: {
path: "D:\github\UI\ReactWebpackBabel\build",
filename: 'bundle.js',
publicPath: '/':
},
devtool: 'source-map',
devServer: {
inline: true,
contentBase: BUILD_DIR,
port: 3333
},
module: {
loaders: [{
test: /\.jsx?/,
include: "D:\github\UI\ReactWebpackBabel\app\index.jsx",
loader: 'babel-loader',
query: {
presets: ['babel-preset-es2015', 'react']
}
}]
}
}
and here is my package.json
{
"name": "reactwebpackbabel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "D:\\github\\UI\\ReactWebpackBabel\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js",
"build": "webpack --config D:\\github\\UI\\ReactWebpackBabel\\code\\ReactWebpackBabel\\webpack.confg.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"create-react-class": "^15.6.2",
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"devDependencies": {
"webpack": "^3.8.0",
"webpack-dev-server": "^2.9.2"
}
}
You should use webpack-dev-server.cmd not *.js file. Especially on Windows ;)
It stays here -> node_modules/.bin/webpack-dev-server.
It should also run without full path. Npm script will locate it in node_modules.
Check out getting started: https://github.com/webpack/webpack-dev-server

Invalid configuration object -configuration.output.path after installing sass

I facing an issue while running webpack using the command npm run dev, after installing npm sass
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
Issue:
Invalid configuration object -configuration.output.path.
given my package.json and webpack.config.js.
Thanks in advance could somebody let me know what we went wrong, how could we resolve this issue.
Issue:
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path : ' dist',
filename : 'app.bundle.js'
},
module: {
rules: [
{ test: /\.scss$/, use: ['style-loader','css-loader', 'sass-loader'] }
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Index Project Template',
minify: {
collapseWhitespace: true
},
hash: true,
template: './src/indextemp.ejs', // Load a custom template (ejs by default see the FAQ for details)
})
]
}
package.json
{
"name": "webpacks",
"version": "1.0.0",
"description": "Webpack Start",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prod": "webpack -p"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.0",
"html-webpack-plugin": "^2.28.0",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.16.1",
"webpack": "^2.4.1"
}
}

Resources