Unable to run dev - javascript

I am currently taking a course on Udemy and I am stuck, I am having a problem running script. When I run the command npm run dev, I get this error message:
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! forkify#1.0.0 dev: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the forkify#1.0.0 dev 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\user\AppData\Roaming\npm-cache\_logs\2020-05-01T10_10_11_136Z-debug.log
What would be wrong? This is my package.json code:
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "Marv",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.28.4",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"
},
"dependencies": {
"babel-polyfill": "^6.26.0"
}
}
Here is the webpack.config.js code:
const path = require('path');
module.exports = {
entry: './src/js/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
filename: 'bundle.js'
},
mode: 'development'
};
What could be wrong?
UPDATE: Some way I was able to finally npm run dev but it is being created in the wrong directory. How can I solve this?
I need it to appear under the starter > dist > js

Your path are not good replace entry: './src/js/index.js' by entry: './started/src/js/index.js'

Related

npm run script error on windows

I am using webpack to build my app so I am getting the following error on command prompt:
forkify#1.0.0 dev D:\Myprograms\java script\forkify
webpack --mode development
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.
Hash: 750054014bbd689a84a8
Version: webpack 4.16.5
Time: 85ms
Built at: 2018-08-07 10:22:56
ERROR in Entry module not found: Error: Can't resolve './scr/js/index.js' in 'D:\Myprograms\java script\forkify'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! forkify#1.0.0 dev: webpack --mode development
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the forkify#1.0.0 dev 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\Acer\AppData\Roaming\npm-cache_logs\2018-08-07T04_52_57_041Z-debug.log
My webpack.config.js is as follows:
const path = require('path');
module.exports = {
entry: './scr/js/index.js',
output: {
path: path.resolve(__dirname,'dist/js'),
filename: 'bundle.js'
}
};
My package.json file as follows:
{
"name": "forkify",
"version": "1.0.0",
"description": "forkify project",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"author": "abhilash narayan",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
Also check the screen shots
My file structure webpack.conifg.js:
It looks to me like a spelling mistake, entry: './scr/js/index.js
try to change it to ./src/js/index.js

React and ReactDOM not loading using webpack, babel

I am setting up a React project using webpack and babel, but I am getting the error that React and ReactDOM can't be resolved.
Is the problem is with the version of Webpack or Babel?
PS C:\Users\abhi\Desktop\mern-app> npm run webpack
> mern-app#1.0.0 webpack C:\Users\abhi\Desktop\mern-app
> webpack
ERROR in ./app.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\abhi\Desktop\mern-app'
# ./app.js 5:13-29
ERROR in ./app.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\abhi\Desktop\mern-app'
# ./app.js 9:16-36
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mern-app#1.0.0 webpack: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mern-app#1.0.0 webpack 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\abhi\AppData\Roaming\npm-cache\_logs\2018-04-21T14_25_50_508Z-debug.log
the configs and files are as belows
package.json
{
"name": "mern-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack"
},
"author": "Abhishek Kulshrestha",
"license": "ISC",
"dependencies": {
"npm": "^5.8.0",
"react": "^16.3.2",
"react-dom": "^16.3.2"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports ={
entry:'./app.js',
output:{
filename:'bundle.js',
path:__dirname
},
resolve:{
extensions:['.js']
},
module:{
rules:[{
test:/.jsx?$/,
use:{
loader:'babel-loader',
options:{
presets: ['env',
'react']
}
},
exclude:/.node_modules/
}]
}
}
app.js
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render(){
return '<h1>Hello </h1>'
}
}
ReactDOM.render(<App/>,document.getElementById('app'));
All files (package.json,webpack.config.js,app.js,index.html) are in same main folder
Please Help
This code looks fine to me. I think you have missed the dependency installation step before running webpack command.
Please try and follow the below steps in order and see if it resolves the error.
Run npm install inside the directory this will make sure all the dependencies you have mentioned in package.json are downloaded to node_modules directory.
Then run npm run webpack to generate the bundle.js

Heroku NodeJS App Build Failing

I'm receiving a build failed error while deploying my NodeJS app to Heroku. Here is the build log:
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 8.10.0
engines.npm (package.json): 5.7.1
Resolving node version 8.10.0...
Downloading and installing node 8.10.0...
Bootstrapping npm 5.7.1 (replacing 5.6.0)...
npm 5.7.1 installed
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json + package-lock)
npm ERR! path /tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/abbrev'
-> '/tmp/build_39ba38c4a10780e26942fa5ee7294cd5/node_modules/fsevents/node_modules/.abbrev.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.X6IAU/_logs/2018-03-24T03_18_22_202Z-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
I have deleted my node_modules folder and ran npm install and deleted/installed the abbrev npm package. Still the same error after this.
Here is my package.json:
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "nodemon bin/dev",
"clean": "rm -rf dist",
"build": "npm run clean && mkdir dist && babel server -s -d dist",
"production": "npm run build && nodemon bin/production"
},
"keywords": [],
"author": "",
"devDependencies": {
"dotenv": "^4.0.0"
},
"dependencies": {
"async": "^2.6.0",
"babel-cli": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"bcrypt-nodejs": "0.0.3",
"body-parser": "^1.18.2",
"boom": "^7.2.0",
"compression": "^1.7.2",
"cron": "^1.3.0",
"express": "^4.16.3",
"express-rate-limit": "^2.11.0",
"express-validator": "^3.2.1",
"flat": "^4.0.0",
"generate-password": "^1.4.0",
"helmet": "^3.12.0",
"jsonwebtoken": "^7.4.3",
"moment": "^2.21.0",
"moment-timezone": "^0.5.14",
"mongoose": "^4.13.12",
"morgan": "^1.9.0",
"nodemon": "^1.17.2",
"passport": "^0.3.2",
"passport-jwt": "^2.2.1",
"passport-local": "^1.0.0",
"sendgrid": "^5.2.3",
"twilio": "^3.13.1",
"uuid": "^3.2.1"
},
"engines": {
"node": "8.10.0",
"npm": "5.7.1"
}
}
Any suggestions are appreciated. Thank you.

