Webpacker: Error on webpack:compile - Error: ENOENT: no such file or directory, scandir 'ROOT/node_modules/node-sass/vendor'

[robdimarco]

Details

After upgrading my gem from webpacker 1.2 to webpacker 2.0, I had problems running the webpacker:compile task.

When attempting to compile my JS, I got an error like:

Error: ENOENT: no such file or directory, scandir '/root/project/node_modules/node-sass/vendor'

This results in a webpack failure and thus a failure of the webpacker:compile task.

My Environment

webpacker Gem Version: 2.0
Rails Version: 5.03
Yarn Version: 0.24.5
OS: Ubuntu 14.04.5 LTS

My Workaround

After digging around, I realized that I was bumping in to a yarn bug where node-sass assets seem to get removed after an install.

If you read through the comments in the Yarn bug, it seems to happen when running a yarn install, which the webpacker is doing prior to the compile step.

The workaround in the Yarn bug is to remove the node_modules directory and re-run the install.

I was able to workaround this problem by explicitly deleting the node_modules directory right before webpacker:yarn_install is called.

#
# In my project lib/tasks/webpacker.rake
#
if Rake::Task.task_defined?('webpacker:yarn_install')
  namespace :webpacker do
    task :remove_node_modules do
      $stdout.puts 'Hacky removing of node_modules prior to running install again'
      $stdout.puts 'Related to Yarn bug https://github.com/yarnpkg/yarn/issues/3485'
      $stdout.puts 'Trying to fix node-sass issues'
      `rm -rf node_modules`
    end
  end

  Rake::Task['webpacker:yarn_install'].enhance(['webpacker:remove_node_modules'])
end

Adding this Rake task resolved my issue and I am now compiling correctly, albeit a little slower.

[robdimarco]

Forgot to mention, for the workaround to run the first time, I also had to run yard cache clean on the box prior to running the compile task.

[gauravtiwari]

@robdimarco Yepp this is known bug and we have documented this in the troubleshooting section 👍 - https://github.com/rails/webpacker#troubleshooting

[robdimarco]

@gauravtiwari Thanks for that, did not see it. So something like:

{
  "scripts": {
    "postinstall": "npm rebuild node-sass"
  }
}

in package.json should be sufficient then. Will try that.

[gauravtiwari]

Yepp 👍 - just make sure npm is installed too (if on heroku you have to add ruby and nodejs buildpack)

[gauravtiwari]

The default ruby buildpack with webpacker doesn't have npm installed

[robdimarco]

FWIW, I tried setting up the postinstall hook and this fixed my node-sass problems. However, there were a couple of other packages that were still giving me issues, even if I rebuilt them. So for now, I am sticking with the hacky, hacky removal of the node_modules directory until the upstream Yarn bug is fixed.

Thanks for your help.

[ivanxtr]

I solved running the following

1. sudo npm cache clean -f
2. sudo npm i -g n
3. sudo n stable
4. npm rebuild node-sass

[francovegini]

just make
npm rebuild node-sass

[Muzzamil75]

add this script in package.json.

 "postinstall": "npm rebuild node-sass && npm install --unsafe-perm -f node-sass"

[ManikandanMagi]

Error: ENOENT: no such file or directory, scandir 'C:\Users\ADMIN\Documents\React Js\EPT-Dashboardnode_modulesnode-sass\vendor' how to resolved this?

[Muzzamil75]

Follow these steps !

sudo npm i -f
sudo npm install --unsafe-perm -f node-sass
npm rebuild node-sass --force (optional)