Skip to content
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

Support for node-sass (4.12) version that is compatible with node v12.1.0 #2077

Closed
rokumatsumoto opened this issue May 1, 2019 · 17 comments
Closed

Comments

@rokumatsumoto
Copy link

Current node-sass (4.11.0) version is incompatible with node 12.1.0

Here is my recent Travis CI failed build.
https://travis-ci.com/rokumatsumoto/boyutluseyler/builds/110286429#L845

nodejs versions minimum node-sass version support table
https://github.com/sass/node-sass#supported-nodejs-versions-vary-by-release-please-consult-the-releases-page-below-is-a-quick-guide-for-minimium-support

node-sass new issue template also confirms this.
- If you're running Node 12, you must be running node-sass 4.12.
https://github.com/sass/node-sass/issues/new?template=Bug_report.md

$ npm ls node-sass
└─┬ @rails/webpacker@4.0.2
  └── node-sass@4.11.0

Expected Behavior

$ bundle install --path vendor/bundle
Using webpacker 4.0.2
Bundle complete! 58 Gemfile dependencies, 173 gems now installed.
Bundled gems are installed into `./vendor/bundle`
$ nvm install node
Downloading and installing node v12.1.0...
$ node --version
v12.1.0
$ yarn --version
1.15.2
$ yarn
yarn install v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
Done in 20.62s.

Actual Behavior

$ bundle install --path vendor/bundle
Using webpacker 4.0.2
Bundle complete! 58 Gemfile dependencies, 173 gems now installed.
Bundled gems are installed into `./vendor/bundle`
$ nvm install node
Downloading and installing node v12.1.0...
$ node --version
v12.1.0
$ yarn --version
1.15.2
$ yarn
yarn install v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.7: The platform "linux" is incompatible with this module.
info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.3.1" has unmet peer dependency "webpack@^4.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.6.2" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
error /home/travis/build/rokumatsumoto/boyutluseyler/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /home/travis/build/rokumatsumoto/boyutluseyler/node_modules/node-sass
Output:
Building: /home/travis/.nvm/versions/node/v12.1.0/bin/node /home/travis/build/rokumatsumoto/boyutluseyler/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
@jakeNiemiec
Copy link
Member

It will be a while until node 12 becomes active:
image

Because of this line, it will be an easy fix for you. "node-sass": "^4.11.0" means you can use any minor release like node-sass@^4.* where * is a wildcard.

Use yarn add node-sass@^4.12 to fix your issue.

@rokumatsumoto
Copy link
Author

@jakeNiemiec Thanks for the info.

Tried your fix.
$ yarn add node-sass@^4.12

Because of this line, Webpacker using its own node_modules/@rails/webpacker/node_modules/node-sass,
not the node_modules/node-sass.

package.json

