I am trying to run some React code on my server-side using node. Following a tutorial, I am trying to add babel to my node server so that JSX gets transpiled to JS.
I added the run scripts to my json.config to use babel-node as below (I use the "watch-server" script for development):
"scripts": {
"start": "start:dev",
"server": "node babel-node ./server/index.js",
"start:dev": "webpack && npm run server",
"start:prod": "webpack && npm run server",
"test": "jest",
"test:debug": "jest --debug",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage --colors",
"watch-server": "nodemon -e js,scss,jsx --ignore '*.bundle*.js' --verbose --exec npm run start:dev"
The issue I get is when I try to run npm run watch-server is an error:
> node babel-node ./server/index.js
internal/modules/cjs/loader.js:905
throw err;
^
Error: Cannot find module '/Users/zarnowm/Documents/GitHub/dsr-ux/babel-node'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.Module._load (internal/modules/cjs/loader.js:746:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Here is a snippet of my dependencies:
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/node": "^7.14.9",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-object-rest-spread": "^7.4.3",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/preset-react": "^7.0.0",
"#babel/runtime": "^7.5.0",
And .babelrc:
{
"env": {
"test": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-runtime"
]
}
}
}
Im struggling to figure out the issue...
Related
Nodejs version: v12.22.11
Electron version: ^11.1.0
RobotJS version: ^0.6.0
The following error message will be prompted when executing the project.
App threw an error during load
Error: The module '\\?\\node_modules\robotjs\build\Release\robotjs.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 72. This version of Node.js requires
NODE_MODULE_VERSION 85. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or `npm install`).
at process.func [as dlopen] (electron/js2c/asar_bundle.js:5:1812)
at Object.Module._extensions..node (internal/modules/cjs/loader.js:1203:18)
at Object.func [as .node] (electron/js2c/asar_bundle.js:5:1812)
at Module.load (internal/modules/cjs/loader.js:992:32)
at Module._load (internal/modules/cjs/loader.js:885:14)
at Function.f._load (electron/js2c/asar_bundle.js:5:12738)
at Module.require (internal/modules/cjs/loader.js:1032:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.<anonymous> (\node_modules\robotjs\index.js:1:15)
at Module._compile (internal/modules/cjs/loader.js:1152:30)
I have tried execute npm rebuild and npm install. But this doesn't solve my problem.
20221029-Updated
This is my whole package.json
{
"name": "robotjs-proj",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"postinstall": "electron-builder install-app-deps && node_modules/.bin/electron-rebuild --module-dir .",
"start": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^11.1.0",
"electron-builder": "^23.6.0",
"mathjs": "^8.1.0",
"robotjs": "^0.6.0",
"robotjs-node12": "^0.5.3"
},
"devDependencies": {
"#types/node": "^18.11.7",
"electron-rebuild": "^2.3.4"
}
}
insert postinstall script to your package.json
...
"start": .......,
"preinstall": .....,
"postinstall": "electron-builder install-app-deps && node_modules/.bin/electron-rebuild --module-dir .",
"dist": ....,
...
The website works fine on local, but it fails to deploy on Heroku with a very common error. I am using direct deploy from Github.
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module 'postcss'
Require stack:
- /tmp/build_d7cb8562/node_modules/postcss-cli/index.js
- /tmp/build_d7cb8562/node_modules/postcss-cli/bin/postcss
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/tmp/build_d7cb8562/node_modules/postcss-cli/index.js:14:17)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/tmp/build_d7cb8562/node_modules/postcss-cli/index.js',
'/tmp/build_d7cb8562/node_modules/postcss-cli/bin/postcss'
]
}
ERROR: "prefix:css" exited with 1.
-----> Build failed
This is my package.json file before I tried fixing it by moving devDependencies to dependencies
{
"name": "dopefolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile:scss": "node-sass sass/main.scss css/style.css -w",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
"compress:css": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all prefix:css compress:css"
},
"author": "",
"license": "GPL-3.0",
"devDependencies": {
"autoprefixer": "^10.3.1",
"node-sass": "^6.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^8.3.1"
}
}
This is my attempted fix:
{
"name": "dopefolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"autoprefixer": "^10.3.1",
"node-sass": "^6.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^8.3.1"
},
"scripts": {
"compile:scss": "node-sass sass/main.scss css/style.css -w",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.css -o css/style.css",
"compress:css": "node-sass css/style.css css/style.css --output-style compressed",
"build": "npm-run-all prefix:css compress:css"
},
"author": "",
"license": "GPL-3.0",
"devDependencies": {
}
}
It still fails to deploy with the same error. What could be the case?
I'm trying to deploy my app on Heroku, having 2 package.json files.
First is for the frontend:
{
"name": "quiz",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "npm start --prefix server",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"heroku-postbuild": "npm run build --prefix server && ng build --prod"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.0.2",
"#angular/common": "~12.0.2",
"#angular/compiler": "~12.0.2",
"#angular/core": "~12.0.2",
"#angular/forms": "~12.0.2",
"#angular/platform-browser": "~12.0.2",
"#angular/platform-browser-dynamic": "~12.0.2",
"#angular/router": "~12.0.2",
"rxjs": "~6.6.0",
"tslib": "^2.1.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#types/express": "^4.17.13",
"#angular-devkit/build-angular": "~12.0.2",
"#angular/cli": "~12.0.2",
"#angular/compiler-cli": "~12.0.2",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"jasmine-core": "~3.8.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.7.0",
"typescript": "~4.2.3"
},
"engines": {
"node": "16.x",
"npm": "7.x"
}
}
Second is for the backend:
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "dist/index",
"scripts": {
"start": "node ./dist/server/index.js",
"dev": "nodemon index.ts",
"build": "tsc -p ."
},
"author": "",
"license": "ISC",
"devDependencies": {
"#types/express": "^4.17.13",
"#types/node": "^16.6.1",
"nodemon": "^2.0.12",
"ts-node": "^10.2.1",
"typescript": "^4.3.5"
},
"dependencies": {
"express": "^4.17.1",
"zone.js": "^0.11.4"
},
"engines": {
"node": "16.x",
"npm": "7.x"
}
}
As my package.json starts first and triggers /server/package.json - first I try to build backend, using "heroku-postbuild" command in main package.json file and after that this command builds Angular app.
But after Heroku runs "start" command it shows such mistake:
Error: Cannot find module 'express'
2021-09-18T17:16:28.140193+00:00 app[web.1]: Require stack:
2021-09-18T17:16:28.140194+00:00 app[web.1]: - /app/server/dist/server/config/express.js
2021-09-18T17:16:28.140194+00:00 app[web.1]: - /app/server/dist/server/index.js
2021-09-18T17:16:28.140199+00:00 app[web.1]: at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
2021-09-18T17:16:28.140200+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:778:27)
2021-09-18T17:16:28.140200+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1005:19)
2021-09-18T17:16:28.140200+00:00 app[web.1]: at require (node:internal/modules/cjs/helpers:94:18)
2021-09-18T17:16:28.140201+00:00 app[web.1]: at Object.<anonymous> (/app/server/dist/server/config/express.js:6:33)
2021-09-18T17:16:28.140201+00:00 app[web.1]: at Module._compile (node:internal/modules/cjs/loader:1101:14)
2021-09-18T17:16:28.140202+00:00 app[web.1]: at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
2021-09-18T17:16:28.140202+00:00 app[web.1]: at Module.load (node:internal/modules/cjs/loader:981:32)
2021-09-18T17:16:28.140202+00:00 app[web.1]: at Function.Module._load (node:internal/modules/cjs/loader:822:12)
2021-09-18T17:16:28.140202+00:00 app[web.1]: at Module.require (node:internal/modules/cjs/loader:1005:19) {
2021-09-18T17:16:28.140203+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',
2021-09-18T17:16:28.140204+00:00 app[web.1]: requireStack: [
2021-09-18T17:16:28.140204+00:00 app[web.1]: '/app/server/dist/server/config/express.js',
2021-09-18T17:16:28.140204+00:00 app[web.1]: '/app/server/dist/server/index.js'
2021-09-18T17:16:28.140205+00:00 app[web.1]: ]
2021-09-18T17:16:28.140205+00:00 app[web.1]: }
When I run all those commands locally - it works.
I solved that problem by moving "express" into my main package.json file, but that's not what I'm trying to achieve. I want to have 2 separate json files so I can handle my installed modules for each backend and frontend easily.
What am I doing wrong?
So the problem was actually that I needed to do npm install both in server and frontend folders.
Heroku has a special command 'heroku-prebuild' which helps to prepare every folder to be built.
I created such commands:
"heroku-prebuild": "npm install --prefix server && npm install",
"heroku-postbuild": "npm run build --prefix server && ng build --prod"
Firstly, Heroku runs "heroku-prebuild", which installs all npm modules for both frontend and backend and, after that, it runs "heroku-postbuild", which builds frontend and backend dist folders.
After that it runs "start": "npm start --prefix server" and everything works.
npm run start works fine, but npm run start: dev throws this error:
7:14:22 PM - Found 0 errors. Watching for file changes.
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'src/models/note.model'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (C:\Users\Anuitex-169\Desktop\VersF\nest\server\dist\note\note.service.js:17:22)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
This error appeared from the very beginning of my project, and I can’t understand why. I decided to forget about this problem since npm run start works well. But somehow uncomfortable (
My app.module.ts
My package.json file:
{
"name": "server",
"version": "0.0.1",
"description": "",
"author": "",
"license": "MIT",
"scripts": {
"build": "rimraf dist && tsc -p tsconfig.build.json",
"format": "prettier --write \"src/**/*.ts\"",
"start": "ts-node -r tsconfig-paths/register src/main.ts",
"start:dev": "tsc-watch -p tsconfig.build.json --onSuccess \"node dist/main.js\"",
"start:debug": "tsc-watch -p tsconfig.build.json --onSuccess \"node --inspect-brk dist/main.js\"",
"start:prod": "node dist/main.js",
"lint": "tslint -p tsconfig.json -c tslint.json",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#nestjs/common": "^6.0.0",
"#nestjs/core": "^6.0.0",
"#nestjs/platform-express": "^6.0.0",
"#nestjs/typeorm": "^6.1.3",
"mongodb": "^3.3.2",
"path": "^0.12.7",
"reflect-metadata": "^0.1.12",
"rimraf": "^2.6.2",
"rxjs": "^6.3.3",
"typeorm": "^0.2.19"
},
"devDependencies": {
"#nestjs/testing": "^6.0.0",
"#types/express": "4.16.1",
"#types/jest": "24.0.11",
"#types/multer": "^1.3.10",
"#types/node": "11.13.4",
"#types/supertest": "2.0.7",
"jest": "24.7.1",
"prettier": "1.17.0",
"supertest": "4.0.2",
"ts-jest": "24.0.2",
"ts-node": "8.1.0",
"tsc-watch": "2.2.1",
"tsconfig-paths": "3.8.0",
"tslint": "5.16.0",
"typescript": "3.4.3"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": ".",
"roots": [
"<rootDir>/src/",
"<rootDir>/libs/",
"<rootDir>/apps/"
],
"testRegex": ".spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"coverageDirectory": "./coverage",
"testEnvironment": "node"
}
}
Please help me deal with this problem.
Your AppModule looks fine, so I have to wonder if something is happening in your NoteService, which this line makes it looks like that is the case at Object.<anonymous> (C:\Users\Anuitex-169\Desktop\VersF\nest\server\dist\note\note.service.js:17:22).
If I had to bet, you are trying to read the module from your src directory while you are in your dist directory (at least by standard Typescript compilation). Instead of using an import like src/models/note.model you should use an import that takes into account the path from the current file (such as ../models/note.model). You may need to change that a bit more, but that's the idea of what should happen
I have a nuxt-community/starter-template project with minimal additions. My package.json looks like this
{
// ...
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"docker-image": "nuxt build && docker build -t unijobs-www-temp .",
"start": "nuxt start",
"generate": "NODE_ENV=production nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free-brands": "^5.0.13",
"#fortawesome/fontawesome-free-regular": "^5.0.13",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/vue-fontawesome": "0.0.22",
"nuxt": "^1.0.0",
"nuxt-fontawesome": "^0.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.2"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-vue": "^4.0.0"
}
}
Local development looks fine, local build and start seem to work fine. However, it all goes south when I build the Docker image.
PLEASE NOTE this is not an issue with Docker, the same is true if I run equivalent steps on my own machine, in a new directory.
FROM node:stretch
ENV NODE_ENV=production
ENV HOST=0.0.0.0
EXPOSE 3000
RUN npm -g i nuxt
RUN mkdir -p /app
ADD .nuxt /app/.nuxt
ADD static /app/static
WORKDIR /app
CMD ["nuxt", "start"]
This is what I find in the logs:
2018-06-05T12:27:19.910Z nuxt:render Rendering url /
{ Error: Cannot find module 'core-js/library/fn/promise' from '/app'
at Function.module.exports [as sync] (/usr/local/lib/node_modules/nuxt/node_modules/resolve/lib/sync.js:42:15)
at r (/usr/local/lib/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8332:44)
at Object.<anonymous> (server-bundle.js:1429:18)
at __webpack_require__ (server-bundle.js:27:30)
at Object.module.exports.module.exports (server-bundle.js:105:31)
at __webpack_require__ (server-bundle.js:27:30)
at Object.<anonymous> (server-bundle.js:1218:138)
at __webpack_require__ (server-bundle.js:27:30)
at server-bundle.js:92:18
at Object.<anonymous> (server-bundle.js:95:10)
at evaluateModule (/usr/local/lib/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8338:21)
at /usr/local/lib/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8396:18
at new Promise (<anonymous>)
at /usr/local/lib/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8388:14
at Object.renderToString (/usr/local/lib/node_modules/nuxt/node_modules/vue-server-renderer/build.js:8564:9)
at Renderer.renderRoute (/usr/local/lib/node_modules/nuxt/lib/core/renderer.js:344:41)
code: 'MODULE_NOT_FOUND',
statusCode: 500,
name: 'NuxtServerError' }
However, it all goes away as soon as I plug node_modules in, next to the .nuxt and static directories. It seems some of the modules are not bundled. My nuxt.config.js file is like
module.exports = {
head: {
// Skipping noise...
},
modules: [
[ 'nuxt-fontawesome', {
component: 'fa',
imports: [
{ set: '#fortawesome/fontawesome-free-brands' },
]
}],
],
loading: { color: '#3B8070' },
build: {
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
// *** NOTE: In practice, I'm only using FA brands here, not the others ***
config.resolve.alias['#fortawesome/fontawesome-free-brands$'] = '#fortawesome/fontawesome-free-brands/shakable.es.js'
}
}
}
}
Am I doing something wrong?
I found Nuxt build will not bundle files in node_modules, so if you want to bundle all dependencies into .nuxt, you should use nuxt build --standalone.
see here: https://github.com/nuxt/nuxt.js/issues/4292
hope this will help you :)