Cannot import scoped node_module packages

[levithomason]

When importing a scoped node_module package with the tilde syntax:

@import '~@technologyadvice/radiant';

The following error is produced:

Module build failed: 
@import '~@technologyadvice/radiant';
^
      File to import not found or unreadable: ~@technologyadvice/radiant

I moved the module to node_modules/radiant, updated its package.json fields to remove its scoping, and then @import '~radiant'; and it worked. My guess is that the @ is causing some issue.

[jhnns]

When you write

@import '~@technologyadvice/radiant';

webpack will search at ./node_modules/@technologyadvice/radiant for the module – exactly like dependencies in node are resolved. What were you expecting?

[levithomason]

That is exactly what I was expecting. The module is installed at the path you noted but it is not found.

When installing scope modules, their package name is scoped and they are installed to the scope folder (@TechnologyAdvice). The only way I could get this to work was to move the module up out of the scope folder into the root of node_modules.

[jhnns]

What does the main field of the radiant's package.json say?

[levithomason]

"main": "dist/css/radiant.css",

[levithomason]

Again, the curious thing here is that it works just fine when it is not in a @technologyadvice scoped folder. No changes are required to the package nor the config in that case, it just works. Only when the module is in the scoped folder does it fail to find it.

[jacobgunnarsson]

@jhnns We are encountering this exact problem as of 6.0.0. Can confirm all of @levithomason's observations.

In addition; the scoped node_module import syntax works when importing using a reference to a specific file, i.e. @import "~@styles/variables is not found whereas @import "~@styles/variables/src/main" is. @styles/variables/package.json contains "main": "src/main.scss".

Any thoughts or updates? Thanks!

[jhnns]

I assume that this is a webpack problem because the sass-loader is not resolving it. Could you create a minimal example that reproduces the error? Just commit a small example node_modules folder with the folder structure. Try to remove as much as possible.

[Kikobeats]

Same problem using material components web.

Looks like the @ char is not matching as condition for resolve the local module.

This remembered me that ~module resolve a local module, but ~/ resolve $HOME path.

so basically webpack is not contemplating @ as part of the module name.

A workaround for resolve that is include the scoped paths into includePaths:

loader: 'sass-loader',
        options: {
          sourceMap: true,
          includePaths: ['node_modules', 'node_modules/@material/*']
                .map((d) => path.join(__dirname, d))
                .map((g) => glob.sync(g))
                .reduce((a, c) => a.concat(c), [])
        }

and then you can do:

import '@material/card/mdc-card'

but ideally, avoid this specific configuration.

[alexander-akait]

Close in favor #293 (duplicate) and already have PR #447.

Please feel free to reopen (or create new issue) if this doesn't related to your issue. Thanks!