{
  "name": "boyutluseyler",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.8.1",
    "@justinribeiro/stl-part-viewer": "^1.0.2",
    "@rails/webpacker": "^4.0.2",
    "activestorage": "^5.2.3",
    "bootstrap": "^4.3.1",
    "coffee-loader": "^0.9.0",
    "coffeescript": "1.12.7",
    "jquery": "^3.4.0",
    "local-time": "^2.1.0",
    "node-sass": "^4.12",
    "popper.js": "^1.15.0",
    "rails-ujs": "^5.2.3",
    "swiper": "^4.5.0",
    "turbolinks": "^5.2.0"
  },
  "devDependencies": {
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

Related commit
rokumatsumoto/boyutluseyler@ca65dc8

@jakeNiemiec
Copy link
Member

jakeNiemiec commented May 6, 2019

error /home/travis/build/rokumatsumoto/boyutluseyler/node_modules/@rails/webpacker/node_modules/node-sass: Command failed.

This is a quintessential case for why peerDependancies exist. Could you try yarn add webpack@^4 as a last-ditch effort? I hope if you resolve those other peerDependancy errors, it will use the top-level module instead of digging down.

If that does not work, I would create a PR to modify webpacker's package.json to move webpack and node-sass to peerDependancies. Here is an example of how react-dom does this.

@rokumatsumoto
Copy link
Author

@jakeNiemiec thanks for the info again.

$ yarn add webpack@^4
I tried adding webpack to my dependencies, still using webpacker's node-sass dependency.

package.json

{
  "name": "boyutluseyler",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.8.1",
    "@justinribeiro/stl-part-viewer": "^1.0.2",
    "@rails/webpacker": "^4.0.2",
    "activestorage": "^5.2.3",
    "bootstrap": "^4.3.1",
    "coffee-loader": "^0.9.0",
    "coffeescript": "1.12.7",
    "jquery": "^3.4.0",
    "local-time": "^2.1.0",
    "node-sass": "^4.12",
    "popper.js": "^1.15.0",
    "rails-ujs": "^5.2.3",
    "swiper": "^4.5.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4"
  },
  "devDependencies": {
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

Related commit

@jakeNiemiec
Copy link
Member

Would you be open to making a PR? You would just need to add something like this to webpackERs package.json:

  "peerDependencies": {
    "node-sass": "^4.11.0",
    "webpack": "^4.29.6"
  },

(You would also need to remove node-sass & webpack from dependencies)

rokumatsumoto added a commit to rokumatsumoto/webpacker that referenced this issue May 9, 2019
yarn add node-sass@^4.11.0 --peer
yarn add webpack@^4.29.6 --peer

Webpacker issue rails#2077
@rokumatsumoto
Copy link
Author

rokumatsumoto commented May 9, 2019

@jakeNiemiec before making a PR, i followed the contributing guidelines.

Here is my forked repository branch commits.
Commit 1 (Manually added peerDependency part. yarn test failed.)
Commit 2 (Added with yarn add <package...> [--peer/-P] yarn test succeed)

After yarn test succeed, i checked yarn.lock for node-sass and webpack. I didn't see node-sass anywhere, but i can see webpack@^4.29.6.

yarn or yarn install does not install peerDependencies, how Travis CI build will pass? After you review my commits, i would create a PR. Thanks.

yarn add node-sass@^4.11.0 --peer results

yarn add node-sass@^4.11.0 --peer
yarn add v1.15.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning " > babel-loader@8.0.5" has unmet peer dependency "webpack@>=2".
warning " > compression-webpack-plugin@2.0.0" has unmet peer dependency "webpack@^4.3.0".
warning " > css-loader@2.1.1" has unmet peer dependency "webpack@^4.0.0".
warning " > file-loader@3.0.1" has unmet peer dependency "webpack@^4.0.0".
warning " > mini-css-extract-plugin@0.5.0" has unmet peer dependency "webpack@^4.4.0".
warning " > optimize-css-assets-webpack-plugin@5.0.1" has unmet peer dependency "webpack@^4.0.0".
warning " > sass-loader@7.1.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
warning " > terser-webpack-plugin@1.2.3" has unmet peer dependency "webpack@^4.0.0".
warning " > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
warning " > webpack-cli@3.2.3" has unmet peer dependency "webpack@4.x.x".
warning "jest > jest-cli > @jest/core > jest-resolve-dependencies@24.3.1" has unmet peer dependency "jest-resolve@^24.1.0".
warning "jest > jest-cli > jest-config > jest-resolve@24.3.1" has unmet peer dependency "jest-haste-map@^24.0.0".
[5/5] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 48 new dependencies.
info Direct dependencies
└─ node-sass@4.12.0
info All dependencies
├─ abbrev@1.1.1
├─ amdefine@1.0.1
├─ are-we-there-yet@1.1.5
├─ array-find-index@1.0.2
├─ async-foreach@0.1.3
├─ block-stream@0.0.9
├─ camelcase-keys@2.1.0
├─ console-control-strings@1.1.0
├─ currently-unhandled@0.4.1
├─ delegates@1.0.0
├─ fstream@1.0.11
├─ gauge@2.7.4
├─ gaze@1.1.3
├─ globule@1.2.1
├─ has-ansi@2.0.0
├─ has-unicode@2.0.1
├─ in-publish@2.0.0
├─ indent-string@2.1.0
├─ is-finite@1.0.2
├─ is-utf8@0.2.1
├─ js-base64@2.5.1
├─ load-json-file@1.1.0
├─ loud-rejection@1.6.0
├─ lru-cache@4.1.5
├─ map-obj@1.0.1
├─ meow@3.7.0
├─ nan@2.13.2
├─ node-gyp@3.8.0
├─ node-sass@4.12.0
├─ nopt@3.0.6
├─ npmlog@4.1.2
├─ os-homedir@1.0.2
├─ osenv@0.1.5
├─ path-type@1.1.0
├─ pinkie@2.0.4
├─ pseudomap@1.0.2
├─ read-pkg@1.1.0
├─ redent@1.0.0
├─ repeating@2.0.1
├─ sass-graph@2.2.4
├─ scss-tokenizer@0.2.3
├─ stdout-stream@1.4.1
├─ strip-indent@1.0.1
├─ tar@2.2.1
├─ trim-newlines@1.0.0
├─ true-case-path@1.0.3
├─ wide-align@1.1.3
└─ yallist@2.1.2
✨  Done in 21.95s.

yarn add webpack@^4.29.6 --peer results

yarn add webpack@^4.29.6 --peer
yarn add v1.15.2
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
[4/5] 🔗  Linking dependencies...
warning "jest > jest-cli > @jest/core > jest-resolve-dependencies@24.3.1" has unmet peer dependency "jest-resolve@^24.1.0".
warning "jest > jest-cli > jest-config > jest-resolve@24.3.1" has unmet peer dependency "jest-haste-map@^24.0.0".
[5/5] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 85 new dependencies.
info Direct dependencies
└─ webpack@4.31.0
info All dependencies
├─ @webassemblyjs/floating-point-hex-parser@1.8.5
├─ @webassemblyjs/helper-code-frame@1.8.5
├─ @webassemblyjs/helper-fsm@1.8.5
├─ @webassemblyjs/helper-wasm-section@1.8.5
├─ @webassemblyjs/wasm-edit@1.8.5
├─ @webassemblyjs/wasm-opt@1.8.5
├─ @xtuc/ieee754@1.2.0
├─ acorn-dynamic-import@4.0.0
├─ asn1.js@4.10.1
├─ assert@1.5.0
├─ async-each@1.0.3
├─ base64-js@1.3.0
├─ binary-extensions@1.13.1
├─ browserify-aes@1.2.0
├─ browserify-cipher@1.0.1
├─ browserify-des@1.0.2
├─ browserify-sign@4.0.4
├─ browserify-zlib@0.2.0
├─ buffer-xor@1.0.3
├─ buffer@4.9.1
├─ builtin-status-codes@3.0.0
├─ chokidar@2.1.5
├─ chrome-trace-event@1.0.0
├─ console-browserify@1.1.0
├─ constants-browserify@1.0.0
├─ create-ecdh@4.0.3
├─ create-hmac@1.1.7
├─ crypto-browserify@3.12.0
├─ date-now@0.1.4
├─ deep-extend@0.6.0
├─ des.js@1.0.0
├─ detect-libc@1.0.3
├─ diffie-hellman@5.0.3
├─ domain-browser@1.2.0
├─ eslint-scope@4.0.3
├─ events@3.0.0
├─ fs-minipass@1.2.5
├─ fsevents@1.2.9
├─ glob-parent@3.1.0
├─ hash.js@1.1.7
├─ hmac-drbg@1.0.1
├─ https-browserify@1.0.0
├─ ieee754@1.1.13
├─ ignore-walk@3.0.1
├─ indexof@0.0.1
├─ is-binary-path@1.0.1
├─ loader-runner@2.4.0
├─ mamacro@0.0.3
├─ miller-rabin@4.0.1
├─ minimalistic-crypto-utils@1.0.1
├─ minizlib@1.2.1
├─ nan@2.13.2
├─ needle@2.3.1
├─ node-libs-browser@2.2.0
├─ node-pre-gyp@0.12.0
├─ nopt@4.0.1
├─ npm-bundled@1.0.6
├─ npm-packlist@1.4.1
├─ npmlog@4.1.2
├─ os-browserify@0.3.0
├─ osenv@0.1.5
├─ pako@1.0.10
├─ path-browserify@0.0.0
├─ path-dirname@1.0.2
├─ process@0.11.10
├─ public-encrypt@4.0.3
├─ querystring-es3@0.2.1
├─ querystring@0.2.0
├─ randomfill@1.0.4
├─ rc@1.2.8
├─ readdirp@2.2.1
├─ setimmediate@1.0.5
├─ stream-browserify@2.0.2
├─ stream-http@2.8.3
├─ string_decoder@1.2.0
├─ tar@4.4.8
├─ timers-browserify@2.0.10
├─ to-arraybuffer@1.0.1
├─ tty-browserify@0.0.0
├─ upath@1.1.2
├─ url@0.11.0
├─ util@0.11.1
├─ vm-browserify@0.0.4
├─ watchpack@1.6.0
└─ webpack@4.31.0
✨  Done in 19.19s.

origin move-node-sass-webpack-to-peerDependencies branch yarn test results.

yarn test
yarn run v1.15.2
$ jest
 PASS  package/__tests__/test.js
 PASS  package/__tests__/development.js
 PASS  package/__tests__/config.js
 PASS  package/__tests__/production.js
 PASS  package/utils/__tests__/get_style_rule.js
 PASS  package/utils/__tests__/deep_assign.js
 PASS  package/utils/__tests__/objectify.js
 PASS  package/__tests__/staging.js
 PASS  package/environments/__tests__/base.js
 PASS  package/__tests__/dev_server.js
 PASS  package/config_types/__tests__/config_list.js
 PASS  package/utils/__tests__/deep_merge.js
 PASS  package/config_types/__tests__/config_object.js
 PASS  package/__tests__/env.js

Test Suites: 14 passed, 14 total
Tests:       52 passed, 52 total
Snapshots:   0 total
Time:        8.013s
Ran all test suites.
✨  Done in 9.01s.

@brendon
Copy link

brendon commented May 15, 2019

In the meantime, add this to your package.json:

  "resolutions": {
    "node-sass": "^4.12.0"
  },

@rokumatsumoto
Copy link
Author

@brendon thanks, it worked.
Related commit

package.json

{
  "name": "boyutluseyler",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.8.1",
    "@justinribeiro/stl-part-viewer": "^1.0.2",
    "@rails/webpacker": "^4.0.2",
    "activestorage": "^5.2.3",
    "bootstrap": "^4.3.1",
    "coffee-loader": "^0.9.0",
    "coffeescript": "1.12.7",
    "jquery": "^3.4.0",
    "local-time": "^2.1.0",
    "popper.js": "^1.15.0",
    "rails-ujs": "^5.2.3",
    "swiper": "^4.5.0",
    "turbolinks": "^5.2.0"
  },
  "resolutions": {
    "node-sass": "^4.12.0"
  },
  "devDependencies": {
    "webpack-bundle-analyzer": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

@brendon
Copy link

brendon commented May 15, 2019

All good @rokumatsumoto, though @jakeNiemiec, it'd be good to loosen the version constraint as this was a work stopper for me when I upgraded to the latest yarn via Homebrew which installed Node 12. Unfortunately it's not trivial to downgrade via Homebrew so I was glad to stumble across this workaround in the meantime.

@rokumatsumoto
Copy link
Author

@brendon I upgraded to the latest yarn too. Yes, latest yarn (1.16.0) installed node 12. But my system's current node version didn't change, still 11.14.0. I guess this is because I use nvm.

@brendon
Copy link

brendon commented May 16, 2019

@rokumatsumoto, that's interesting :) Perhaps you have a system node that's been installed separately from the node that brew installs for use with yarn? I'm not too savvy on that particular ecosystem :)

@rokumatsumoto
Copy link
Author

@brendon yes, i installed node 11.14.0 via nvm.

brew upgrade yarn
==> Installing yarn dependency: node
==> Downloading https://homebrew.bintray.com/bottles/node-12.1.0.sierra.bottle.tar.gz

brew list --versions node
node 12.1.0

nvm ls
-> v11.14.0
system
default -> node (-> v11.14.0)
node -> stable (-> v11.14.0) (default)
stable -> 11.14 (-> v11.14.0) (default)
iojs -> N/A (default)
unstable -> N/A (default)
lts/* -> lts/dubnium (-> N/A)
lts/argon -> v4.9.1 (-> N/A)
lts/boron -> v6.17.1 (-> N/A)
lts/carbon -> v8.15.1 (-> N/A)
lts/dubnium -> v10.15.3 (-> N/A)

i didn't know there is an --ignore-dependencies option.

Prefer --ignore-dependencies to deprecated --without-node flag

gauravtiwari pushed a commit that referenced this issue May 22, 2019
* Temporarily fix Travis CI builds

`nvm install node` will install the latest node version, which is 12 as
of writing. Because of a problem in the resolved node-sass version this
makes the builds fail.

To get green builds until a proper fix for node 12 is introduced we'll
install node 10, which is a LTS release, while 11 will be EOL in June
2019.

@rokumatsumoto is maybe working on a fix, but I think green builds,
especially for third party PRs are an important intermediate step.

#2077
sass/node-sass#2633
nodejs/nan#849
https://github.com/nodejs/Release

* Lock RuboCop to a version that supports Ruby 2.2

RuboCop 0.69.0 dropped support for Ruby 2.2, making RuboCop fail when it
was installed since it pointed to the git repo instead of a specific
version.

https://github.com/rubocop-hq/rubocop/blob/v0.69.0/CHANGELOG.md#changes

* Allow failures with ruby-head

These might – currently – not be related to Ruby itself, but to the
fact that bundler 2.1.0.pre.1 was installed, which is as of writing
not supported by webpacker (`~> 1.12` is used).

But this is to get the CI builds green again.
@aried3r
Copy link
Contributor

aried3r commented May 29, 2019

I believe this should be fixed with webpacker 4.0.3 and above since dependencies were updated. bf92ace#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R37

@brendon
Copy link

brendon commented Jun 3, 2019

@aried3r: Correct! :)

@Mikhail-hud
Copy link

Hello, have the following issue. Can you help me?
/src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

@Aarush-Goyal
Copy link

Hello, have the following issue. Can you help me?
/src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Same problem

@Aarush-Goyal
Copy link

@Mikhail-hud https://www.npmjs.com/package/node-sass read this Node Sass has been deprecated

KingTiger001 added a commit to KingTiger001/Rails-web-pack-project that referenced this issue Jan 15, 2023
* Temporarily fix Travis CI builds

`nvm install node` will install the latest node version, which is 12 as
of writing. Because of a problem in the resolved node-sass version this
makes the builds fail.

To get green builds until a proper fix for node 12 is introduced we'll
install node 10, which is a LTS release, while 11 will be EOL in June
2019.

@rokumatsumoto is maybe working on a fix, but I think green builds,
especially for third party PRs are an important intermediate step.

rails/webpacker#2077
sass/node-sass#2633
nodejs/nan#849
https://github.com/nodejs/Release

* Lock RuboCop to a version that supports Ruby 2.2

RuboCop 0.69.0 dropped support for Ruby 2.2, making RuboCop fail when it
was installed since it pointed to the git repo instead of a specific
version.

https://github.com/rubocop-hq/rubocop/blob/v0.69.0/CHANGELOG.md#changes

* Allow failures with ruby-head

These might – currently – not be related to Ruby itself, but to the
fact that bundler 2.1.0.pre.1 was installed, which is as of writing
not supported by webpacker (`~> 1.12` is used).

But this is to get the CI builds green again.
smartech7 pushed a commit to smartech7/ruby-webpacker that referenced this issue Aug 4, 2023
* Temporarily fix Travis CI builds

`nvm install node` will install the latest node version, which is 12 as
of writing. Because of a problem in the resolved node-sass version this
makes the builds fail.

To get green builds until a proper fix for node 12 is introduced we'll
install node 10, which is a LTS release, while 11 will be EOL in June
2019.

@rokumatsumoto is maybe working on a fix, but I think green builds,
especially for third party PRs are an important intermediate step.

rails/webpacker#2077
sass/node-sass#2633
nodejs/nan#849
https://github.com/nodejs/Release

* Lock RuboCop to a version that supports Ruby 2.2

RuboCop 0.69.0 dropped support for Ruby 2.2, making RuboCop fail when it
was installed since it pointed to the git repo instead of a specific
version.

https://github.com/rubocop-hq/rubocop/blob/v0.69.0/CHANGELOG.md#changes

* Allow failures with ruby-head

These might – currently – not be related to Ruby itself, but to the
fact that bundler 2.1.0.pre.1 was installed, which is as of writing
not supported by webpacker (`~> 1.12` is used).

But this is to get the CI builds green again.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants