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

[szbc]

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.

[alexgrozav]

I'm probably having the same issue, but for .vue files: https://github.com/antfu/vite-ssg/issues/162

[leosin]

[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",

[gravitano]

Anybody got solusion? Some issue here:

[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 /Users/xxx/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: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 14) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}
error Command failed with exit code 1.

Deps:

    "vite-ssg": "^0.17.10",
    "vite": "^2.5.4",
    "swiper": "^8.0.6",

[sibbng]

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
  ],
})

[leosin]

thank you for your great job, it works 👏 👏 👍🏼

[intermundos]

Same issue here but with Element Plus

[AxelConceicao]

I'm stuck using element-plus, does anyone have an idea?

[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:12057) UnhandledPromiseRejectionWarning: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for /home/project/node_modules/.pnpm/element-plus@2.1.0_1a412d14def5ff5ca1122000e4bee666/node_modules/element-plus/theme-chalk/src/main.scss
    at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
    at Loader.getFormat (internal/modules/esm/loader.js:104:42)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:31)
    at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
    at async Promise.all (index 1)
    at async link (internal/modules/esm/module_job.js:63:9)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:12057) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 14)
(node:12057) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.```

[Dianliang233]

I'm getting the same error again, this time with Vuetify 3 beta.

I was trying to import:

import 'vuetify/styles'

Error message:

[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:\.....\node_modules\vuetify\lib\styles\main.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: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 4) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

I later tried replacing it by directly importing the CSS file but the issue still exists, this time with a different CSS file in the Vuetify package (\node_modules\vuetify\lib\components\VCode\VCode.css).

[bonbisu]

I also using Swiper and notice if I use @sibbng 's solution, Swiper stops to work on dev.

[Zehir]

I'm getting the same error again, this time with Vuetify 3 beta.

I was trying to import:

import 'vuetify/styles'

Error message:

[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:\.....\node_modules\vuetify\lib\styles\main.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: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 4) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

I later tried replacing it by directly importing the CSS file but the issue still exists, this time with a different CSS file in the Vuetify package (\node_modules\vuetify\lib\components\VCode\VCode.css).

Did you find a solution to that ?

[zouhangwithsweet]

Update vite@^3.0.0-alpha.9, it works well.

[Grawl]

@zouhangwithsweet does not work for me

[morty0824]

any solution?

[Grawl]

@morty0824 only one solution I found is to copy .css imports from node_modules to src. The problem is with node_modules folder ignored somewhere in build process, where own sources are not

[Zehir]

The solution with vite 3 is to set the package to ssr.noExternal For example:

// Imports

export default defineConfig({
...
  // https://github.com/antfu/vite-ssg
  ssgOptions: {
    script: 'async',
    formatting: 'minify',
    onFinished() { generateSitemap() },
  },

  ssr: {
    // TODO: workaround until they support native ESM
    noExternal: ['workbox-window', /vue-i18n/, 'vuetify'],
  },
})

[hefeng6500]

same problem！build error when use element-plus

[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:477
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".scss" for E:\workspace\platform\node_modules\element-plus\theme-chalk\src\message.scss
    at new

[hefeng6500]

[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",

are you solve this problem?

[amirtbi]

I have the same issue as following : TypeError: Unknown file extension ".css" for /home/torabi/project/node_modules/vuetify/lib/components/VAvatar/VAvatar.css

my app version consits of :"Vite 3.2.3" and Vuetify 3.0.1"

[justinzpc]

this error seem like throw from dependency pack ‘yargs’, is this problem still unsolved?

[Resuragam]

I have the same problem： node: v16.15.0, vite-ssg: v0.22.0 and vant: v3.6.6 who can help me to solve this problem?

[UilquerDaniel]

O meu Problema foi resolvido assim:

"build: { transpile: ["vuetify"] }", // Adicione essa linha ao código para que o VITE entenda como interpretar o conteúdo do Framework

`export default defineNuxtConfig({ devtools: { enabled: false },

build: { transpile: ["vuetify"] }, // Adicione essa linha ao código para que o VITE entenda como interpretar o conteúdo do Framework

plugins:[ "plugins/vuetify", '~/plugins/rules', '~/plugins/money', '~/plugins/timeToHorasMinutes', '~/plugins/formatTime' //'~/plugins/moneydirective' ]

}) `

[weijunfu]

What is the best solution?