0

Hello im getting this error when i do an import 'styles.css' on my react on rails app

Uncaught Error: Module build failed: ModuleBuildError: Module build failed: Error: Loading PostCSS Plugin failed: Cannot find module 'postcss-smart-import'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at load (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:44:18)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:66:18
at Array.forEach (<anonymous>)
at plugins (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:65:8)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-config/index.js:64:18
at <anonymous>
at runLoaders (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-loader/lib/index.js:189:71)
at <anonymous>
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at load (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:44:18)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:66:18
at Array.forEach (<anonymous>)
at plugins (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-plugins/lib/plugins.js:65:8)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-load-config/index.js:64:18
at <anonymous>
at runLoaders (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/webpack/lib/NormalModule.js:195:19)
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Promise.resolve.then.then.catch (/Users/mdiaz00147/Desktop/Ruby/cryptoStudio/node_modules/postcss-loader/lib/index.js:189:71)
at <anonymous>
at Object.<anonymous> (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:25280:7)
at __webpack_require__ (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:20:30)
at Object.<anonymous> (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:24995:72)
at __webpack_require__ (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:20:30)
at Object.defineProperty.value (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:19910:110)
at __webpack_require__ (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:20:30)
at emptyFunction (http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:63:18)
at http://localhost:3002/packs/crypto-studio-fc0f59f190b05f88cbd0.js:66:10

I've tried everything from deleting node_modules and reinstall again, i already tried to edit the webpack.xml to poing into my assets folder and nothing its working. Thanks for your help.

mdiaz00147
  • 152
  • 2
  • 11

1 Answers1

0

Had a same issue with rails, I basically just added missing dependency to resolve it.

yarn add postcss-smart-import

Also be sure to use 3.0.2 or 3.2.0 version of a gem.

And don't forget to update yarn as well.

bundle update webpacker
yarn upgrade @rails/webpacker

Hope it will help you as well.

skatkov
  • 133
  • 2
  • 10