CSS imports from node_modules packages aren't being resolved. #1384

noblica · 2020-10-22T12:22:58Z

noblica
Oct 22, 2020

I've been migrating an app from webpack to snowpack, and came accross this issue. As is stated in the docs:

Note for webpack users: If you’re migrating an existing app to snowpack, note that @import '~package/...' (URL starting with a tilde) is a syntax specific to webpack. With Snowpack you remove the ~ from your @imports.

I removed the @, but when I run snowpack dev, it seems like snowpack doesn't look in the node_modules directory for the package.

This is the error I get:

[snowpack] [404] /fontsource-lato/300.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/300.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/300.scss
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/300.sass
[snowpack] [404] /fontsource-lato/400.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/400.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/400.scss
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/400.sass
[snowpack] [404] /fontsource-lato/700.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/700.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/700.scss
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/700.sass
[snowpack] [404] /fontsource-lato/900.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/900.css
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/900.scss
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/fontsource-lato/900.sass

This is the theme.css file that is importing these dependencies:

@import "fontsource-lato/300.css";
@import "fontsource-lato/400.css";
@import "fontsource-lato/700.css";
@import "fontsource-lato/900.css";

body {
    margin: 0;
}

And this is my snowpack.config.js

module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    "@snowpack/plugin-typescript",
    "@snowpack/plugin-sass"
  ],
};

Please help!

Answered by FredKSchott

Oct 30, 2020

Thanks y'all for reporting, I was able to reproduce something similar in #1417. It looks like package imports weren't being resolved properly when the CSS file was imported from a JS file. aae7908 reorders the steps so that we resolve the CSS file first before handling the JS proxy file.

View full answer

manobi · 2020-10-23T00:42:38Z

manobi
Oct 23, 2020

I have a similar problem, it seems snowpack is not resolving/parsing non-js content:
#1390

1 reply

noblica Oct 26, 2020
Author

@manobi But shouldn't it at least pars .css files? I did exactly as stated in the docs, but it seems it's still not looking for the css imports in the node_modules folder.

drwpow · 2020-10-26T19:30:03Z

drwpow
Oct 26, 2020
Collaborator

On a blank setup (npx create-snowpack-app --template @snowpack/app-template-blank), I’m seeing your exact CSS working and importing fontsource-lato/300.css correctly. Can you confirm you’re on the latest version of Snowpack (2.15.1) and you’ve cleared out the cache with npm start -- --reload (alternately, you can try manually deleting your build folder and node_modules, reinstalling dependencies, and restarting the server)?

1 reply

noblica Oct 30, 2020
Author

Hey @drwpow , thanks for the input!
I tried reinstalling the node_modules, and clearing the cache, as you suggested. However, it didn't solve my problem. I'm using pnpm as a package manager, but that doesn't seem to be the problem. I was already using the latest version of Snowpack as well. Originally, while setting up the project, I think I used the @snowpack/app-template-react-typescript app template.
I'm not sure if it will help, but this is my package.json:

