Module build failed error enoent no such file or directory open

I'm getting this error from my Node.js application: ENOENT, no such file or directory '~/Desktop/MyApp/newversion/partials/navigation.jade' I know the file is there because when I try to open the...

I’m getting this error from my Node.js application:

ENOENT, no such file or directory ‘~/Desktop/MyApp/newversion/partials/navigation.jade’

I know the file is there because when I try to open the file using the exact copied and pasted path, it works. I also know the application is using the right directory because, well, it outputs it in the error.

Peter Mortensen's user avatar

asked Dec 24, 2013 at 1:16

Kinnard Hockenhull's user avatar

1

I believe the previous answer is the correct answer to this problem but I was getting this error when I tried installing npm package (see below):

Enter image description here

The fix for me was: npm init --yes

Enter image description here

Peter Mortensen's user avatar

answered Jun 5, 2016 at 19:16

grepit's user avatar

2

Tilde expansion is a shell thing. Write the proper pathname (probably /home/yourusername/Desktop/etcetcetc) or use
process.env.HOME + '/Desktop/blahblahblah'

answered Dec 24, 2013 at 1:18

hobbs's user avatar

hobbshobbs

217k18 gold badges206 silver badges286 bronze badges

4

I was also plagued by this error, and after trying all the other answers, magically found the following solution:

Delete file package-lock.json and the node_modules folder, and then run npm install again.

If that doesn’t work, try running these in order:

npm install
npm cache clean --force
npm install -g npm
npm install

(taken from @Thisuri’s answer and @Mathias Falci’s comment respectively)

And then re-deleting the above files and rerunning npm install.

It worked for me!

Peter Mortensen's user avatar

answered Dec 11, 2019 at 13:33

half of a glazier's user avatar

1

  1. First try npm install. If the issue is not yet fixed, try the following one after the other.
  2. npm cache clean, then
  3. npm install -g npm , then
    npm install. Finally
  4. ng serve --o to run the project.

Peter Mortensen's user avatar

answered Sep 29, 2018 at 8:31

Thisuri's user avatar

ThisuriThisuri

3893 silver badges5 bronze badges

2

I had that issue using the path module:

const path = require('path');

And also do not forget to create the uploads directory first period.

Peter Mortensen's user avatar

answered Apr 27, 2018 at 16:38

Sanjay's user avatar

SanjaySanjay

8181 gold badge14 silver badges21 bronze badges

3

Specifically, rm yarn.lock and then yarn install fixed this for me.

answered Aug 28, 2020 at 1:46

Fillip Peyton's user avatar

Fillip PeytonFillip Peyton

3,5882 gold badges30 silver badges59 bronze badges

For those running Laravel Mix with npm run watch, just terminate the script and run the command again.

Peter Mortensen's user avatar

answered Oct 1, 2018 at 6:40

Earl Lapura's user avatar

Earl LapuraEarl Lapura

1652 silver badges12 bronze badges

1

For me, it had my code folder in Dropbox on Windows 10. During the build process Dropbox would flip out over having more than 500,000 files. I moved my folder out and now it builds fine!

Peter Mortensen's user avatar

answered Feb 20, 2020 at 6:23

sfscs's user avatar

sfscssfscs

5154 silver badges8 bronze badges

When this happened to me, it was when trying to run Karma tests in an Angular project. The tsconfig.spec.js file turned out to be incorrect. It was basically pointing to the wrong directory, and so the error was simply trying to tell me this.

Enter image description here

For example, we had ../tsconfig.json instead of ./tsconfig.json, so the runner was looking for tests in the wrong folder. This may be a different use case from the OP, but the same error message brought me here and led me down the rabbit hole of trying the npm install solutions to no avail.

Peter Mortensen's user avatar

answered Dec 23, 2021 at 15:57

Adam Hughes's user avatar

Adam HughesAdam Hughes

13.8k11 gold badges76 silver badges119 bronze badges

