Error: Cannot find module - webpack-dev-server.js - javascript

I am building a react app from scratch. Usually, I am running the npm create-react-app and it generates everything for you. I am following this tutorial https://www.youtube.com/watch?v=deyxI-6C2u4&ab_channel=TraversyMedia and it has the GitHub repository in the description. The problem is - when i run "npm start" it should run this command
webpack-dev-server --mode development --open --hot
which is written here in the package.json
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "./node_modules/.bin/webpack --mode production"
},
The command works if I am running it manually, but with npm start, it gives the following error
PS D:\React&Webpack4 boilerplate> npm start
> react-webpack4-boilerplate#1.0.0 start D:\React&Webpack4 boilerplate
> webpack-dev-server --mode development --open --hot
'Webpack4' is not recognized as an internal or external command,
operable program, or batch file.
internal/modules/cjs/loader.js:968
throw err;
^
Error: Cannot find module 'D:\...\webpack-dev-server.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
at Function.Module._load (internal/modules/cjs/loader.js:841:27)
at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
at internal/main/run_main_module.js:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-webpack4-boilerplate#1.0.0 start: `webpack-dev-server --mode development --open --hot`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-webpack4-boilerplate#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\***\AppData\Roaming\npm-cache\_logs\2020-09-30T18_11_15_755Z-debug.log

I run into the same issue above. You can try the following:
"scripts": {
"start": "webpack-dev-server --open --hot",
"build": "./node_modules/.bin/webpack --mode production"
},

install it globally and try to add webpack path to local variables.

Related

Faild on deployment on Heroku

