npm run dev script error

Question

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.

Solution 1

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.

Solution 2

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/

Comments

[PlayMa256]

he has webpack in his dependencies, by running that it'll call the local webpack. No need to run global with npx.

[Defacto]

@MatheusSilva npx runs local packages, not global ones. Your misunderstood my answer, it works perfectly.

[Cflux]

okay so i tried the npx way but that didnt do it unfortunately. it then asks me to install either webpack-cli or webpack-command but i already have webpack-cli installed. regardless, i choose webpack-cli in and then i get an error saying { Error: Cannot find module 'webpack-cli' at Function.Module._resolveFilename (module.js:547:15)

[Defacto]

First, make sure webpack is installed: npm install --save-dev webpack. If you're using webpack v4 or later, you'll need to install a CLI, too: npm install --save-dev webpack-cli And in your package.json, change your start script to this: "start": "webpack --config webpack.config.js" where webpack.config.js is your project's webpack configuration file. Let me know if this solves your problem.

[Devender Kumar]

In my case, it was just a typo in webpack config file. Now running fine without downgrading the package versions.