It usually occurs due to a mismatch in the npm version used while creating the package-lock.json that currently exist and the one you are using now.

Removing the package-lock.json and running npm install worked for me.

Peter Mortensen's user avatar

answered Jul 25, 2022 at 20:20

karanpreet singh wadhwa's user avatar

1

Sometimes you are just not in the right directory. Check that once and try «npm start» again.

Peter Mortensen's user avatar

answered Jul 31, 2022 at 9:26

Sachin's user avatar

SachinSachin

1461 silver badge4 bronze badges

Reason: I have the same issue, where a few guys work on one project and change package dependencies.

Solution: Just kill file package-lock.json and run npm i again

answered Sep 14, 2021 at 8:11

Aleksei Burov's user avatar

In my case, I was running the terminal in the wrong folder. Please make sure that you navigate to the folder containing your code (App.js and others) and then use a command prompt (for Windows) to open the code. I am using Visual Studio Code, so it is to type «code.» after I have opened the command prompt in the exact folder where my code is in.

Peter Mortensen's user avatar

answered Jan 2, 2022 at 0:08

AnatuGreen's user avatar

AnatuGreenAnatuGreen

4213 silver badges13 bronze badges

1

I ran into this upgrading a Phoenix app to 1.6, which does not use Node.js, so in fact it is not needed. However, elixir_buildpack.config had a reference to phoenix_static_buildpack.config, which defined node. Remove the reference, and the error goes away.

Peter Mortensen's user avatar

answered Aug 18, 2022 at 18:51

Arni Mikelsons's user avatar

My problem was that I didn’t have a package.json file in my working directory.

Peter Mortensen's user avatar

answered Nov 2, 2022 at 8:27

tolache's user avatar

tolachetolache

1681 gold badge1 silver badge11 bronze badges

Another possibility is that you are missing an .npmrc file if you are pulling any packages that are not publicly available.

You will need to add an .npmrc file at the root directory and add the private/internal registry inside of the .npmrc file like this:

registry=http://private.package.source/secret/npm-packages/

answered May 17, 2019 at 16:13

maxshuty's user avatar

maxshutymaxshuty

8,92313 gold badges58 silver badges75 bronze badges

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

@vijaydeepak-tt

image

@vijaydeepak-tt

please anyone help me to solve this error

@rahulFortunekit

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open ‘/home/rahul/Desktop/rahulm/ionic-apiai/node_modules/api-ai-javascript/index.js.map’
at Object. (vendor.js:122997)
at webpack_require (bootstrap 02664e76ef32b3920af0:54)
at Object.193 (main.js:44)
at webpack_require (bootstrap 02664e76ef32b3920af0:54)
at Object.268 (app.module.ts:38)
at webpack_require (bootstrap 02664e76ef32b3920af0:54)
at Object.217 (main.ts:5)
at webpack_require (bootstrap 02664e76ef32b3920af0:54)
at Object.194 (main.js:105)
at webpack_require (bootstrap 02664e76ef32b3920af0:54)

Same issue,please help in this case or give me alternatives

@vijaydeepak-tt

create index.js.map inside of it, it will be resolved. For my project, it worked.

@rahulFortunekit

How did you solved this ??

@vijaydeepak-tt

I have just created the empty index.js.map file inside the node_modules at the path where the is file missing error is shown. you just create the index.js.map file inside the dialogflow-javascript-client node_module packager

@eyesurewould

I just received the same error for ./node_modules/rxjs/_esm5/index.js which DOES exist. I simply touched the file and then the error went away and the compile worked.

Hope that helps someone.

