[Bug report] 引入element-plus后，npm run docs:build打包时报错

[bobo456123]

Description

你好，遇到个问题，我在vuepress2.x 中引入element-plus，配置了clientAppEnhance.ts，执行npm run docs:build打包命令时，报错如下：

✔ Compiling with vite - done
✖ Rendering pages - failed
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: D:\Code\VuepressDoc\node_modules\element-plus\es\components\dropdown\style\css.mjs
    at Module.load (internal/modules/cjs/loader.js:926:11)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Module.<anonymous> (D:\Code\VuepressDoc\docs\.vuepress\dist\.server\app.js:30:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuepress-dos@1.0.0 docs:build: `vuepress build docs`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuepress-dos@1.0.0 docs:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

# clientAppEnhance.ts代码：

import { defineClientAppEnhance } from '@vuepress/client'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

export default defineClientAppEnhance(({ app, router, siteData }) => {
  console.log("clientAppEnhance.ts");
  console.log(app, router, siteData);
  app.use(ElementPlus);
})

Reproduction

https://github.com/bobo456123/VuepressDoc.git

Used Package Manager

npm

System Info

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (4) x64 Intel(R) Core(TM) i5-4300M CPU @ 2.60GHz    
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.32)
  npmPackages:
    @vuepress/core:  2.0.0-beta.43 
    @vuepress/theme-default:  2.0.0-beta.43 
    vuepress: ^2.0.0-beta.39 => 2.0.0-beta.43 
  npmGlobalPackages:
    vuepress: Not Found

[meteorlxy]

Try ssr.noExternal config of vite:

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      ssr: {
        noExternal: ['element-plus'],
      },
    },
  }),
})

[bobo456123]

Try ssr.noExternal config of vite:

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      ssr: {
        noExternal: ['element-plus'],
      },
    },
  }),
})

解答很准确，按照这个方法修改后，能够正常打包。感谢

[HarperGG]

Try ssr.noExternal config of vite:

import { viteBundler } from '@vuepress/bundler-vite'
import { defineUserConfig } from '@vuepress/cli'

export default defineUserConfig({
  bundler: viteBundler({
    viteOptions: {
      ssr: {
        noExternal: ['element-plus'],
      },
    },
  }),
})

这个方法确实有效，但是可能"vuepress": "^2.0.0-beta.38"版本的配置有些不同

import { defineUserConfig } from '@vuepress'

export default defineUserConfig({ bundlerConfig: { viteOptions: { ssr: { noExternal: ['naive-ui'], }, }, }, })