{
  "scripts": {
    "prebuild": "test \"$CI\" = true && npx pnpm install -r --store=node_modules/.pnpm-store || echo skiping pnpm install",
    "preinstall": "npx only-allow pnpm",
    "start": "snowpack dev",
    "build": "snowpack build",
    "test": "jest",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public",
    "run:css": "postcss src/**/[^_]*.scss --dir public/_dist_ --ext css",
    "run:css::watch": "$1 --watch"
  },
  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "classnames": "^2.2.6",
    "fontsource-lato": "^3.0.9",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-react": "^7.12.1",
    "@babel/preset-typescript": "^7.12.1",
    "@csstools/postcss-sass": "^4.0.0",
    "@open-wc/webpack-import-meta-loader": "^0.4.7",
    "@snowpack/app-scripts-react": "^1.12.5",
    "@snowpack/plugin-dotenv": "^2.0.4",
    "@snowpack/plugin-react-refresh": "^2.3.4",
    "@snowpack/plugin-sass": "^1.1.1",
    "@snowpack/plugin-typescript": "^1.0.2",
    "@snowpack/plugin-webpack": "^2.0.17",
    "@storybook/addon-actions": "^6.0.26",
    "@storybook/addon-essentials": "^6.0.26",
    "@storybook/addon-links": "^6.0.26",
    "@storybook/preset-scss": "^1.0.3",
    "@storybook/react": "^6.0.26",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@types/classnames": "^2.2.10",
    "@types/fetch-mock": "^7.3.3",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.6",
    "@types/snowpack-env": "^2.3.0",
    "autoprefixer": "^10.0.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "husky": "^4.3.0",
    "jest": "^26.6.0",
    "msw": "^0.21.3",
    "postcss-cli": "^8.1.0",
    "postcss-scss": "^3.0.2",
    "prettier": "^2.1.2",
    "pretty-quick": "^3.1.0",
    "react-is": "^17.0.0",
    "sass": "^1.27.0",
    "sass-loader": "^10.0.3",
    "snowpack": "^2.15.1",
    "snowpack-plugin-sass": "^1.0.0",
    "storybook-dark-mode": "^1.0.3",
    "style-loader": "^2.0.0",
    "typescript": "^4.0.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

I'm not really using run:css, or run:css::watch, those are some leftovers from something I tried a while ago, but I'm guessing they're not the problem either.

FredKSchott · 2020-10-30T03:23:41Z

FredKSchott
Oct 30, 2020
Maintainer

Thanks y'all for reporting, I was able to reproduce something similar in #1417. It looks like package imports weren't being resolved properly when the CSS file was imported from a JS file. aae7908 reorders the steps so that we resolve the CSS file first before handling the JS proxy file.

6 replies

FredKSchott Oct 30, 2020
Maintainer

I'll get this out by today, end of day at the latest 👍

noblica Nov 2, 2020
Author

Hey @FredKSchott , thanks for the effort! I tried the new version,of snowpack today. The initial error is gone, but now there is a bunch of new ones:

[snowpack] [404] /web_modules/fontsource-lato/files/lato-latin-700-normal.woff2
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/node_modules/.cache/snowpack/development/fontsource-lato/files/lato-latin-700-normal.woff2
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/web_modules/fontsource-lato/files/lato-latin-700-normal.woff2
[snowpack] [404] /web_modules/fontsource-lato/files/lato-all-700-normal.woff
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/node_modules/.cache/snowpack/development/fontsource-lato/files/lato-all-700-normal.woff
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/web_modules/fontsource-lato/files/lato-all-700-normal.woff
[snowpack] [404] /web_modules/fontsource-lato/files/lato-latin-700-normal.woff2
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/node_modules/.cache/snowpack/development/fontsource-lato/files/lato-latin-700-normal.woff2
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/web_modules/fontsource-lato/files/lato-latin-700-normal.woff2
[snowpack] [404] /web_modules/fontsource-lato/files/lato-all-700-normal.woff
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/node_modules/.cache/snowpack/development/fontsource-lato/files/lato-all-700-normal.woff
  ✘ /home/dusan/Projects/axon-server-se/axonserver-ui/public/web_modules/fontsource-lato/files/lato-all-700-normal.woff

I took a look inside the node_modules/.cache/snowpack/development/fontsource-lato folder, and indeed the files referenced in my theme.css, which I referenced above, are there. So it looks like this:

Looking at the fontsource-lato/700.css file, it does indeed require all the referenced woff files, and they are present in the node_modules/fontsource-lato folder, but they are missing from the node_modules/.cache/snowpack/development/fontsource-lato folder, where snowpack seems to be searching for them.

Am I doing something wrong?

FredKSchott Nov 2, 2020
Maintainer

Yea, it looks like this kind of "font" package isn't well supported by Rollup (the tool that powers our internal package installer). Here's an issue of someone trying to debug: #1384 (reply in thread)

If you can find a good solution with rollup, I'd actually love to have this package supported by default.

btw as a workaround, you can pull these fonts or this entire package into your public/ directory, and Snowpack will serve them as-is. This should be a bit faster as well

noblica Nov 2, 2020
Author

Did you mean to link to another post? Because you just linked to my previous reply :)

I ended up forgoing self-hosting the fonts, and just imported them from a URL, like so:
@import 'https://fonts.googleapis.com/css?family=Lato:300,400,700,900';.
Now the build seems to work (and I doubt google will have much downtime anyway).

Thanks for the help! I love that this library is growing, and I hope it keeps doing so 👍

FredKSchott Nov 2, 2020
Maintainer

Whoops! Meant to link here: https://stackoverflow.com/questions/51970359/resolve-woff-imports-with-rollup

Yea, my personal preference is to either load fonts from google, or load from your own public/ directory. These font packages rely a lot on bundler behavior (Webpack, specifically), and it can be hard to know what they're doing internally.

jesperp · 2021-01-30T17:02:13Z

jesperp
Jan 30, 2021

I have an issue that might be related to this.
Using this project (CSA preact-typescript) https://github.com/jesperp/snowpack-tailwind-bug
If I import the css from node_modules like this

import 'tailwindcss/tailwind.css

The @ tailwind directive is ignored. But if I put the exact same content in src/ and import that, the tailwind directive is correctly applied. Is this an issue with postcss or snowpack? (I have postcss installed as a plugin)

0 replies

ccssmnn · 2021-02-02T14:00:45Z

ccssmnn
Feb 2, 2021

I am using snowpack without postcss and having problems using the @lumino library. Neither import "@lumino/dragdrop/style/index.css"; from JS or

When using @import "../../../node_modules/@lumino/default-theme/style/tabbar.css"; in css I see:

