npm run build with AntDesignVueResolver [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/project/node_modules/ant-design-vue/es' is not supported resolving ES modules

[u007]

i have tried to set cjs to both true and false to build, but same error. using all latest version.

Components({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

      // custom resolvers
      resolvers: [
        // auto import icons
        // https://github.com/antfu/unplugin-icons
        IconsResolver({
          componentPrefix: '',
          // enabledCollections: ['carbon']
        }),
        // https://github.com/antfu/unplugin-vue-components/issues/202
        AntDesignVueResolver({  
          cjs: false
        }),
      ],

      dts: 'src/components.d.ts',
    }),

error:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
(node:186362) UnhandledPromiseRejectionWarning: Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/project/node_modules/ant-design-vue/es' is not supported resolving ES modules imported from /home/project/.vite-ssg-temp/main.mjs
Did you mean to import [email protected]_ae87cbba5ec93a01f3fe1197df446ca3/node_modules/ant-design-vue/es/index.js?
    at new NodeError (internal/errors.js:322:7)
    at finalizeResolution (internal/modules/esm/resolve.js:304:17)
    at moduleResolve (internal/modules/esm/resolve.js:731:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
    at Loader.resolve (internal/modules/esm/loader.js:89:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
    at link (internal/modules/esm/module_job.js:75:36)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:186362) 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: 17)
(node:186362) [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.

npm run dev works fine, using template from https://github.com/antfu/vitesse

[liangyuanzu]

I also have this problem

[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/process/promises:246
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/jason_liang/Documents/Code/suiji/suiji-webapp/webapp/node_modules/ant-design-vue/es/locale/en_US' imported from /Users/jason_liang/Documents/Code/suiji/suiji-webapp/webapp/.vite-ssg-temp/main.mjs
Did you mean to import [email protected]_ae87cbba5ec93a01f3fe1197df446ca3/node_modules/ant-design-vue/es/locale/en_US.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
 ELIFECYCLE  Command failed with exit code 1.
 ELIFECYCLE  Command failed with exit code 1.

npm run dev works fine, using template from https://github.com/antfu/vitesse

[jincandev]

+1 我现在是使用SSR，使用unplugin-vue-components/vite和unplugin-vue-components/resolvers时，出现问题：

下面是我的配置:

如果我直接使用 createSSRApp().use引入，是能正常使用的

[KeremKoksal]

I had the same problem with primevue and vitesse

Vitesse also uses vite-ssg. Setting format to cjs in ssgOptions fixed my issue.

vite.config.ts:

...

  ssgOptions: {
    script: 'async',
    formatting: 'minify',
    format: 'cjs'
  },

...

Also, I have updated all the packages.

...
    "unplugin-vue-components": "^0.17.18",
    "vite": "^2.8.4",
    "vite-plugin-inspect": "^0.3.14",
    "vite-plugin-md": "^0.11.8",
    "vite-plugin-pages": "^0.20.2",
    "vite-plugin-pwa": "^0.11.13",
    "vite-plugin-vue-layouts": "^0.6.0",
    "vite-plugin-windicss": "^1.7.1",
    "vite-ssg": "^0.17.10",
...

[u007]

Hi KeremKosal, i follow your configuration but im getting:

node_modules/.pnpm/[email protected]_4f726de02e89ff745196f225ebb1bbcf/node_modules/ant-design-vue/es/index.js:1
import * as components from './components';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)

[vikashmadhow]

@KeremKoksal: thanks a lot, this solved my issue.

[Kagigz]

@KeremKoksal I followed your advice but I have the same issue as @u007

[Kagigz]

Actually, I used

        AntDesignVueResolver({
          importStyle: 'less',
          cjs: process.env.NODE_ENV === 'production',
        }),

and the error above disappeared, but now I have another issue:

/.../node_modules/.pnpm/[email protected][email protected]/node_modules/ant-design-vue/lib/style/default.less:2
@root-entry-name: default;
^

SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/katiagg/stripe/sandbox-apps/tool-fees-calculator/node_modules/.pnpm/[email protected][email protected]/node_modules/ant-design-vue/lib/col/style/index.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)

[u007]

@Kagigz can u try add less to your package?

[Kagigz]

I have this in my dependencies:

    "less": "^4.1.3",
    "less-loader": "^11.0.0"

[Kagigz]

I had to remove the AntDesignResolver altogether in order for my app to build. Having a module with

import Antd from 'ant-design-vue'

import { UserModule } from '~/types'

import 'ant-design-vue/dist/antd.less'

export const install: UserModule = ({ isClient, app }) => {
  app.use(Antd)
}

imports the components globally and solves the issues.

[u007]

on nuxt, i can specify transpile option, I'm not sure how todo it with this vitesses repo

[s90180007]

Actually, I used

        AntDesignVueResolver({
          importStyle: 'less',
          cjs: process.env.NODE_ENV === 'production',
        }),

and the error above disappeared, but now I have another issue:

/.../node_modules/.pnpm/[email protected][email protected]/node_modules/ant-design-vue/lib/style/default.less:2
@root-entry-name: default;
^

SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1049:15)
    at Module._compile (node:internal/modules/cjs/loader:1084:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1174:10)
    at Module.load (node:internal/modules/cjs/loader:998:32)
    at Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1022:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/katiagg/stripe/sandbox-apps/tool-fees-calculator/node_modules/.pnpm/[email protected][email protected]/node_modules/ant-design-vue/lib/col/style/index.js:3:1)
    at Module._compile (node:internal/modules/cjs/loader:1120:14)

I have the same problem with Astro (