Module is a CommonJS module, which may not support all module.exports as named exports.

[alivadjid]

Description

Hello!
I'm using vite-ssr-plugin with vue3 and i18n with unplugin-vue-i18n
On build mode I have an error. But on dev mode everything is great.

Found this comment about this problem, intlify/vue-i18n#1131 (comment)
And explanation vuejs/core#4814 (comment)
Also there are solution for vite-plugin-vue-i18n intlify/bundle-tools#172
But I can't find solutions for unplugin-vue-i18n

Also opened issue in repo unplugin-vue-i18n, intlify/bundle-tools#220

If change ssr parameter in vite.config.ts - building is successfull

My vite.config.ts

import vue from '@vitejs/plugin-vue';
import ssr from 'vite-plugin-ssr/plugin';
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite';

const config: UserConfig = {
  plugins: [
    vue(),
    ssr({ prerender: true, includeAssetsImportedByServer: true }), // If put here ssr(), without parametrs - building successfull, without errors
    VueI18nPlugin({
      include: resolve(dirname(fileURLToPath(import.meta.url)), './locales/dictionary/**'),
    }),
  ],

  resolve: {
    alias: {
      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
    },
  },
};

Here how i18n is used in app.ts

import messages from '@intlify/unplugin-vue-i18n/messages';

export { createApp };

function createApp(pageContext: PageContext) {
  const { Page, pageProps } = pageContext;

  const i18n = createI18n({
    legacy: false,
    locale: pageContext.locale,
    fallbackLocale: 'en',
    messages,
  
  });

  const PageWithLayout = defineComponent({
    render() {
      return h(
        PageShell,
        {},
        {
          default() {
            return h(Page, pageProps || {});
          },
        }
      );
    },
  });

  const app = createSSRApp(PageWithLayout);

  app.use(i18n);
  app.use(vuetify);
  app.use(CountryFlag);

  app.provide('pageContext', pageContext);

  setPageContext(app, pageContext);

  return app;
}

package.json

"dependencies": {
    "@intlify/unplugin-vue-i18n": "0.8.1",
    "@mdi/font": "7.1.96",
    "@types/compression": "1.7.2",
    "@types/express": "4.17.16",
    "@types/node": "18.11.18",
    "@vitejs/plugin-vue": "4.0.0",
    "@vue/compiler-sfc": "3.2.45",
    "@vue/server-renderer": "3.2.45",
    "axios": "1.2.6",
    "compression": "1.7.4",
    "cross-env": "7.0.3",
    "express": "4.18.2",
    "roboto-fontface": "0.10.0",
    "sass": "1.57.1",
    "sass-loader": "13.2.0",
    "sirv": "2.0.2",
    "ts-node": "10.9.1",
    "typescript": "4.9.4",
    "vite": "4.0.4",
    "vite-plugin-ssr": "0.4.72",
    "vite-plugin-vuetify": "1.0.2",
    "vue": "3.2.45",
    "vue-i18n": "9.2.2",
    "vuetify": "3.1.2"
  },
  "type": "module",
  "devDependencies": {
    "@mdi/js": "7.1.96",
    "eslint": "8.33.0",
    "eslint-import-resolver-typescript": "3.5.3",
    "eslint-plugin-import": "2.27.5",
    "eslint-plugin-vue": "9.9.0",
    "vite-plugin-pwa": "0.14.1",
    "vite-svg-loader": "4.0.0",
    "vitepress": "1.0.0-alpha.43"
  }

Error Message + Error Stack

import { useI18n, createI18n } 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 { useI18n, createI18n } = pkg;

[WangJincheng4869]

我也遇见类似的问题，我是在项目中集成了vuepress2，想在vuepress展示自己开发的组件。结果导致无法执行pnpm docs:build。异常信息如下：

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.

[brillout]

Have you tried the suggested solution?

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

[alivadjid]

I tried to use the suggested solution and this is not resolve the problem.

[brillout]

What error did you get then?

[brillout]

Have you tried the suggested solution?

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

[WangJincheng4869]

非常感谢您的回答！
由于这段代码是vuepress2自动生成的，我不知道如何进行修改，不过我已经找到了临时的解决方案，如下代码添加了noExternal: ['vue-i18n']：

bundler: viteBundler({
    viteOptions: {
      plugins: [
        // @ts-ignore https:/jpkleemans/vite-svg-loader
        svgLoader(),
        // @ts-ignore https:/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
        VueI18nPlugin({
          runtimeOnly: true,
          compositionOnly: true,
          include: [resolve(__dirname, "../../locale/**")],
        }),
      ],
      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']
      }
    }
  }),

[brillout]

If someone is up for doing a translation, I'll then have a further look at it.

[alivadjid]

@brillout

ssr: {
        /**
         * Because an error will be reported during 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.
         * So add the following configuration. For details, see: https://vite-plugin-ssr.com/common-issues and https://vite-plugin-ssr.com/invalid-esm#solution
         */
        noExternal: ['vue-i18n']
      }

[brillout]

Reproduction welcome, I'll have a look at it then.