Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

ERR_UNKNOWN_FILE_EXTENSION - Problem with import css/scss from pnpm/node_modules

See original GitHub issue

I have some components with styles from swiper. Now when I tried to build it to production with css or scss I have error: ERR_UNKNOWN_FILE_EXTENSION

problematic code in vue script tags:

import 'swiper/scss'
import 'swiper/scss/scrollbar'

issue when build to prod:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for C:\test\node_modules\.pnpm\swiper@7.3.3\node_modules\swiper\swiper.scss
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:22:14)
    at ESMLoader.load (node:internal/modules/esm/loader:353:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:274:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:291:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:255:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v17.2.0
 ELIFECYCLE  Command failed with exit code 1.

the same with css:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for C:\test\node_modules\.pnpm\swiper@7.3.3\node_modules\swiper\swiper.min.css
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:22:14)
    at ESMLoader.load (node:internal/modules/esm/loader:353:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:274:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:291:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:255:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:81:21) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Node.js v17.2.0
 ELIFECYCLE  Command failed with exit code 1.

I used Vitesse starter template, with development everything working like a charm.

Issue Analytics

State:
Created 2 years ago
Reactions:13
Comments:17

Top GitHub Comments

11reactions

leosincommented, Jan 10, 2022

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for /Users/...../node_modules/swiper/swiper.scss
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:244:11)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:78:21)
    at async Promise.all (index 7) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

same issue

“vite”: “^2.7.10”, “vite-ssg”: “^0.17.5” “swiper”: “^7.4.1”,

6reactions

sibbngcommented, Feb 22, 2022

Probably it’s an issue with Vite’s import analysis. I made a plugin that removes swiper/css imports from the SSR bundle to allow vite-ssg to generate SSR pages successfully.

// vite.config.ts
export default defineConfig({
  plugins: [
    {
      name: 'remove-swiper',
      transform(code, id, options = {}) {
        if (options.ssr)
          return code.replace(/import .swiper\/(s?css|less).*$/gm, '')
      },
    },

    // other plugins
  ],
})

Top Results From Across the Web

Import CSS from "node_modules" in Webpack - Stack Overflow

You can import files relative to your project's root (resolving node_modules/ from the root folder) by prefixing with a tilde ~ :

Include plain CSS from node_modules in theme

I'm a bit stuck on this. A third party node_module includes styles in plain CSS, as normal. The theme only compiles .scss files....

Including css file from node_modules in scss - HUGO

I tried to include a css from node modules into my sass file like: @import "node_modules/@tomtom-international/web-sdk-maps/dist/maps"; but it seems to skip ...

css-loader | webpack - JS.ORG

To import styles from a node_modules path (include resolve.modules ) and for alias , prefix it with a ~ : @import url(~module/style.css) ...

postcss-import - npm

cwd() ), web_modules , node_modules or local modules. When importing a module, it will look for index.css or file referenced in package.json in ......