I get an error when I run Reactjs project from command line: npm run it

Failed at the reactjs#1.0.0 it script 'webpack-dev-server'.
Make sure you have the latest version of node.js and npm installed.
If you do, this is most likely a problem with the reactjs package,
not with npm itself. Tell the author that this fails on your system:
webpack-dev-server You can get information on how to open an issue for this project with:npm bugs reactjs Or if that isn't available, you can get their info via: npm owner ls reactjs There is likely additional logging output above.
npm ERR! node v6.10.2
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! reactjs#1.0.0 it: `webpack-dev-server`
npm ERR! Exit status 1
My Webpack.config.js
var path = require("webpack");
module.exports = {
entry: "./script.js",
output: {
path: path.resolve(__dirname, + "/build"),
filename: "index.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "react"]
}
}
]
}
}
package.json
{
"name": "reactjs",
"version": "1.0.0",
"description": "Starter kit for React course by Jack",
"main": "index.js",
"scripts": {
"it": "webpack-dev-server", "<----- something wrong here"
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "VladBelo",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
"babel-preset-react": "^6.23.0",
"eslint": "^3.19.0",
"eslint-plugin-react": "^7.0.0",
"webpack": "^2.4.2"
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
}
}
Looks like webpack-dev-erver isn't installed. Please install it globally and retry.
In commandline, install Webpack Dev Server via
npm install --save webpack-dev-server

Error with watchify when trying to execute npm run watch

Good day, i'm currently doing a tutorial on scotch.io where i'm trying to make a music player using electron and react, but when i try to execute 'npm run watch' i get this error message:
electron-quick-start#1.0.0 watch: watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the electron-quick-start#1.0.0 watch script 'watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose'.
npm ERR! This is most likely a problem with the electron-quick-start package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs electron-quick-start
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls electron-quick-start
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Alejandro\Documents\Proyectos\music-player\npm-debug.log
This is my package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron .",
"watch": "watchify app/app.js -t babelify -o public/js/bundle.js --debug --verbose"
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron/electron-quick-start.git"
},
"keywords": [
"Electron",
"quick",
"start",
"tutorial"
],
"author": "GitHub",
"license": "CC0-1.0",
"bugs": {
"url": "https://github.com/electron/electron-quick-start/issues"
},
"homepage": "https://github.com/electron/electron-quick-start#readme",
"devDependencies": {
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"electron-prebuilt": "^1.2.0"
},
"dependencies": {
"axios": "^0.13.1",
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"classnames": "^2.2.5",
"electron-prebuilt": "^1.2.7",
"electron-reload": "^1.0.0",
"jquery": "^3.1.0",
"react": "^15.2.1",
"react-autocomplete": "^1.0.1",
"react-dom": "^15.2.1",
"react-sound": "^0.5.0",
"soundmanager2": "^2.97.20150601-a"
}
}
From what i've read in the tutorial browserify is supposed to come with watchify as well, however when i installed it as a separate module it worked but then i got the following error:
console.error("SyntaxError: C:/Users/Alejandro/Documents/Proyectos/music-player/app/app.js: Unexpected token (12:10) while parsing file: C:\Users\Alejandro\Documents\Proyectos\music-player\app\app.js");
I used the same tutorial, but I could not get everything working by applying the code snippets from the tutorial.
Do this instead:
install both browserify and watchify:
npm install -g browserify watchify
clone the author's music player github repository instead of electron-quick-start. Then add or modify the tutorial code snippets.

Categories