react-bulma-components: Next 9 - File to import not found or unreadable: _variables.sass.

Hi! I’ve followed the advanced instructions to install the components for next.js but am still failing to correctly import the variable sass file. Its a next.js 9 app created with creat-next-app. On yarn dev I get the following stack trace:

ModuleBuildError: Module build failed (from ./node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "_variables.sass"
^
      File to import not found or unreadable: _variables.sass.
      in /Users/richard/Documents/code/oddsjar/node_modules/react-bulma-components/src/components/utils.sass (line 3, column 1)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/sass-loader/lib/loader.js:55:13)
    at Object.<anonymous> (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:2271:31)
    at Object.callback (/Users/richard/Documents/code/oddsjar/node_modules/async/dist/async.js:969:16)
    at options.error (/Users/richard/Documents/code/oddsjar/node_modules/node-sass/lib/index.js:294:32)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/NormalModule.js:316:20
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:182:20
    at context.callback (/Users/richard/Documents/code/oddsjar/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/richard/Documents/code/oddsjar/node_modules/@zeit/next-css/node_modules/mini-css-extract-plugin/dist/loader.js:112:14
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:343:11
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/richard/Documents/code/oddsjar/node_modules/tapable/lib/Hook.js:154:20)
    at /Users/richard/Documents/code/oddsjar/node_modules/webpack/lib/Compilation.js:1414:32

I’ve tried to follow all the similar issues in the repo but none have yet solved the problem, the only difference I can see is that I am using nextjs 9. I’ve setup a demo repo here https://github.com/RichAWarren/react-bulma-next-9

Thanks in advance!

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (8 by maintainers)

Most upvoted comments

@humet

I spent around an hour playing with your code, and there seems to be an inconsistency with the way _variables.sass is served up, at least in next. I tried erasing node_modules and .next folders and rebuilding/running a bunch, and it would work 10% of the time.

What I was able to eventually get to work consistently was move _variables.sass to the root folder. I was able to build and run every time this way. I tried it on your project and mine as well, seems to be doing the trick. Would love to know why the inconsistent behavior though…

mrd9483 on May 28, 2020

After following all of the documentation, changing @import "_variables.sass" to @import "~_variables.sass" in src/components/utils.sass works.

It seems to have something to do with the aliasing in next.js.

The solution above isn’t good, as I’m directly changing a file within the node module, and I don’t know enough about this to make an informed pull request.

mrd9483 on May 14, 2020

Update to this: I suspect the problem is down to nextjs 9.2 significantly changing the way css is imported, see details: https://nextjs.org/blog/next-9-2. Will experiment with fixes in due course

RichAWarren on Feb 13, 2020