elemee3, anazz, justinemailone, abdelsalamshahlol, MonirTuhin, mbenhalima, shaneogrady, OmarJalil, Link184, harrisoncramer, and 56 more reacted with thumbs up emoji
Moji0098, jcholewa, Erikang20, uncannyRishabh, and dickm19 reacted with thumbs down emoji
justinemailone, YasiTL, justtal, Ota-kun, arnoe, trantuanngoctn97, amonkonanBYF, cioccarellia, whoismuch, and DilawarAziz reacted with hooray emoji
Joel-INTO, rajguruayushi58, mbWOYS, milantarami, httpamit, Ggendler, dimasliva, danielvzh, and DilawarAziz reacted with confused emoji
abdelsalamshahlol, Joel-INTO, ariellevitsky, lukeholder, arnoe, swikars1, sagar-ze, amonkonanBYF, sfmajors373, Stapower, and 6 more reacted with heart emoji
codersahil, dimazhornyk, whoismuch, xoriant-vikas, danielvzh, and DilawarAziz reacted with rocket emoji
danielvzh and DilawarAziz reacted with eyes emoji

@Pixelwelder

So I appreciate that the above solution works, but… could someone please explain WHY it works?

@cjlaborde

This one worked for me.
npm rebuild node-sass

zeeshan-mehdi, 4b11b4, graham-saunders, visalvarghesercggs, nats12, shalonteoh, schleimer, shiralizadeh, sxue1024, JChitando, and 18 more reacted with thumbs up emoji
37166121, ashleighc207, Phongtesla, and Mounika2k15 reacted with laugh emoji
37166121, karthik110893, ashleighc207, Mounika2k15, and Extriple reacted with hooray emoji
4b11b4, graham-saunders, visalvarghesercggs, shiralizadeh, sebastianandrada, 37166121, markrajGT, ashleighc207, HammadAhmad196, jumorap, and 2 more reacted with heart emoji
37166121, JamezGr, ashleighc207, and Mounika2k15 reacted with rocket emoji

@dangelion

Delete node_modules folder and re-run npm install (or yarn)

exadavid, smadhumitha11, kunaltyagi9, mmcgraw73, sajidBreezeMaxWeb, JTD2017, bjax13, dbvphuong, Nelsonfrank, aadiene, and 44 more reacted with thumbs up emoji
alfredrafael, matraattila, and AmmarSiddiqi reacted with laugh emoji
sajidBreezeMaxWeb, zinetnorf, bjax13, CyrilleBB, chestno2, uwayezujb, Lawrence-ctrl, jadex1vaninja, alonsoua, abijithmg, and 4 more reacted with hooray emoji
leemcmullen reacted with confused emoji
sajidBreezeMaxWeb, bjax13, Nelsonfrank, AyaHajAmor, pedrobrf, Lawrence-ctrl, lionelkimbs, alfredrafael, samerabooda, cprasad-eightfold, and 2 more reacted with heart emoji
OmaarElAmri, sajidBreezeMaxWeb, bjax13, draganaaz, X3rom-S, Lawrence-ctrl, alfredrafael, and ObaidUr-Rahmaan reacted with rocket emoji
AyaHajAmor, bassbiteye, RowinChalas, alexeytra, Lawrence-ctrl, nabeel-sajid-qbatch, PedroCollin, alfredrafael, and bahosss reacted with eyes emoji

@sfmajors373

@eyesurewould This fixed it for me too!

Can someone explain why this worked???

@Diex

I think it has to do with how the compiler runs. I didn’t try but for shure if you stop ng serve and run it again it will work. it always happens when you update modules.
when you touch the file, the compiler knows it has to recompile that file. either way you fall into that error.

@shiralizadeh

@houss-x

./node_modules/@angular/localize/fesm2015/init.js
Module build failed: Error
i think it’s the same but i try all solutions and nothing happend

@mohak08

@eyesurewould worked the same way for me. Just had to touch the existing file

@DikshantNiraula

npm install whatever package is missing or delete node_module and npm install

@Firdaus85

@houss-x
try running npm install @angular/localize —save

@SoftwareEngineerPalace

I just received the same error for ./node_modules/rxjs/_esm5/index.js which DOES exist. I simply touched the file and then the error went away and the compile worked.

