intlify / vue-i18n

Vue I18n for Vue 3
https://vue-i18n.intlify.dev/
MIT License
2.01k stars 320 forks source link

【vuepress2中打包报错】SyntaxError: Named export 'createI18n' not found. The requested module 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports. #1335

Closed WangJincheng4869 closed 1 year ago

WangJincheng4869 commented 1 year ago

Reporting a bug?

import { createI18n, useI18n } from "vue-i18n/dist/vue-i18n.runtime.esm-bundler.js";
         ^^^^^^^^^^
SyntaxError: Named export 'createI18n' not found. The requested module 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js';
const { createI18n, useI18n } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
 ELIFECYCLE  Command failed with exit code 1.

Expected behavior

运行命令:pnpm docs:bulid 就会报错,如果时正常运行是可以使用的!

Reproduction

https://github.com/WangJincheng4869/fanKuiWenJian/blob/main/%5Bvue-i18n%5D%20-%20vuepress2%20bulid%20error%20--SyntaxError%20-%20Named%20export%20createI18n%20not%20found.zip

image image

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 16.11 GB / 31.56 GB
  Binaries:
    Node: 18.14.0 - D:\Program Files\nodejs\node.EXE
    npm: 9.2.0 - D:\Users\jcwang\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1265.0), Chromium (110.0.1587.46)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @intlify/unplugin-vue-i18n: ^0.8.1 => 0.8.1 
    @vitejs/plugin-vue: ^4.0.0 => 4.0.0 
    vite: ^4.1.1 => 4.1.1 
    vite-plugin-compression2: ^0.6.3 => 0.6.3 
    vite-svg-loader: ^4.0.0 => 4.0.0 
    vue: ^3.2.47 => 3.2.47 
    vue-i18n: 9.2.2 => 9.2.2 
    vue-router: ^4.1.6 => 4.1.6 
    vue-tsc: ^1.0.24 => 1.0.24 
    vuepress: 2.0.0-beta.60 => 2.0.0-beta.60 
    vuepress-theme-hope: 2.0.0-beta.174 => 2.0.0-beta.174 


### Screenshot

_No response_

### Additional context

_No response_

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/intlify/vue-i18n-next/blob/master/.github/CONTRIBUTING.md)
- [X] Read the [Documentation](https://vue-i18n.intlify.dev/)
- [X] Check that there isn't [already an issue](https://github.com/intlify/vue-i18n-next/issues) that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussions](https://github.com/intlify/vue-i18n-next/discussions)
denisibanez commented 1 year ago

the same problem

WangJincheng4869 commented 1 year ago

添加 noExternal 后可以打包

bundler: viteBundler({
    viteOptions: {
      plugins: [
        // https://github.com/jpkleemans/vite-svg-loader
        svgLoader(),
        // https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
        VueI18nPlugin({
          runtimeOnly: true,
          compositionOnly: true,
          include: [resolve(__dirname, "../../locales/**")],
        }),
      ],
      ssr: {
        /**
         * 由于在 build 时会报错 SyntaxError: Named export 'createI18n' not found.
         * The requested module 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js' is a CommonJS module, which may not support all module.exports as named exports.
         * 所以要添加以下配置。详见:https://vite-plugin-ssr.com/common-issues 与 https://vite-plugin-ssr.com/invalid-esm#solution
         */
        noExternal: ['vue-i18n']
      }
    }
  }),
kazupon commented 1 year ago

This issue is around cjs / esm in bundler, it can be worked around in bundler configuration. vue-i18n is esm first. vue-i18n is esm first and also provides cjs. You can check in the vue-i18n dist directory.

Thanks!