intlify / intlify/bundle-tools

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

Open
#220 9 comments 5 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
270
Forks
46
PR merge metrics
No merged PRs in 30d

Description

### Reporting a bug?

Hello!
I'm using [vite-ssr-plugin](https://github.com/brillout/vite-plugin-ssr) with vue3 and i18n with [unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n)
On build mode I have an error. But on dev mode everything is great.

```
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;
```
Found this comment about this problem, [https://github.com/intlify/vue-i18n-next/issues/1131#issuecomment-1232596381](https://github.com/intlify/vue-i18n-next/issues/1131#issuecomment-1232596381)
And explanation [https://github.com/vuejs/core/pull/4814#issuecomment-1232806856](https://github.com/vuejs/core/pull/4814#issuecomment-1232806856)
Also there are solution for `vite-plugin-vue-i18n` [https://github.com/intlify/bundle-tools/pull/172](https://github.com/intlify/bundle-tools/pull/172)
But I can't find solutions for `unplugin-vue-i18n`

Also opened issue in repo vite-plugin-ssr https://github.com/brillout/vite-plugin-ssr/issues/634

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

According to the [documentation](https://vite-plugin-ssr.com/prerender-config#partial) ssr can be customized with 4 keys. I'm trying to find out wich key is causing build error.

### Expected behavior

No error on build mode

### Reproduction

```
"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"
}
```

### Issue Package

unplugin-vue-i18n

### System Info

```shell
Linux 5.15.0-58-generic #64-Ubuntu SMP x86_64 x86_64 x86_64 GNU/Linux

```

### Screenshot

![изображение](https://user-images.githubusercontent.com/52418132/216887454-1d5006df-c08d-4733-97d5-c2909ad64228.png)

### Additional context

In vite.config.ts config file
```
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',
},
},
};

```

createI18n used in app.ts with this:
```
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;
}
```

### Validations

- [X] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/.github/contributing.md).
- [X] Read the README
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A open a [GitHub Discussion](https://github.com/intlify/bundle-tools/discussions).

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.