Hope that helps someone.

what’s «touched the file»

@Diex

@EnzoPujol

Delete node_modules folder and re-run npm install (or yarn)

This worked for me in Vue.js

@rabia201

@akapei

npm update should do the trick. No deleting required.

@Sanyalak-T

@Tochi-Nwachukwu

I had to install framer version 4.1.17.

First I ran

npm uninstall framer

then ran

npm install framer-motion@4.1.17

I then deleted node modules and installed all the dependencies using

npm install

That worked for me

@OkuraToshi

Hello.
How did you solve this issue?

@Dhanush-2605

I just restarted the application it works for me.

@zhanghuize-git

@Dhanush-2605

@Mark-777-0

@addi786

Hi there everyone!

I have read most of the comments but could not find any solution.
For me

  1. First uninstall the previous version of framer-motion
  2. Install framer-motion@6.2.8

How to do this?

To uninstall
For Yarn yarn remove framer-motion and For npm npm uninstall framer-motion
To install
For Yarn yarn add framer-motion@6.2.8 and For npm npm install framer-motion@6.2.8

I hope your problem will be solved because this works on my project.

@Prince7195 Checkout this solution.

@sekhar094

create index.js.map inside of it, it will be resolved. For my project, it worked.

thank you so much :)

I’m submitting a . (check one with «x»)
[ ] bug report
[ ] feature request
[x] support request

Current behavior:
Main.js not include the compiled Sourcecode and keep somekind empty (there is a template). And if i start the app i get:

The buildprocess does not create an error. Its seem all fine. I can compile the project in https://hub.docker.com/r/beevelop/ionic/ and all is fine. So there must be some dependency from ionic i crash, how can i get information about this? Is there a good verbose mode to see there Outputs.
I tried to find the error so my experience:

I am not common with node, ts or ionic, so i must ask. I searching for verbose output, folder where transpile create the js files and other usabel informations to fix the problem.

Thanks for the help.

I’m submitting a . (check one with «x»)
[ ] bug report
[ ] feature request
[x] support request

Current behavior:
Main.js not include the compiled Sourcecode and keep somekind empty (there is a template). And if i start the app i get:

The buildprocess does not create an error. Its seem all fine. I can compile the project in https://hub.docker.com/r/beevelop/ionic/ and all is fine. So there must be some dependency from ionic i crash, how can i get information about this? Is there a good verbose mode to see there Outputs.
I tried to find the error so my experience:

I am not common with node, ts or ionic, so i must ask. I searching for verbose output, folder where transpile create the js files and other usabel informations to fix the problem.

Thanks for the help.

[built] [failed] [1 error]
+ 2815 hidden modules

ERROR in ./node_modules/@material-ui/core/node_modules/react-event-listener/dist/react-event-listener.cjs.js
Module build failed: Error: ENOENT: no such file or directory, open ‘/Users/kunal/src/node_modules/@material-ui/core/node_modules/react-event-listener/dist/react-event-listener.cjs.js’
@ ./node_modules/@material-ui/core/ClickAwayListener/ClickAwayListener.js 30:49-80
@ ./node_modules/@material-ui/core/ClickAwayListener/index.js
@ ./node_modules/@material-ui/core/index.es.js
@ ./app/components/Home/Navtab.js
@ ./app/components/Home/index.js
@ ./app/components/App.js
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8648 ./app/index.js

ERROR in ./node_modules/@material-ui/core/node_modules/warning/warning.js
Module build failed: Error: ENOENT: no such file or directory, open ‘/Users/kunal/src/node_modules/@material-ui/core/node_modules/warning/warning.js’
@ ./node_modules/@material-ui/core/styles/createGenerateClassName.js 10:38-56
@ ./node_modules/@material-ui/core/styles/index.js
@ ./app/components/App.js
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8648 ./app/index.js

