Webpacker: Cannot import node_modules with ~ or ~@ [User iView]

[w-zengtao]

Webpacker default config with my alias vue

const { env, paths, publicPath, loadersDir } = require('./configuration.js')

resolve: {
    extensions: paths.extensions,
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    modules: [
      resolve(paths.source),
      resolve(paths.node_modules)
    ]
},
resolveLoader: {
  modules: [paths.node_modules]
}

While I import css as the doc said

//admin.js
import './admin-styles.sass'

//admin-styles.sass
@import '~iview/dist/styles/iview.css'

--------- Docs underline ----------
// app/javascript/app-styles.sass
// ~ to tell webpack that this is not a relative import:

@import '~@material/animation/mdc-animation.scss'
@import '~boostrap/dist/bootstrap.css'
// Your main app pack
// app/javascript/packs/app.js

import '../app-styles'
<%# In your views %>

<%= javascript_pack_tag 'app' %>
<%= stylesheet_pack_tag 'app' %>

And then the error occours

ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib!./~/sass-loader/lib/loader.js!./app/javascript/packs/admin-styles.sass
Module build failed: Error: ENOENT: no such file or directory, open '/Users/ctao/RiseWinter/arc-warden/app/javascript/packs/~iview/dist/styles/iview.css'

relative problems

https://github.com/rails/webpacker/issues/454

[gauravtiwari]

Try this instead please - @import '~iview/dist/styles/iview'

[wstrinz]

fwiw I ran into a similar issue today, and leaving off the .css extension fixed it for me.

[gauravtiwari]

Yepp since extensions are already added in the webpacker.yml. Need to update this in README and remove all extension references that already exists.

[kevgathuku]

I'm also facing the same error while trying to require the bootstrap css
Inside app/javascript/app-styles.sass

@import '~boostrap/dist/css/bootstrap.css'

gives me this error

ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/app-styles.sass
    Module build failed: Error: ENOENT: no such file or directory, open '/Users/kevin/tmp/myapp/app/javascript/~boostrap/dist/bootstrap.css'

Removing the .css extension doesn't help and gives me this error instead:

    ERROR in ./~/css-loader?{"minimize":false}!./~/postcss-loader/lib?{"sourceMap":true}!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"sourceMap":true}!./app/javascript/app-styles.sass
    Module build failed:
    @import '~boostrap/dist/css/bootstrap'
    ^
          File to import not found or unreadable: ~boostrap/dist/css/bootstrap.
    Parent style sheet: stdin
          in /Users/kevin/tmp/myapp/app/javascript/app-styles.sass (line 1, column 1)

Here's a repo where I've recreated the issue: https://github.com/kevgathuku/rails-webpack

[gauravtiwari]

@kevgathuku there is a typo it's bootstrap => ~boostrap/dist/css/bootstrap

[kevgathuku]

Wow. Can't believe I missed that. Thanks @gauravtiwari
I think I should also update the path in the README

[kevgathuku]

Just made a quick PR to fix the typo and bootstrap location
https://github.com/rails/webpacker/pull/495

Update:
Closed in favor of https://github.com/rails/webpacker/pull/494