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 ......