ERROR in ./node_modules/@material-ui/icons/node_modules/recompose/pure.js
Module build failed: Error: ENOENT: no such file or directory, open ‘/Users/kunal/src/node_modules/@material-ui/icons/node_modules/recompose/pure.js’
@ ./node_modules/@material-ui/icons/utils/createSvgIcon.js 12:35-60
@ ./node_modules/@material-ui/icons/AccessAlarm.js
@ ./node_modules/@material-ui/icons/index.es.js
@ ./app/components/App.js
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8648 ./app/index.js

ERROR in ./node_modules/react-event-listener/lib/index.js
Module build failed: Error: ENOENT: no such file or directory, open ‘/Users/kunal/src/node_modules/react-event-listener/lib/index.js’
@ ./node_modules/material-ui/utils/ClickAwayListener.js 47:26-57
@ ./node_modules/material-ui/index.es.js
@ ./app/components/VenueMaster/venuemaster.js
@ ./app/components/Home/index.js
@ ./app/components/App.js
@ ./app/index.js
@ multi (webpack)-dev-server/client?http://0.0.0.0:8648 ./app/index.js
Child html-webpack-plugin for «index.html»:
1 asset

The text was updated successfully, but these errors were encountered:

Источник

object-assign: no such file or directory #207

Module build failed: Error: ENOENT: no such file or directory, open ‘/home/anoru/git/project/object-assign’

The text was updated successfully, but these errors were encountered:

As mentioned in the other issue, downgrading to 8.0.2 solves it, so it seems to be related to the addition of jspm support.

I’m also experiencing this issue. I don’t use HMR, but this occurs when running my CSS and JS gulp tasks in parallel.

Running either task by itself works fine, but running them in parallel results in all sorts of module loading errors like this one. The errors are inconsistent from one run to the next, but it seems like postcss-import’s jspm support is doing something that breaks module resolution for other code running in the same process. I can confirm that downgrading to 8.0.2 resolves the issue.

object-assign is included as a normal dependency of this package and require() reference is normal too. I guess the recent add by @swernerx broke something. @swernerx any idea?

object-assign is the first dependency used in the code. There is nothing wrong with it, and it’s not actually missing, but the resolution of dependencies seems to happen at the root of the userland project — and node_modules is not considered. If I symlink object-assign from node_modules/ into the root project dir, then it’s found and the next dependency fails.

Not much to go on for now, sorry. I haven’t even triaged whether the problem is within webpack/postcss/babel — just that the resolving issue doesn’t happen with 8.1.0 and happens with 8.1.1/2

Puh, that looks like a though one. I am actually not sure where this is coming from.

Especially the timing / race condition / parallel related comments make me wonder what is actually happen here.

«object-assign» is not used by «pkg-resolve» at all. But as I understood it’s not really related to this package but to some kind of setup of the environment (looking in the wrong paths). «pkg-resolve» uses both «jspm» and «npm» to resolve packages. Probably there is some issue that the npm resolver is not actually able to work in parallel with two different setups?

We first have to identify were this error is thrown from. Anybody has some stack trace or reproducable code fragment? I can’t see it here — even when running some tasks in parallel in Gulp.

Источник

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, scandir ‘**node_modulesnode-sassvendor’ #6032

Hi, There was an error occured in my chrome on windows 10 x64 when I run yarn start successfully.

Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, scandir ‘H:playgroundangularmanager-demonode_modulesnode-sassvendor’ at Object.fs.readdirSync (fs.js:909:18) at Object.getInstalledBinaries (H:playgroundangularmanager-demonode_modulesnode-sasslibextensions.js:124:13)
but the folder vendor and the binary file binding.node did exist.

steps to reproduce the error

just follow the JHipster Quick Start and choose sass configuration
yarn start

JHipster Version(s)

JHipster version: 4.5.6

JHipster Version(s)
JHipster configuration, a .yo-rc.json file generated in the root folder
Entity configuration(s) entityName.json files generated in the .jhipster directory

