Parcel: File to import not found or unreadable: @material/elevation/mixins

Created on 22 May 2018 · 12Comments · Source: parcel-bundler/parcel

🐛 bug report

File to import not found or unreadable: @material/elevation/mixins.

🎛 Configuration (.babelrc, package.json, cli command)

{
  "devDependencies": {
    "@material/top-app-bar": "^0.35.2",
    "node-sass": "^4.9.0"
  }
}

🤔 Expected Behavior

Parcel should be able to load @material mixins in node_modules/@material

😯 Current Behavior

PS C:\apps\test> parcel index.html
Server running at http://localhost:1234
×  C:\apps\test\main.scss: File to import not found or unreadable: @material/elevation/mixins.
    at options.error (C:\apps\test\node_modules\node-sass\lib\index.js:291:26)

💁 Possible Solution

Allow node-sass to access node_modules/@material folder?

🔦 Context

I am trying to implement the MDC Top App Bar.

This is my index.html file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MDC Top App Bar Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="./main.scss" />
  <script src="./main.js"></script>
</head>
<body>
  <header class="mdc-top-app-bar">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
        <span class="mdc-top-app-bar__title">Title</span>
      </section>
    </div>
  </header>
</body>
</html>

My main.scss file:

@import "@material/top-app-bar/mdc-top-app-bar";

And my main.js file:

import { MDCTopAppBar } from '@material/top-app-bar/index'

const topAppBar = new MDCTopAppBar(document.querySelector('.mdc-top-app-bar'));

💻 Code Sample

https://github.com/thiagovilla/portfolio/blob/master/labs/mdc/top-app-bar/index.html

🌍 Your Environment

Windows 10
Chrome 66.0.3359.181
node v8.11.1

Bug ✖️ Non-Parcel bug

Source

thiagovilla

Most helpful comment

@thiagovilla

I don't know whether this is a bug from Google or not, because most .scss files in the @material subfolders have the _ prefix.

📝 http://sass-lang.com/guide#topic-4 says:

You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.

m5o on 23 May 2018

🎉4

All 12 comments

What parcel version are you using?

DeMoorJasper on 22 May 2018

Hi, @DeMoorJasper. I've run npm list -g and it says [email protected]

thiagovilla on 22 May 2018

Not sure why this happens but #1335 just got merged into the master, so you can probably try the current master branch.

Note node_module imports now have a prefix ~ so in your case that would be ~@material

DeMoorJasper on 22 May 2018

That didn't work either, but I think I've found the problem. Or started to find it.

Here's what I did:

First, I cleaned up the /dist and /.cache Parcel-generated folders.

Then, I went on to clean npm's cache with npm cache verify. Some garbage collected there.

Alright, so I run parcel index.html and got the same error as before:

PS C:\apps\test> parcel index.html
Server running at http://localhost:1234
×  C:\apps\test\main.scss: File to import not found or unreadable: @material/elevation/mixins.
    at options.error (C:\apps\test\node_modules\node-sass\lib\index.js:291:26)

So I tried to trace it. I went to my main.scss file and saw it was trying to import from @material/top-app-bar/mdc-top-app-bar. So I went to that file:

I opened mdc-top-app-bar.scss and saw this on line 17:

@import "@material/elevation/mixins";

Alright, so then I went to _that_ file and, guess what, it's not mixins.scss but _mixins.scss.

I don't know whether this is a bug from Google or not, because most .scss files in the @material subfolders have the _ prefix.

Anyway, I tried to run a test. I went on to mdc-top-app-bar.scss and changed line 17 to this:

@import "@material/elevation/_mixins";

Deleted the /.cache and dist folders and npm cache verify again. Then parcel index.html again and voilà:

PS C:\apps\test> parcel index.html
Server running at http://localhost:1234
×  C:\apps\test\main.scss: File to import not found or unreadable: @material/theme/variables.
    at options.error (C:\apps\test\node_modules\node-sass\lib\index.js:291:26)

I guess it "worked", since now the "file to import not found or unreadable" is the one on line 18 in mdc-top-app-bar.scss.

Is this a Parcel thing? Or Google? I haven't tried setting this up in webpack.

Any thoughts on what should I do next?

thiagovilla on 23 May 2018

@thiagovilla I would report this to google.
They don't follow the default scss semantics, which also includes putting ~ in front of node_module requires, are they using their own resolver by any chance?
In case they are using their own custom resolver you could just add it to the sass config

DeMoorJasper on 23 May 2018

Ouch, you missed me on "resolver" - beginner level here.

I found this on their repo: