NodeJS Application works fine, but failes to start after webpack build - node.js

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

Related

Webpack compilation failed: in ./src/index.js 1:0 Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

How do you get round this error in webpack?
Answers in similar threads are poorly explained.
I get this error when trying to run the code and have no idea how to solve it - what steps to take, where to look for error etc.
babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
webpack.config.js
const path = require('path');
module.exports = {
target: 'node',
output: {
path: path.join(__dirname, './.webpack'),
filename: 'handler.js',
libraryTarget: 'commonjs',
}
};
package.json
{
"name": "rate-repository-api",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node -r esm ./src/index.js",
"start:dev": "nodemon -r esm ./src/index.js",
"bundle": "cpx src/**/* functions/bundle",
"start:lambda": "netlify-lambda serve ./src/lambda",
"lint": "eslint ./src",
"test": "jest .",
"migrate:make": "knex migrate:make",
"migrate:latest": "knex migrate:latest",
"build": "npm run migrate:latest",
"seed:make": "knex seed:make",
"seed:run": "knex seed:run"
},
"lint-staged": {
"src/**/*.js": "eslint",
"*.{js,json,css,md}": "prettier --write"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/Kaltsoon/rate-repository-api.git"
},
"author": "Kalle Ilves",
"license": "MIT",
"bugs": {
"url": "https://github.com/Kaltsoon/rate-repository-api/issues"
},
"homepage": "https://github.com/Kaltsoon/rate-repository-api#readme",
"dependencies": {
"#apollo/server": "^4.3.0",
"#as-integrations/aws-lambda": "^1.1.0",
"#koa/cors": "^3.0.0",
"apollo-boost": "^0.4.9",
"apollo-server": "^3.3.0",
"apollo-server-core": "^3.3.0",
"apollo-server-koa": "^3.3.0",
"apollo-server-lambda": "^3.11.1",
"axios": "^0.24.0",
"bcrypt": "^5.0.0",
"dataloader": "^2.0.0",
"date-fns": "^2.9.0",
"dotenv": "^11.0.0",
"es6-error": "^4.1.1",
"esm": "^3.2.25",
"graceful-fs": "^4.2.10",
"graphql": "^16.6.0",
"jsonwebtoken": "^8.5.1",
"knex": "^0.95.15",
"koa": "^2.11.0",
"koa-bodyparser": "^4.3.0",
"koa-morgan": "^1.0.1",
"koa-router": "^10.0.0",
"lodash": "^4.17.15",
"lru-cache": "^6.0.0",
"netlify-lambda": "^2.0.15",
"objection": "^3.0.1",
"serverless-plugin-common-excludes": "^4.0.0",
"serverless-plugin-include-dependencies": "^5.0.0",
"sqlite3": "^5.0.2",
"through2": "^4.0.2",
"uuid": "^8.3.2",
"watchman": "^1.0.0",
"winston": "^3.8.2",
"yup": "^0.32.8"
},
"devDependencies": {
"#babel/core": "^7.16.7",
"#babel/eslint-parser": "^7.16.5",
"#babel/preset-env": "^7.8.4",
"cpx": "^1.5.0",
"eslint": "^8.6.0",
"eslint-plugin-jest": "^25.3.4",
"husky": "^4.2.3",
"jest": "^27.4.7",
"lint-staged": "^10.0.7",
"nodemon": "^2.0.7",
"prettier": "^2.2.1",
"serverless-plugin-typescript": "^2.1.4",
"serverless-webpack": "^5.11.0"
},
"type": "commonjs"
}
index.js
import http from 'http';
var fs = require('graceful-fs')
import logger from './utils/logger';
import { API_PORT, APOLLO_PORT } from './config';
import createApolloServer from './apolloServer';
import app from './app';
var gracefulFs = require('graceful-fs')
gracefulFs.gracefulify(fs)
const startServer = async () => {
const httpServer = http.createServer(app);
const apolloServer = createApolloServer();
await apolloServer.listen({ port: APOLLO_PORT });
httpServer.on('request', app.callback());
await new Promise((resolve) =>
httpServer.listen({ port: API_PORT }, resolve),
);
logger.info(`Apollo Server ready at http://localhost:${APOLLO_PORT}`);
};
startServer();

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()]
};

What's wrong here I have to do NPM link on "react": "^16.13.1" because app report duplicate React

It started with this error:
So I did a test to rule out what the problem was. I tested if the library Notistack that I hade forked from GitHub, and then linked with npm link to my app, was the problem.
I placed this code in the app
window.React2 = require('react');
console.log(window.React1 === window.React2);
And I placed this code in forked Notistack
window.React1 = require('react');
When I run the app I can see in the console that I get a false from that test. Indication that I have two different React version and that causing the error.
If I now do npm link in the library for the React package, so that the Notistack is using the app's version of React. Then I get rid of this error.
What am I missing here why do I have to do this even I use peerDependencies for React.
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
package.json
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.0.0",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"react-redux": "^7.2.5"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}

Fixing Webpack's Watch Option

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?

Webpack not loading png's after url-loader is included in web pack.config

So this is a basic web pack problem that i've seen solved on here before but for some reason I can seem to get web packs to load png's properly.
I've read several of the solutions and have tried many of them unsuccessfully. I've tried requiring the png like <img src=require('someone.png')/> and i've tried importing the image and I still get the same error. The good thing is that it sees the file but it reads the file as a text file.
error
Module build failed: SyntaxError: Unexpected character '�' (1:0)
1 | �PNG
| ^
2 |
3 |
4 | IHD;0��sRGB���
IDATH
Webpacks code
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
// inline base64 URLs for <=8k images, direct URLs for the rest
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
Package.json
{
"name": "moonshot",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"proxy": "http://loclhost:3090/",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch"
},
"author": "Austin Scott",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"file-loader": "^0.9.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.0",
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^0.14.3",
"react-dom": "^0.14.3",
"react-redux": "^4.0.0",
"react-router": "^2.0.1",
"redux": "^3.0.4",
"redux-form": "^4.1.3",
"redux-thunk": "^2.1.0"
}
}
If you are getting above error while running the mocha test cases you need to add this to your test_helper.js
// Disable webpack-specific features for tests since
// Mocha doesn't know what to do with them.
['.css', '.scss', '.png', '.jpg'].forEach(ext => {
require.extensions[ext] = () => null;
});

Resources