vite-ssg: ERR_UNKNOWN_FILE_EXTENSION - Problem with import css/scss from pnpm/node_modules

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

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

Same issue here but with Element Plus

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 ?

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

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

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

@zouhangwithsweet does not work for me

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