Webpacker: Module build failed: Error: Failed to find '~bulma'

[hovancik]

HI folks,
I am upgrading from 3.0.2 to 3.2.0 and I am getting

webpacker_1  | ERROR in ./node_modules/css-loader?{"minimize":false,"sourceMap":true,"importLoaders":2}!./node_modules/postcss-loader/lib?{"sourceMap":true,"config":{"path":"/your_story/.postcssrc.yml"}}!./app/javascript/packs/application.css
webpacker_1  | Module build failed: Error: Failed to find '~bulma'
webpacker_1  |   in [
webpacker_1  |     /your_story/app/javascript/packs
webpacker_1  |   ]
webpacker_1  |     at resolveModule.catch.catch (/your_story/node_modules/postcss-import/lib/resolve-id.js:35:13)
webpacker_1  |     at <anonymous>
webpacker_1  |  @ ./app/javascript/packs/application.css 4:14-156
webpacker_1  |  @ ./app/javascript/packs/application.js
webpacker_1  |  @ multi (webpack)-dev-server/client?http://0.0.0.0:3035 ./app/javascript/packs/application.js

It was working fine with older version

application.js

import './application.css'

application.css

@import '~bulma';
@import '~font-awesome/css/font-awesome';
@import '~flatpickr/dist/flatpickr.min';

Did I miss something? I've tried to follow changelog.

[gauravtiwari]

@hovancik May be it's related to this loader being removed from css loader: https://github.com/rails/webpacker/blob/master/docs/css.md#resolve-url-loader

Can you try full path like @import "~bulma/bulma/base/base"?

[hovancik]

Didn't help. If I remove that line, I'm getting Module build failed: Error: Failed to find '~font-awesome/css/font-awesome'

[gauravtiwari]

@hovancik Just tested bulma works, for font-awesome you would need to add resolve-url-loader per docs.

Bulma spits out some warnings regards to css properties. Please use this in .postcssrc.yml: https://github.com/jgthms/bulma/issues/1190

plugins:
  postcss-import: {}
  postcss-cssnext: {
    features: {
      customProperties: false
    }
  }

[hovancik]

Well, I had it working with 3.0.2 so I guess I'm gonna stick with it. Thanks for trying anyway.

[serv]

I had a similar problem with leaflet and I found out that https://github.com/postcss/postcss-import actually stopped using tilda ~.
I removed ~ from imports and now it works.

[hovancik]

I'm sticking with 3.0.2 for now, but thanks for tip @serv , I will try it later ;]