dart-sass fails on transitive module imports found in 3rd-party modules

[kubijo]

• Operating System: Ubuntu 20.04

• Node Version: 13.12.0

• NPM Version: yarn@2.0.0-rc.33.git.20200518.07a15e54

• webpack Version: 4.44.0

• sass-loader Version: 9.0.2

Expected Behavior

Not sure what would be the correct solution, but we need a way
to instruct webpack that sass modules imported from node_modules
can import node_modules modules of their own as well.

Actual Behavior

Either of those imports lead to correctly resolved file:

• @import '~@carbon/type/scss/styles'
• @import '@carbon/type/scss/_styles.scss'

however in both cases the compilation encounters first import
in that file (@import '@carbon/layout/scss/breakpoint')
and crashes with following attached errors.

Sidenote

I thought that since version 4 came out following import would work as well,
which would also mean that this error would not exist, but alas I had no luck…

@import '@carbon/type/scss/styles'

Note that the real file, as the screenshot shows, is at:

.yarn/cache/@carbon-type-npm-10.13.0-aebfb3196d-8d86f39f3e.zip/node_modules/@carbon/type/scss/_styles.scss

Is my understanding correct and so is there an error / configuration I am missing?

Code

{
    loader: 'sass-loader',
        options: {
        implementation: require('sass'),
        sassOptions: {
            fiber: require('fibers'),
            sourceMap: !isProduction,
        },
    },
}

@import '~@carbon/type/scss/styles';

[alexander-akait]

There are two problems:

1. Only webpack@5 support PnP, so you can't use PnP with webpack@4 (in theory you can, but it can lead to strange problems like this)
2. sass has problems with PnP, so I recommend do not use sass and PnP together (for modules in deps).

We can't solve it on our side, sorry, you can try webpack@5, as workaround you can copy files to any custom directly before build and load them from this directory.

[alexander-akait]

Anyway if you need more information feel free to feedback

[kubijo]

Well, the first point I do understand and I could give it a shot (even though I'm vary of trying out this early something that is so central to the whole dev process & that could break many things).

The second part is worrying however. I am aware of your ...let's say back'n'forth… with (dart-)sass leader about the lacking design of their custom importer API. Is that THE blocker, or how would you describe our prospects in that regard?

I've put this whole migration on hold as there currently didn't seem to be a way out (and what you're saying doesn't improve my feelings about it). Currently I'm on node-sass with my custom importer (I've shared that one with you in some other issue) and that works… I would however like to ultimately refactor our code from @import to @use.

---

As a sidenote, do you have any knowledge about some KB regarding webpack@5 compatibility with most-used plugins?

[alexander-akait]

Is that THE blocker, or how would you describe our prospects in that regard?

Honestly, I don't know what to say, my attempts to change their design importer have failed, I'm not sure if they should do it, or maybe it will take us years to explain it

As a sidenote, do you have any knowledge about some KB regarding webpack@5 compatibility with most-used plugins?

Most of plugins have compatibility with webpack@5. Can you try to use it? Just ensure no problems with webpack@5. If problem(s) will still exists, can you create minimum reproducible test repo with versions of sass/yarn/etc? Maybe I can try to implement workaround, but I am not sure

[kubijo]

Honestly, I don't know what to say, my attempts to change their design importer have failed, I'm not sure if they should do it, or maybe it will take us years to explain it

Well, you've tried your best…

Most of plugins have compatibility with webpack@5

Great, that's an encouriging information and I'll try it right now then!

[alexander-akait]

@kubijo Let's keep open for investigation

[kubijo]

So this is what I've got…
My output folder is empty… I'm running it again and piping the output to log file.

Unknown CLI flags

• --color
• --display='minimal'
• --display-error-details

Yarn 2 issues

• @webpack-cli/package-utils should have dependency on cross-spawn webpack/webpack-cli#1494

Plugins issues

mini-css-extract-plugin@0.9.0

• DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
• [DEP_WEBPACK_CHUNK_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: ChunkTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)
• [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
• [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
• BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
  Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
  Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
• [DEP_WEBPACK_MODULE_ID] DeprecationWarning: Module.id: Use new ChunkGraph API
• [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
• [DEP_WEBPACK_CHUNK_MODULES_ITERABLE] DeprecationWarning: Chunk.modulesIterable: Use new ChunkGraph API
• [DEP_WEBPACK_MAIN_TEMPLATE_OUTPUT_OPTIONS] DeprecationWarning: MainTemplate.outputOptions is deprecated (use Compilation.outputOptions instead)
• [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_CURRENT_HASH_CODE] DeprecationWarning: MainTemplate.renderCurrentHashCode is deprecated (use RuntimeGlobals.getFullHash runtime function instead)
• [DEP_WEBPACK_MAIN_TEMPLATE_GET_ASSET_PATH] DeprecationWarning: MainTemplate.getAssetPath is deprecated (use Compilation.getAssetPath instead)
• [DEP_WEBPACK_MAIN_TEMPLATE_REQUIRE_FN] DeprecationWarning: MainTemplate.requireFn is deprecated (use "webpack_require")
• [DEP_WEBPACK_CHUNK_GROUP_GET_MODULE_INDEX_2] DeprecationWarning: ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex

Massive & broken CLI output

[kubijo]

sooo ... it's 32MB of text which I'm not happy to filter / put out in the open ... but i can send it to you directly if you'll give me some address

[alexander-akait]

@kubijo output is fixed in the master, release will be soon (it is webpack-cli problem), deprecations already in WIP webpack-contrib/mini-css-extract-plugin#552. Just want ensure all works fine.

[alexander-akait]

Found a bug, same problem

[alexander-akait]

Plus here problems with PnP, unfortunately, only webpack@5 works with PnP

[kubijo]

Found a bug, same problem

Nice, but does that means that the problem is solved?
Or is the migration to (dart-)sass a no-go due to those pnp/resolver problems?

[alexander-akait]

Nice, but does that means that the problem is solved?

Yes

Or is the migration to (dart-)sass a no-go due to those pnp/resolver problems?

Fixed for dart-sass/node-sass, but my recommendation is migrate on sass (dart-sass)

PnP is not working on webpack@4, but you can try to use plugin for this https://github.com/arcanis/pnp-webpack-plugin, webpack@5 has PnP support out of box

[kubijo]

Great & thx for info!
I've revisited the migration after returning from vacation & it does work now.

I am using webpack@4 with afformentioned plugin.
I've been able to drop my custom importer function & use the @use at rule.