I made an app with node.js +react but I can't deploy it on heroku.
It work on localal host
I tried to delete package-lock.json file but it doesn't help.
here is my scripts in package.json in server directory
"scripts": {
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
and my heroku logs
*
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_ENV=production
NODE_MODULES_CACHE=true
NODE_VERBOSE=false
-----> Installing binaries
engines.node (package.json): 8.1.1
engines.npm (package.json): 5.0.3
Resolving node version 8.1.1...
Downloading and installing node 8.1.1...
npm 5.0.3 already installed with node
-----> Restoring cache
- node_modules
-----> Installing dependencies
Installing node modules (package.json + package-lock)
added 93 packages in 7.456s
-----> Build
Running heroku-postbuild
> server#1.0.0 heroku-postbuild /tmp/build_52aeb2bcb298df1839239655d0215864
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
> fsevents#1.2.9 install /tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/jest-haste-map/node_modules/fsevents
> node install
> fsevents#1.2.9 install /tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/chokidar/node_modules/fsevents
> node install
> core-js-pure#3.1.4 postinstall /tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/core-js-pure
> node scripts/postinstall || echo "ignore"
> core-js#2.6.9 postinstall /tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/babel-runtime/node_modules/core-js
> node scripts/postinstall || echo "ignore"
added 1550 packages in 43.208s
> client#0.1.0 build /tmp/build_52aeb2bcb298df1839239655d0215864/client
> react-scripts build
/tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/#hapi/hoek/lib/deep-equal.js:17
options = { prototype: true, ...options };
^^^ SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/tmp/build_52aeb2bcb298df1839239655d0215864/client/node_modules/#hapi/hoek/lib/index.js:9:19)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the client#0.1.0
build script. npm ERR! This is probably not a problem with npm. There
is likely additional logging output above. npm ERR! A complete log of
this run can be found in: npm ERR!
/tmp/npmcache.1V3q7/_logs/2019-06-21T10_03_50_779Z-debug.log npm ERR!
code ELIFECYCLE npm ERR! errno 1 npm ERR! server#1.0.0
heroku-postbuild: NPM_CONFIG_PRODUCTION=false npm install --prefix
client && npm run build --prefix client npm ERR! Exit status 1 npm
ERR! npm ERR! Failed at the server#1.0.0 heroku-postbuild script. npm
ERR! This is probably not a problem with npm. There is likely
additional logging output above. npm ERR! A complete log of this run
can be found in: npm ERR!
/tmp/npmcache.1V3q7/_logs/2019-06-21T10_03_50_793Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app. ! Push failed*
You do not required to delete the package.json file. You just have to upload all the files and folder excepting node_modules. Heroku server install all required packages for you.
One more thing, you have to add "test" command under the scripts tag.
"scripts": {
"test": "node index.js",
"start": "node index.js"
},

sh: 1: tailwind: not found when deploying to heroku

package.json:
"devDependencies": {
"tailwindcss": "^0.7.4"
},
"scripts": {
"tailwind:css": "tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css",
"start": "npm run tailwind:css && react-scripts start",
"build": "npm run tailwind:css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
error:
sh: 1: tailwind: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! client#0.1.0 tailwind:css: `tailwind build src/css/tailwind.src.css -c tailwind.js -o src/css/tailwind.css`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the client#0.1.0 tailwind:css script.
Even though (in my experience) some heroku deployments seem to somehow get away with tailwind in the devDependencies, moving it into your dependencies does fix this issue.
This can affect more than just tailwind, so you might need to move more than just tailwind across for your build to work.

How can I create a node CLI app that needs babel to run?

I'm trying to creaet a global node CLI app, but It depends on Babel to run.
I've added this to my package.json
"bin": {
"kurly": "dist/index.js"
},
"scripts": {
"prepare": "npm run build",
"build": "babel src -d dist",
"start": "yarn build && node dist/index.js"
},
and I'm installing it from my git using
npm install -g alexanderprod/kurly
But when installing it I get the following error
npm ERR! path /usr/local/lib/node_modules/kurly/dist/index.js
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall chmod
npm ERR! enoent ENOENT: no such file or directory, chmod '/usr/local/lib/node_modules/kurly/dist/index.js'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
So it seems like npm didn't build it with babel before applying chmod.
And now I'm wonderging how to fix that, since I assume it makes no sense to upload dist/ to npm/git

Failure to run protractor from Node.js command prompt

Hope all is well. I'm setting up protractor for the first time through Node.js. This is provided as part of a tutorial on the AngularJS website under "Running E2E Tests":
https://docs.angularjs.org/tutorial
However, while executing protractor through the provided command "npm run protractor", I get the following error within the Node.js command prompt:
E/launcher - Process exited with error code 199
npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "protractor"
npm ERR! node v6.9.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! angular-phonecat#0.0.0 protractor: `protractor e2e-tests/protractor.conf.js`
npm ERR! Exit status 199
npm ERR!
npm ERR! Failed at the angular-phonecat#0.0.0 protractor script 'protractor e2e-tests/protractor.conf.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-phonecat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! protractor e2e-tests/protractor.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-phonecat
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-phonecat
npm ERR! There is likely additional logging output above.
Here is the contents on the package.json file:
{
"name": "angular-phonecat",
"private": true,
"version": "0.0.0",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"bower": "^1.7.7",
"http-server": "^0.9.0",
"jasmine-core": "^2.4.1",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.8",
"protractor": "^4.0.9"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server ./app -a localhost -p 8000 -c-1",
"pretest": "npm install",
"test": "karma start karma.conf.js",
"test-single-run": "karma start karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor e2e-tests/protractor.conf.js",
"update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/).join('//##NG_LOADER_START##\\n'+loaderText+' //##NG_LOADER_END##');fs.writeFileSync(indexFile,indexText);\""
}
}
I don't know if anyone else has tried this same tutorial and is getting the same issue? Any help would be most appreciated, thank you.
So Protractor can be started in several ways, the most common are by directConnect or by seleniumAddress. Since no value was set in the e2e-tests/protractor.config.js file, the assumed value is directConnect. To get directConnect to work with the chrome browser, you'll need to get the latest chromedriver. To just install chromedriver:
./node_modules/.bin/webdriver-manager update --standalone=false --gecko=false
Or as suggested in the github angular-seed page which will download, in addition, the selenium standalone jar file and gecko driver (which is used for firefox):
npm update-webdriver

AWS Elastic Beanstalk - How to build bundle JS using npm and webpack

I have a node js app deployed at elasticbeanstalk. Installed and symlinked node, npm and webpack. But when running npm run build-prod which itself calls the script webpack --config /var/app/current/webpack.prod.config.js. Getting the following error with exit status -2. The same happens if I run the webpack command directly too. I'm looking out for solutions.
[2016-07-26T06:57:36.301Z] INFO [9731] - [Application update app-5c81-160726_122417#24/AppDeployStage0/EbExtensionPostBuild/Infra-EmbeddedPostBuild/postbuild_0_site_web/Command 06_npm_run_build_prod] : Activity execution failed, because:
> site-web#1.0.0 build-prod /tmp/deployment/application
> webpack --config /var/app/current/webpack.prod.config.js
npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
npm ERR! node v4.4.6
npm ERR! npm v2.15.5
npm ERR! file sh
npm ERR! path sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn sh
npm ERR! site-web#1.0.0 build-prod: `webpack --config /var/app/current/webpack.prod.config.js`
npm ERR! spawn sh ENOENT
npm ERR!
npm ERR! Failed at the site-web#1.0.0 build-prod script 'webpack --config /var/app/current/webpack.prod.config.js'.
npm ERR! This is most likely a problem with the site-web package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack --config /var/app/current/webpack.prod.config.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs site-web
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls site-web
npm ERR! There is likely additional logging output above.
npm ERR! Linux 4.4.14-24.50.amzn1.x86_64
npm ERR! argv "/opt/elasticbeanstalk/node-install/node-v4.4.6-linux-x64/bin/node" "/bin/npm" "run" "build-prod"
npm ERR! node v4.4.6
npm ERR! npm v2.15.5
npm ERR! code ELIFECYCLE
container config file:
container_commands:
01_node_symlink:
command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/node /bin/node"
02_npm_symlink:
command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/npm /bin/npm"
03_npm_install_global_packages:
command: "npm install webpack webpack-cli -g"
04_webpack_symlink:
command: "ln -sf `ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin/webpack /bin/webpack"
#05_webpack_run_build_prod:
#command: "webpack --config /var/app/current/webpack.prod.config.js --progress --colors"
06_npm_run_build_prod:
command: "npm run build-prod"
Scripts in package.json
"scripts": {
"build": "webpack --config webpack.local.config.js --progress --colors",
"build-local": "webpack --config webpack.prod.config.js --progress --colors",
"build-prod": "webpack --config /var/app/current/webpack.prod.config.js",
"server": "node app.js",
"dev-server": "node dev-app.js"
}
And when I uncomment 05 that is run the webpack command directly it ends with error Error: "/var/app/current/site-web/static/assets/app/index.js" is not in the SourceMap.
The build script is successful at local but blocked on all the ways at production. Couldn't figure out how to run webpack command to build the JS on AWS beanstalk environment. Isn't the ideal way of building the JS file?
node: 4.4.6
npm: 2.15.5
webpack: latest
I'm still new to elastic beanstalk and having similar issues myself but I noticed your tasks for symlinking node, npm, etc, are in the form of container_commands.
According to the official docs, "They run after the application and web server have been set up and the application version file has been extracted, but before the application version is deployed."
Maybe try using commands: instead of container_commands:. See link I shared.
Maybe the fact that these commands aren't running until after the application and web server have already been set up is why it may not be working for you?
Again, I'm still new to elastic beanstalk but maybe that can help.
I think the approach is faulty. Webpack and Webpack-cli are devDependencies of package.json.
You should set your env variable to NPM_USE_PRODUCTION=false in order for EB to install devDependencies as well.
see more here: https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/nodejs-platform-packagejson.html
I had issues with global npm installs (in my case react-scripts). What I did as a workaround was to install the dependent package as declared in package.json and then symlink to it (located at /tmp/deployment/application/node_modules/.bin on EC2) in the .ebextensions config file:
03_react_scripts_symlink:
command: "ln -sf /tmp/deployment/application/node_modules/.bin/react-scripts /bin/react-scripts"
04_npm_run_build_prod:
command: "sudo npm run build"
Finally, I managed to run the build script at the staging dir. It's not a permanent solution but it works.
05_webpack_run_build_prod:
command: "cd /tmp/deployment/application && sudo webpack --config webpack.prod.config.js --progress --colors"

Categories