ls: no such file or directory: .jhipster/*.json

Browsers and Operating System

java version «1.8.0_101»
Java(TM) SE Runtime Environment (build 1.8.0_101-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.101-b13, mixed mode)

git version 2.13.0.windows.1

Browsers and Operating System

browser: chrome x64 59.0.3071.86
os: windows 10 x64

  • [x ] Checking this box is mandatory (this is just to show you read everything)

The text was updated successfully, but these errors were encountered:

Maybe a network issue, can you delete your node_modules folder and try again?

I tried several times on my windows pc. and the same project did works on my mac pro.

I’m sorry I can’t reproduce on my MacBook Pro, either with version v4.5.6 or on the latest master branch.
Are you located in China? I think there are issues downloading this with the great firewall, I’ve seen people using alternative download locations for that.

I’m sure of that it was not a network issue. It did worked fine on my Mac pro.
the issue only occurred on my window pc.

Oh sorry I read too fast, I thought it also failed on your Macbook Pro.
Then this is just a node-sass installation issue on Windows -> have a look at https://github.com/sass/node-sass there are detailed instructions on this. It’s quite annoying to use on Windows as that’s a native package.

@jdubois but I compiled the node-sass successfully.

Seeing sass/node-sass#1387 this seems like a common issue in fact

I had tried all of these solutions, it doesn’t work for me. Maybe I should find a way that how to debug the webpack.

@Iancurtis I use to have issues with node-sass binding in Windows as well when node-gyp was not installed properly. Are you sure you have node-gyp installed properly else please check that as well? In either case, I think you have much better chance of finding help in Stackoverflow or node-sass repo forums than here

@deepu105 thanks, but I have several projects with node-sass works fine on my windows pc.

We dont do anything special for node-sass, we just use it as a dependency. So I’m not sure how we can help you here

Thanks anyway , I’ll find a way to address this issue.

@jdubois @deepu105 yarn start didn’t recompile the vendor.dll.js, so run yarn cleanup to solve it.

@Iancurtis we got rid of vendor.dll.js in the next version

@lancurtis run npm rebuild node-sass

@lmcardle Life saver. That worked perfectly.

@lmcardle thanks! It’s very useful

Hey, I ran into this issue from a different point of view (again). My case was, that I could workaround this issue all the time using the command from @lmcardle, but this didn’t help me inside our CI/CD platform, as gradle is doing the packaging. I struggled some hours and ended up with this solution: rails/webpacker#422

And this got me rid of this very annoying one. Maybe considering a PR this to all yarn + sass setups?

@xetys the real reason for the issue is when you have different nodeJS versions (exact version) in the gradle config and your OS, so whichever version triggers the install will bind the binary to it and if you try to run it using another node version it will fail. I also used to get this issue in the past, but now I always keep my gradle node version in sync with my installed node version and I have never encountered the issue. So i’m not sure if another postInstall step is needed for this. What I dont understand is how you get this in a CI/CD if you are only using Gradle for all commands. The only possibility is if you are running yarn install manullay before doing gradle actions. In that case just make sure the CI/CD uses exact same Node version as the Gradle properties

I didn’t know that and I encounter this issue every day with our registry (an old version) in my project. Our Jenkins build without problem.
That explains everything ! Thanks @deepu105 : should we document that ? A simple note to SASS option

Another possibility for those who don’t use sass directly could be to use —ignore-scripts flags for npm install or yarn install . This way the node-sass postinstall script would not trigger.

closing this as its an environment issue

thanks deepu, I didn’t know this and it happened again and again sometimes and was super annoying.

@lancurtis run npm rebuild node-sass

It helped much really

i had the same i ssue, i syncronize project in my editor then npm start it works

Accidently, I found that I was importing a file in 2 components, I deleted the file, and removed it from ONE of the components. Until I found that it has been imported in a child component as well. Once I deleted the import line from my 2nd component, it worked fine!

Hope it helps someone!!

@elharony did the same mistake just required to uncomment or delete those imports thanks for the help.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

1. Purpose

In this post, I would demo how to solve the below error when we running npm run dev in a vue.js project:

➜  vue-admin git:(master) ✗ npm run dev            

> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 15% building modules 42/85 modules 43 active ...wen/js-projects/vue-admin/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 94% asset optimization                                                                 

 ERROR  Failed to compile with 10 errors                                                                                             2:32:56 PM

 error  in ./src/style/index.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./src/style/index.scss 4:14-201 13:3-17:5 14:22-209
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/login/index.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-37dfd6fc","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/login/index.vue 4:14-383 13:3-17:5 14:22-391
 @ ./src/views/login/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/style/sidebar.scss

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./src/style/sidebar.scss 4:14-203 13:3-17:5 14:22-211
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/Layout/components/Sidebar/SidebarItem.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5564c0ff","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/Layout/components/Sidebar/SidebarItem.vue 4:14-401 13:3-17:5 14:22-409
 @ ./src/Layout/components/Sidebar/SidebarItem.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/dashboard/index.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-106c86ed","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/dashboard/index.vue 4:14-383 13:3-17:5 14:22-391
 @ ./src/views/dashboard/index.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/configManage/backup.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-5576c260","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/configManage/backup.vue 4:14-384 13:3-17:5 14:22-392
 @ ./src/views/configManage/backup.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/configManage/cluster.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-558d6568","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/configManage/cluster.vue 4:14-385 13:3-17:5 14:22-393
 @ ./src/views/configManage/cluster.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/routerManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-27a78e28","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/user/routerManage.vue 4:14-390 13:3-17:5 14:22-398
 @ ./src/views/user/routerManage.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/roleManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f75a48d6","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/user/roleManage.vue 4:14-388 13:3-17:5 14:22-396
 @ ./src/views/user/roleManage.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 error  in ./src/views/user/userManage.vue

Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'
    at Object.readdirSync (fs.js:854:3)
    at Object.getInstalledBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/extensions.js:133:13)
    at foundBinariesList (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:20:15)
    at foundBinaries (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:15:5)
    at Object.module.exports.missingBinary (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/errors.js:45:5)
    at module.exports (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/binding.js:15:30)
    at Object.<anonymous> (/Users/bswen/js-projects/vue-admin/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Module.require (internal/modules/cjs/loader.js:852:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at getDefaultSassImpl (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:198:10)
    at Object.loader (/Users/bswen/js-projects/vue-admin/node_modules/sass-loader/dist/index.js:80:29)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-3db9e0aa","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/user/userManage.vue 4:14-388 13:3-17:5 14:22-396
 @ ./src/views/user/userManage.vue
 @ ./src ^./.*$
 @ ./src/store/modules/app.js
 @ ./src/store/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

2. Environment

  • Mac OS 10.15
  • Visual Source Code
  • npm 7.11.2

3. The solution

3.1 What does this error mean?

The key error line is:

Module build failed: Error: ENOENT: no such file or directory

Look at the following directory.

scandir '/Users/bswen/js-projects/vue-admin/node_modules/node-sass/vendor'

There is a problem with the vendor under node-sass under node_modules in my local node_modules directory. So, we should generate the node-sass/vendor directory.

3.2 Rebuild the node-sass/vendor directory

We rebuild the directory like this: (execute the command in the root of your project)

What does the above command mean?

Before we dive into node-sass, we should know what is sass, according to this article, the sass is:

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Sass contains two syntaxes. The older syntax uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like CSS. It uses braces to denote code blocks and semicolons to separate lines within a block.

The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.

In short, sass is a script for css. Then what is node-sass?

Node-sass is a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows us to natively compile SCSS files to CSS

In short, node-sass is a compiler for scss, it can compile it to css.

image-20210507161140419

So , node-sass is just a library(package), we can rebuild it if it has some problems:

What happens when running npm rebuild xxx?

This command runs the npm build command on the matched folders. This is useful when you install a new version of node, and must recompile all your C++ addons with the new binary. It is also useful when installing with --ignore-scripts and --no-bin-links, to explicitly choose which packages to build and/or link bins.

If one or more package names (and optionally version ranges) are provided, then only packages with a name and version matching one of the specifiers will be rebuilt.

What’s the difference between npm build and npm rebuild?

npm install: It is obvious that npm install is used to install packages using the package.json file, this command also installs the other packages on which the packages (in package.json) are dependent. On the backside, this command uses the npm build which helps to build the packages you are installing.

npm rebuild: As the name rebuild, this command again builds the packages, used only when you upgrade the node version and must recompile all your C++ addons with the new binary.

by Gaurav Paliwal

3.3 ReRun the app

Now we can re-run our app like this:

 ➜  vue-admin git:(master) ✗ npm run dev      

> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 14% building modules 39/85 modules 46 active ...wen/js-projects/vue-admin/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                           

 DONE  Compiled successfully in 10586ms                                                                                                14:51:16

 I  Your application is running here: http://localhost:8080

Now it works!

4. Summary

In this post, I demonstrated how to solve ‘Module build failed: Error: ENOENT: no such file or directory’ error when using npm run dev to run a webpack js project.

React & Webpack logos

There’s a great Redux Fundamentals course over on Pluralsight – but some (including myself) have probably encountered a frustrating error that doesn’t appear to happen in the course.

A webpack imported module error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
    at Object.<anonymous> (Context.js:4)
    at Object.<anonymous> (bundle.js:704)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (react-is.production.min.js:15)
    at Object.<anonymous> (bundle.js:24683)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (bundle.js:25227)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)
    at Object.<anonymous> (main.js:3)
    at __webpack_require__ (bootstrap b78e52de2bfadc5fd934:19)

This results in a sad page when you run npm start:

The Solution

This is a known bug in the version of React (16.0.0) being used in the course.

Updating React and React-Dom should resolve the error for you.

Head to package.json and you should find React and React DOM:

    "react": "16.0.0",
    "react-dom": "16.0.0",

Add a caret to the beginning of both of these dependencies to upgrade to the latest minor and patch versions:

    "react": "^16.0.0",
    "react-dom": "^16.0.0",

Now run the npm update command for these dependencies:

npm update react react-dom

NPM will whirl away in the background and you’ll be updated to the latest minor and patch versions available.

    "react": "^16.13.1",
    "react-dom": "^16.13.1",

Currently these are 16.13.1, but I don’t anticipate any issues upgrading to further 16.x versions of both dependencies.

If you are encountering any issues, I have tested with the versions above and you can update your package.json to use these exact versions which will solve the problem:

    "react": "16.13.1",
    "react-dom": "16.13.1",

Refresh now, and voilá!

Still Not Working?

After updating the React and React-Dom modules, if you see an error regarding module build failure such as this:

utils.js:303 Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open 'C:ps-redux-funamentalsnode_modulesreactindex.js'
    at Object.<anonymous> (utils.js:303)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at Object.<anonymous> (main.js:1)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at Object.<anonymous> (harmony-module.js:24)
    at __webpack_require__ (bootstrap e17faa0726616b7a89b0:19)
    at bootstrap e17faa0726616b7a89b0:65
    at bootstrap e17faa0726616b7a89b0:65

It’s likely you’ve not restarted after upgrading the modules. Kill your current localhost server/npm start command and retry npm start in the terminal window.

Понравилась статья? Поделить с друзьями:
  • Mods cant be deployed vortex как исправить
  • Modprobe error could not insert vboxdrv operation not permitted
  • Modprobe error could not insert exec format error
  • Modoru error your current system software version is not supported ps vita
  • Mmtool error loading rom image 80000001h