Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
4 tasks done
alivadjid opened this issue Feb 5, 2023 · 8 comments
Open
4 tasks done
Labels
Type: Bug Bug or Bug fixes

Comments

@alivadjid
Copy link

alivadjid commented Feb 5, 2023

Reporting a bug?

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.

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, intlify/vue-i18n#1131 (comment)
And explanation vuejs/core#4814 (comment)
Also there are solution for vite-plugin-vue-i18n #172
But I can't find solutions for unplugin-vue-i18n

Also opened issue in repo vite-plugin-ssr vikejs/vike#634

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

According to the documentation 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

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

Screenshot

изображение

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

  • Read the Contributing Guidelines.
  • Read the README
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion.
@alivadjid
Copy link
Author

after some updates error changed
изображение

@lermontex
Copy link

lermontex commented Feb 18, 2023

The same error with @intlify/unplugin-vue-i18n 0.8.2

file:///srv/app/dist/server/entry-server.js:8
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;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)

@WangJincheng4869
Copy link

我也遇见类似的问题,我是在项目中集成了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.

@alivadjid
Copy link
Author

Well, for solve this error i removed i18n from project, and tried to use self-written package for internationalization.

@lermontex
Copy link

lermontex commented Feb 21, 2023

@alivadjid, The issue is with the Vite plugin unplugin-vue-i18n, not vue-i18n. The unplugin-vue-i18n plugin is optional for vue-i18n. You can import messages yourself, as described in the documentation.

However, it is very sad that the declared functionality of this plugin does not work.

@WangJincheng4869
Copy link

@alivadjid 我也有类似的问题,我找到了一个折衷方案,希望能够帮助到您,下方是我的的配置:(I have similar problems. I have found a compromise that I hope will help you. Below is my configuration:)

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']
      }

@SuzanaK
Copy link

SuzanaK commented Apr 17, 2023

@WangJincheng4869 Your solution fixed my production build but then I could not start my App in dev mode anymore ("module not found"). I uninstalled unplugin-vue-i18n and used vue-i18n directly and now it works in dev and prod.

@lencil
Copy link

lencil commented Sep 16, 2023

@WangJincheng4869 Your solution fixed my production build but then I could not start my App in dev mode anymore ("module not found"). I uninstalled unplugin-vue-i18n and used vue-i18n directly and now it works in dev and prod.
use
const isProduction = process.env.NODE_ENV === 'production';

to do some special case in vite config file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Bug or Bug fixes
Projects
None yet
Development

No branches or pull requests

6 participants