I'm trying to follow a tutorial and i continue running into an error with has to do with the script.

I've restarted the tutorial to try to make sure I didn't miss anything however I've hit the same road block. I'm on a mac in pycharm.

So far in the tutorial (its off of udemy)we have installed the webpack-cli, webpack, and created a test.js file to see if importing and exporting modules work.

test.js

console.log('imported module');

export default

Index.js

// Global app controller

import num from './test';

console.log(`I imported ${num} from another module`);

package.json

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.2"
  },
  "scripts": {
    "dev": "webpack"
  },
  "author": "Christopher Maltez",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
      path: path.resolve(__dirname,'dist/js'),
      filename: 'bundle.js'
    },
    mode: 'development'
};

and here is the error log.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/mysql/bin/:/usr/local/mysql/bin/
9 verbose lifecycle [email protected]~dev: CWD: /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
10 silly lifecycle [email protected]~dev: Args: [ '-c', 'webpack' ]
11 info lifecycle [email protected]~dev: Failed to exec dev script
12 verbose stack Error: [email protected] dev: `webpack`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at emitTwo (events.js:126:13)
12 verbose stack     at ChildProcess.emit (events.js:214:7)
12 verbose stack     at maybeClose (internal/child_process.js:925:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid [email protected]
14 verbose cwd /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
15 verbose Darwin 17.5.0
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
17 verbose node v8.11.2
18 verbose npm  v6.1.0
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] dev: `webpack`
23 error spawn ENOENT
24 error Failed at the [email protected] dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Here is a snippet of my file structure where I think is the problem.

I'm trying to follow a tutorial and i continue running into an error with has to do with the script.

I've restarted the tutorial to try to make sure I didn't miss anything however I've hit the same road block. I'm on a mac in pycharm.

So far in the tutorial (its off of udemy)we have installed the webpack-cli, webpack, and created a test.js file to see if importing and exporting modules work.

test.js

console.log('imported module');

export default

Index.js

// Global app controller

import num from './test';

console.log(`I imported ${num} from another module`);

package.json

{
  "name": "forkify",
  "version": "1.0.0",
  "description": "forkify project",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.11.1",
    "webpack-cli": "^3.0.2"
  },
  "scripts": {
    "dev": "webpack"
  },
  "author": "Christopher Maltez",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/js/index.js',
    output: {
      path: path.resolve(__dirname,'dist/js'),
      filename: 'bundle.js'
    },
    mode: 'development'
};

and here is the error log.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Users/chrismaltez/anaconda3/bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/mysql/bin/:/usr/local/mysql/bin/
9 verbose lifecycle [email protected]~dev: CWD: /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
10 silly lifecycle [email protected]~dev: Args: [ '-c', 'webpack' ]
11 info lifecycle [email protected]~dev: Failed to exec dev script
12 verbose stack Error: [email protected] dev: `webpack`
12 verbose stack spawn ENOENT
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:48:18)
12 verbose stack     at emitTwo (events.js:126:13)
12 verbose stack     at ChildProcess.emit (events.js:214:7)
12 verbose stack     at maybeClose (internal/child_process.js:925:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
13 verbose pkgid [email protected]
14 verbose cwd /Users/chrismaltez/Desktop/pycharmprojects/UDEMY/JS-Udemy/Section 9: forkify/9-forkify-starter
15 verbose Darwin 17.5.0
16 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
17 verbose node v8.11.2
18 verbose npm  v6.1.0
19 error file sh
20 error code ELIFECYCLE
21 error errno ENOENT
22 error syscall spawn
23 error [email protected] dev: `webpack`
23 error spawn ENOENT
24 error Failed at the [email protected] dev script.
24 error This is probably not a problem with npm. There is likely additional logging output above.
25 verbose exit [ 1, true ]

Here is a snippet of my file structure where I think is the problem.

• javascript
• node.js
• npm
• webpack

• is 'webpack' installed globally or locally. Node is not finding 'webpack' – Robert Rowntree Commented Jun 6, 2018 at 15:19
• By his package.json @RobertRowntree it is locally. He might have global and local, try removing all instances of webpack that you have. – PlayMa256 Commented Jun 6, 2018 at 16:44
• I just removed local and global versions and tried npm install webpack --save-dev . now when i try to run npm run dev, i get sh: webpack: command not found along with npm ERR! Failed at the [email protected] dev script. – Cflux Commented Jun 7, 2018 at 15:47

3 Answers 3

a friend and I figured it out. Weirdly enough, I had to use the command: npm link webpack to link it in from the global dependencies. Once that worked, i unlinked and then ran npm install webpack --save-dev and after that it started working. i dont know why it wasnt finding it from the local dependencies from when i had originally installed it.

Thank you all for your help.

update

the same thing just happened with: npm install webpack-dev-server --save-dev

i think it might have something to do with me potentially not being admin. everytime i have to install I have to enter sudo i thought i only had to do that if i wasnt the admin. Feel free to enlighten me about that.

I'm also following the same tutorial and had the same issue.

I tried all the above solutions and nothing worked.

I also tried what Jonas said on "Note lecture 133" to use the new updated command line, which also didn't work before his "lecture 134" about webpacks:

npm install --save-dev webpack@4 webpack-cli@2 webpack-dev-server@3

So, heres how I got npm run devworking:

If you watched carefully on "Lecture 134 and 135" Jonas was using webpack 4.2.0, webpack-cli 2.0.12 and there wasn't any webpack-dev-server installed either.

If you installed webpack previously, do the following:

On terminal, cd to the directory of the "9-forrkify" folder where you installed webpack and run the follow commands to uninstall webpack:

npm uninstall webpack-dev-server --save

npm uninstall webpack-cli --save

npm uninstall webpack --save

To install webpack correctly to follow along the tutorial, run the command:

npm install --save-dev [email protected] [email protected] [email protected]

npm run dev should work now properly with no errors at the console on chrome web browser.

For anyone that curious what tutorial we are all talking about:

"The Complete JavaScript Course 2020: Build Real Projects!" Here is the link: https://www.udemy.com/course/the-complete-javascript-course/

EDIT: For some reason my answer was downvoted, but it actually works. Give it a try.

I believe the problem is that you're trying to use webpack but it's not installed globally. You should be able to fix this by using npx (a tool that comes installed with npm) to execute a locally installed package.

In your package.json, try changing:

"scripts": {
    "dev": "webpack"
 }

To this:

"scripts": {
    "dev": "npx webpack"
}

Let me know if this solves your problem!