[snowpack] [404] /node_modules/@lumino/dragdrop/style/index.css
  ✘ /home/user/project/public/node_modules/@lumino/dragdrop/style/index.css
[snowpack] [404] /node_modules/@lumino/widgets/style/index.css
  ✘ /home/user/project/public/node_modules/@lumino/widgets/style/index.css
[snowpack] [404] /node_modules/@lumino/widgets/style/tabbar.css
  ✘ /home/user/project/public/node_modules/@lumino/widgets/style/tabbar.css
[snowpack] [404] /node_modules/@lumino/widgets/style/dockpanel.css
  ✘ /home/user/project/public/node_modules/@lumino/widgets/style/dockpanel.css
[snowpack] [404] /node_modules/@lumino/default-theme/style/tabbar.css
  ✘ /home/user/project/public/node_modules/@lumino/default-theme/style/tabbar.css
[snowpack] [404] /clear.svg
  ✘ /home/user/project/public/clear.svg

in the console and

Failed to load resource: the server responded with a status of 404 (Not Found)
index.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
tabbar.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
dockpanel.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
tabbar.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
clear.svg:1 Failed to load resource: the server responded with a status of 404 (Not Found)
index.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
index.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
tabbar.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
dockpanel.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
tabbar.css:1

in the browser.

When importing each file from my JS the errors are similar, but the paths are different:
Terminal:

[snowpack] [404] /widget.css
  ✘ /home/user/project/public/widget.css
[snowpack] [404] /commandpalette.css
  ✘ /home/user/project/public/commandpalette.css
[snowpack] [404] /dockpanel.css
  ✘ /home/user/project/public/dockpanel.css
[snowpack] [404] /menu.css
  ✘ /home/user/project/public/menu.css
[snowpack] [404] /menubar.css
  ✘ /home/user/project/public/menubar.css
[snowpack] [404] /scrollbar.css
  ✘ /home/user/project/public/scrollbar.css
[snowpack] [404] /splitpanel.css
  ✘ /home/user/project/public/splitpanel.css
[snowpack] [404] /tabbar.css
  ✘ /home/user/project/public/tabbar.css
[snowpack] [404] /tabpanel.css
  ✘ /home/user/project/public/tabpanel.css
[snowpack] [404] /clear.svg
  ✘ /home/user/project/public/clear.svg

0 replies

TheRealThor · 2021-02-07T21:31:00Z

TheRealThor
Feb 7, 2021

I've stumbled upon this having the same issue importing CSS from a svelte-js file that lies in the node_modules folder. I used svelte-filepond module that imports a css file itself.

<script>
  import FilePond, { registerPlugin, supported } from "svelte-filepond";
  let pond;
  let name = 'filepond';
</script>

<div>
  <FilePond bind:this={pond} {name}
  server="/api"
  allowMultiple={true}
  />
</div>

The css import of the filepond module is not being resolved and shows up in the browser as
<style id="svelte-ilgcgs-style">@import 'filepond/dist/filepond.min.css';</style>

This produces a 404 error since the import cannot reach the node_modules folder which lies outside the public folder.

0 replies

Beyarz · 2021-09-07T17:53:30Z

Beyarz
Sep 7, 2021

I am experiencing this issue right now

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS imports from node_modules packages aren't being resolved. #1384

{{title}}

Replies: 7 comments 8 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

CSS imports from node_modules packages aren't being resolved. #1384

noblica Oct 22, 2020

Replies: 7 comments · 8 replies

manobi Oct 23, 2020

noblica Oct 26, 2020 Author

drwpow Oct 26, 2020 Collaborator

noblica Oct 30, 2020 Author

FredKSchott Oct 30, 2020 Maintainer

FredKSchott Oct 30, 2020 Maintainer

noblica Nov 2, 2020 Author

FredKSchott Nov 2, 2020 Maintainer

noblica Nov 2, 2020 Author

FredKSchott Nov 2, 2020 Maintainer

jesperp Jan 30, 2021

ccssmnn Feb 2, 2021

TheRealThor Feb 7, 2021

Beyarz Sep 7, 2021

noblica
Oct 22, 2020

Replies: 7 comments 8 replies

manobi
Oct 23, 2020

noblica Oct 26, 2020
Author

drwpow
Oct 26, 2020
Collaborator

noblica Oct 30, 2020
Author

FredKSchott
Oct 30, 2020
Maintainer

FredKSchott Oct 30, 2020
Maintainer

noblica Nov 2, 2020
Author

FredKSchott Nov 2, 2020
Maintainer

noblica Nov 2, 2020
Author

FredKSchott Nov 2, 2020
Maintainer

jesperp
Jan 30, 2021

ccssmnn
Feb 2, 2021

TheRealThor
Feb 7, 2021

Beyarz
Sep 7, 2021