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.

Sign up for GitHub

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

Jump to bottom

Error using sass-loader when upgrading sass from 1.32.11 to 1.32.12 or 1.32.13 #1334

Closed
oboxodo opened this issue May 25, 2021 · 2 comments
Closed

Error using sass-loader when upgrading sass from 1.32.11 to 1.32.12 or 1.32.13 #1334

oboxodo opened this issue May 25, 2021 · 2 comments

Comments

@oboxodo
Copy link

oboxodo commented May 25, 2021

We have the following versions:

  • rails 6.0.3.7
  • webpacker 5.3.0 (depends on sass-loader 10.1.1)
  • webpack 4.46.0
  • sass 1.32.11

Everything works.

Upgrading sass to 1.32.13 started throwing an error. Tried with 1.32.12 and we have the same error when running rails webpacker:compile:

$ bin/rails webpacker:compile
Compiling...
Compilation failed:
ModuleNotFoundError: Module not found: Error: Can't resolve 'sass-loader' in '/Users/my_user/repos/project'
    at /Users/my_user/repos/project/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/my_user/repos/project/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/my_user/repos/project/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/my_user/repos/project/node_modules/webpack/lib/NormalModuleFactory.js:337:24
    at /Users/my_user/repos/project/node_modules/neo-async/async.js:2830:7
    at /Users/my_user/repos/project/node_modules/neo-async/async.js:6877:13
    at /Users/my_user/repos/project/node_modules/neo-async/async.js:2830:7
    at done (/Users/my_user/repos/project/node_modules/neo-async/async.js:2925:13)
    at /Users/my_user/repos/project/node_modules/webpack/lib/NormalModuleFactory.js:449:23
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleKindPlugin.js:30:40
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/forEachBail.js:30:14
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:44:7
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:67:43
    at /Users/my_user/repos/project/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/my_user/repos/project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
resolve 'sass-loader' in '/Users/my_user/repos/project'
  Parsed request is a module
  using description file: /Users/my_user/repos/project/package.json (relative path: .)
    resolve as module
      /Users/my_user/repos/node_modules doesn't exist or is not a directory
      /Users/my_user/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /Users/my_user/repos/project/node_modules
        using description file: /Users/my_user/repos/project/package.json (relative path: ./node_modules)
          using description file: /Users/my_user/repos/project/package.json (relative path: ./node_modules/sass-loader)
            no extension
              /Users/my_user/repos/project/node_modules/sass-loader doesn't exist
            .js
              /Users/my_user/repos/project/node_modules/sass-loader.js doesn't exist
            .json
              /Users/my_user/repos/project/node_modules/sass-loader.json doesn't exist
            as directory
              /Users/my_user/repos/project/node_modules/sass-loader doesn't exist

And this is our config/webpack/environment.js file where we're setting up sass-loader:

const { environment } = require('@rails/webpacker')

////////////////////////// sass/scss loader config //////////////////////////
const sassLoader = environment.loaders.get('sass')
const sassLoaderConfig = sassLoader.use.find(function (element) {
  return element.loader === 'sass-loader'
})

const options = sassLoaderConfig.options
options.implementation = require('sass') // Use Dart-implementation of Sass (default is node-sass)

const globCssImporter = require('node-sass-glob-importer')
options.sassOptions.importer = globCssImporter() // Add support for file globbing

// Resolve url() statements to relative paths
const cssLoaderIndex = sassLoader.use.findIndex((e) => e.loader === 'css-loader')
sassLoader.use.splice(cssLoaderIndex + 1, 0, {
  loader: "resolve-url-loader"
})

module.exports = environment

I'm really not the most expert JS developer but the diff from 1.32.11 to 1.32.12 seems to be a single line of code. Can anyone please tell me how that change is causing this problem?
oboxodo referenced this issue May 25, 2021
Fix extending selectors across multiple modules. (#1298)
30ede40 
* Fix extending selectors across multiple modules.

Allows more than one module to extend the same upstream selector that,
in turn, extends a selector from its upstream module.

Properly skips creating an extra extension that was being counted as
unresolved when evaluating @extends.

See sass/sass-spec#1635
Fixes #1295
@Awjin
Copy link
Contributor

Awjin commented May 26, 2021

This error looks like it is unrelated to any changes made in Sass.

@Awjin Awjin closed this as completed May 26, 2021
@oboxodo
Copy link
Author

oboxodo commented May 27, 2021

I found we had a direct dependency to sass ^1.32.11 which we were trying to upgrade to ^1.32.13, while at the same time we depend on webpacker 5.3.0 which depends on sass ^1.32.11.

The problem was resolved by removing our (unnecessary) direct dependency on sass and letting webpacker guide what version to depend on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@oboxodo @Awjin