Webpack output file doesn't work on node environment - javascript

I have a node express JS server. Inside the server folder, I have sub folders named model,route,controllers, utils and middleware and index.js file in the root directory.
I'm using webpack to bundle the server into a single file and run it on a node environment. The following is my webpack.config.js file
module.exports = {
entry: "./index.js",
externals:[nodeExternals()],
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
target:"node",
mode:"production"
};
Following is my package.json file
{
"name": "server",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js",
"build": "webpack"
},
"author": "Minsaf",
"license": "ISC",
"dependencies": {
"bcrypt": "^5.0.1",
"cors": "^2.8.5",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"mongoose": "^6.3.4",
"nodemon": "^2.0.16",
"socket.io": "^4.5.1",
"webpack-node-externals": "^3.0.0"
},
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
When I build the server using npm run build, the project successfully bundles and generates the bundle.js file inside the dist folder. However when I run the bundle.js file using node bundle.js by opening a terminal inside dist folder, it says
node:internal/modules/cjs/loader:1042
throw err;
^
Error: Cannot find module 'express'`
How do I solve this error. I want to bundle everything inside the server folder to a single file and run it in a node environment using node bundle.js command

Related

TypeORM error when trying to create migration in CLI

I'm trying to use the TypeORM CLI to create a migration. I followed their guide but when I run yarn run typeorm migration:generate I get the error:
$ typeorm-ts-node-commonjs migration:generate
/usr/bin/env: ‘node --require ts-node/register’: No such file or directory
/usr/bin/env: use -[v]S to pass options in shebang lines
error Command failed with exit code 127.
My package.json looks like this:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "tsc -w",
"start": "node dist/index.js",
"dev": "nodemon dist/index.js",
"start2": "ts-node src/index.ts",
"dev2": "nodemon --exec ts-node src/index.ts",
"typeorm": "typeorm-ts-node-commonjs"
},
"author": "",
"license": "ISC",
"dependencies": {
"apollo-server-express": "^3.6.7",
"class-validator": "^0.13.2",
"cors": "^2.8.5",
"express": "^4.17.3",
"express-graphql": "^0.12.0",
"graphql": "^15.3.0",
"pg": "^8.7.3",
"reflect-metadata": "^0.1.13",
"ts-node": "^10.7.0",
"type-graphql": "^1.1.1",
"typeorm": "^0.3.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^17.0.23",
"nodemon": "^2.0.15",
"typescript": "^4.6.3"
}
}
I managed to solve this by installing the cli as described here https://orkhan.gitbook.io/typeorm/docs/using-cli#installing-cli
Install ts-node globally npm install -g ts-node
add the following script to package.json: "typeorm": "node --require ts-node/register ./node_modules/typeorm/cli.js" instead of "typeorm": "typeorm-ts-node-commonjs"
then create a migration with:
yarn run typeorm migration:generate -p -d src/data-source.ts src/migrations/<filename without ending>
FYI For anyone facing similar issues: It took me a while to figure out that the various documentations on typeorm are confusing and conflicting at the moment because they just moved to v0.3.0 and not everything has been updated.

Webpack doesn't pick up the latest changes in my JS files

I just started learning React and was asked to start using webpack as a JS bundler. Every time I change a JS file and save the changes, a new compilation is triggered in "npm run watch" window. But, my webpack compilation doesn't pick up the changes in my JS code. Here is my package.json file
{
"name": "tryReact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --entry ./src/index.js --output-path ./webpack",
"build": "webpack --mode production --entry ./src/index.js --output-path ./webpack",
"watch": "webpack --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.12.17",
"#babel/preset-env": "^7.12.17",
"#babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"webpack": "^5.24.0",
"webpack-cli": "^4.5.0"
}
}
here is webpack.config.js file
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}
};
I have to delete the main.js in the --output-path directory and then recompile it for the changes to take effect. If it matters, I use Atom as and editor and these JS files are constantly open in my editor. I tried switching back to Vim. But no use. I also tried "npm run dev" without any success. What am I missing?

Npm searching for package.json in the wrong directory

Hey I'm trying to install webpack right now.
I have everything setup, but when I try to run webpack inside my terminal, it searches for the package.json file in the wrong directory.
So my question is, can I change the path where npm tries to find my package.json file?
npm ERR! enoent ENOENT: no such file or directory, open '/home/User/package.json
^error message I get after trying to run npm webpack in Terminal
{
"name": "package",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"es6-promise": "^4.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}
}
^this is the package.json file from my project
You are in the wrong directory.
Make sure you are in the right folder and then run npm install webpack.
In your terminal use pwd to print the current working directory and then ls to list all the files inside it. If there is no package.json you can't install anything.

How can I use 'watch' in my npm scripts?

I have the following directory structure:
And my package.json looks like this:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
So firstly, I have to run each of these scripts individually e.g. npm run node-sass or npm run html-minifier etc. What I'd ideally want is to run npm serve which will do the following:
run html-minifier
run node-sass
run run image-min
run http-server
Lastly, watch everything in my src folder and run
the respective scripts as files change e.g. node-sass etc..
How can I best tackle this problem?
You can watch your directories using nodemon.
One solution for you is to create three watch scripts, one for each task:
watch:node-sass,
watch:html-minifier, and
watch:imagemin.
Then have a central script watch starting the three:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist",
"watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
"watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
"watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
"watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
Read also: How to Use npm as a Build Tool.
I advise onchange, see this boilerplate.
For example,
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
or
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
No Grunt or Gulp needed!
The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well

emberjs ember cli jade templates not compiling?

I am using ember-cli to setup my new emberjs application. While I was able to successfully install jade, it does not appear to be rendering .jade templates added to the /app directory?
Thoughts? Current package.json:
{
"name": "frontend",
"version": "0.0.0",
"private": true,
"directories": {
"doc": "doc",
"test": "test"
},
"scripts": {
"start": "ember server",
"build": "ember build",
"test": "ember test"
},
"repository": "https://github.com/stefanpenner/ember-cli",
"engines": {
"node": ">= 0.10.0"
},
"author": "",
"license": "MIT",
"devDependencies": {
"ember-cli": "0.0.28",
"originate": "0.1.5",
"broccoli-ember-hbs-template-compiler": "^1.5.0",
"loom-generators-ember-appkit": "^1.1.1",
"express": "^4.1.1",
"body-parser": "^1.2.0",
"glob": "^3.2.9",
"broccoli-sass": "^0.1.4",
"broccoli-csso": "^0.2.0",
"broccoli-jade": "^0.2.0"
}
}
There is a rather small template in the /app folder named error.jade with the following code:
doctype html
head
title
|Error!
body
p
strong
|Error!
When I run ember serve or ember build it never gets compiled. Everything else is the standard setup in ember cli. I ran npm install --save broccoli-jade to install it. Here is an example repo I setup for this issue embercli-emberjs-test. Ideally I would like to compile both handlebars and jade templates.
Thoughts? github issue
try running
bower install
in your app root. Some times the post-install routine does not execute automatically.

Categories

Resources