__vite_ssr_import_2__.default is not a function #68

engenes · 2022-05-18T12:58:13Z

I created an empty Nuxt project
npx nuxi init nuxt-app

then I added a intlify/nuxt3
yarn add -D @intlify/nuxt3

// nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    buildModules: ['@intlify/nuxt3'],
    // config for `@intlify/nuxt3`
    intlify: {
        vueI18n: {
            // You can setting same `createI18n` options here !
            locale: 'en',
            messages: {
                en: {
                    hello: 'Hello'
                },
                ja: {
                    hello: 'こんにちは'
                }
            }
        }
    }
})

and i get an error
__vite_ssr_import_2__.default is not a function

at /D:/work/nuxt-app/.nuxt/dist/server/server.mjs:10636:60
at fn (/D:/work/nuxt-app/.nuxt/dist/server/server.mjs:412:27)
at Object.callAsync (/D:/work/nuxt-app/node_modules/unctx/dist/index.mjs:41:19)
at callWithNuxt (/D:/work/nuxt-app/.nuxt/dist/server/server.mjs:414:23)
at applyPlugin (/D:/work/nuxt-app/.nuxt/dist/server/server.mjs:369:29)
at Module.applyPlugins (/D:/work/nuxt-app/.nuxt/dist/server/server.mjs:379:11)
at async createNuxtAppServer (/D:/work/nuxt-app/.nuxt/dist/server/server.mjs:46:7)
at async Object.renderToString (/D:/work/nuxt-app/node_modules/vue-bundle-renderer/dist/index.mjs:252:19)
at async /D:/work/nuxt-app/.nuxt/dev/index.mjs:465:20
at async /D:/work/nuxt-app/node_modules/h3/dist/index.mjs:417:19

my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@intlify/nuxt3": "^0.2.2",
    "nuxt": "3.0.0-rc.3"
  }
}

The text was updated successfully, but these errors were encountered:

phcent · 2022-05-19T05:15:56Z

same

phcent · 2022-05-19T06:03:24Z

临时解决方法：
/node_modules/@intlify/nuxt3/dist/module.mjs 第107行左右

    addTemplate({
      filename: INTLIFY_VUEI18N_OPTIONS_VIRTUAL_FILENAME,
      write: true,
      getContents: () => {
        return `${nuxt.options.dev ? "// 'vueI18n' option loading ..." : ""}`;
      }
    });
    const loaderOptions = {
      vueI18n: isObject(options.vueI18n) ? options.vueI18n : isString(options.vueI18n) ? resolve(nuxt.options.rootDir, options.vueI18n) : void 0
    };

替换为

    const loaderOptions = {
      vueI18n: isObject(options.vueI18n) ? options.vueI18n : isString(options.vueI18n) ? resolve(nuxt.options.rootDir, options.vueI18n) : void 0
    };
    addTemplate({
      filename: INTLIFY_VUEI18N_OPTIONS_VIRTUAL_FILENAME,
      write: true,
      getContents: () => {
        return `${nuxt.options.dev ? "// 'vueI18n' option loading ..." : ""}
export default async () => (
    ${JSON.stringify(loaderOptions.vueI18n)}
)
        `;
      }
    });

还有一处没有写入不影响使用

    addTemplate({
      filename: INTLIFY_LOCALE_VIRTUAL_FILENAME,
      +write: true,
      getContents: ({ utils }) => {
        const importMapper = /* @__PURE__ */ new Map();
        localeResources.forEach(({ locale }) => {
          importMapper.set(locale, utils.importName(`locale_${locale}`));
        });
        return `
${localeResources.map((l) => `import ${importMapper.get(l.locale)} from '${l.path}'`).join("\n")}
export default { ${[...importMapper].map((i) => `${JSON.stringify(i[0])}:${i[1]}`).join(",")} }
`;
      }
    });

Rasul1996 · 2022-05-19T07:01:40Z

Same

Rasul1996 · 2022-05-19T07:04:43Z

@kazupon

Aurion72 · 2022-05-19T08:33:02Z

Same

amy-rb2 · 2022-05-20T06:18:01Z

Same

igor0sipov · 2022-05-20T16:19:51Z

Same

RossComputerGuy · 2022-05-20T16:58:50Z

Which version of Nuxt 3 are you using?

engenes · 2022-05-20T17:40:21Z

Which version of Nuxt 3 are you using?

@RossComputerGuy my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@intlify/nuxt3": "^0.2.2",
    "nuxt": "3.0.0-rc.3"
  }
}

RossComputerGuy · 2022-05-20T17:51:49Z

Which version of Nuxt 3 are you using?

@RossComputerGuy my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@intlify/nuxt3": "^0.2.2",
    "nuxt": "3.0.0-rc.3"
  }
}

Use rc.1 for nuxt

alxtr1bal · 2022-05-22T15:19:32Z

Which version of Nuxt 3 are you using?

@RossComputerGuy my package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "devDependencies": {
    "@intlify/nuxt3": "^0.2.2",
    "nuxt": "3.0.0-rc.3"
  }
}

Use rc.1 for nuxt

same with rc.1

RossComputerGuy · 2022-05-22T18:44:50Z

Try building it and then run the server, you should get a more detailed error that way.

Bodokh · 2022-05-24T10:57:33Z

Here is the full error

ERROR  'default' is not exported by .nuxt/intlify.vuei18n.options.mjs, 
imported by virtual:nuxt:C:/Projects/test/app/.nuxt/plugin.mjs

Reproduced with Node 16 on windows 10 using nuxt rc3.
It's important to note that for some reason It is actually working for me on my Mac.

riptin · 2022-05-25T09:43:37Z

Same problem with Nuxt 3 rc.3

RossComputerGuy · 2022-05-27T02:08:55Z

I think this is related to #63

afif-hh · 2022-05-27T04:30:59Z

same problem with me, i think this is only happen in windows ?

RossComputerGuy · 2022-05-27T04:31:59Z

same problem with me, i think this is only happen in windows ?

No, I run Manjaro Linux and I've had this issue before.

afif-hh · 2022-05-27T04:35:53Z

is there any solution ? i akready update to 0.2.2 but still not working

RossComputerGuy · 2022-05-27T04:38:15Z

is there any solution ? i akready update to 0.2.2 but still not working

This could be related to #63 or #39 which both issues seem to have a fix.

codeflorist · 2022-05-27T09:16:07Z

afaics the whole shebang of this package can easily be replaced by simply installing https://vue-i18n.intlify.dev/ and adding a nuxt3 plugin by placing a file (e.g. called i18n.ts) in the plugins folder with the following content:

import { createI18n } from 'vue-i18n'

import de from '../locales/de.json'
import fr from '../locales/fr.json'

const i18n = createI18n({
	legacy: false,
	globalInjection: true,
	locale: 'de',
	fallbackLocale: 'de',
	messages: {
		de,
		fr,
	},
})

export default defineNuxtPlugin((nuxtApp) => {
	nuxtApp.vueApp.use(i18n)
})

davidsneal · 2022-06-08T08:35:56Z

Thanks @codeflorist, I went with your approach.

For anyone looking to use t() in computed properties, hopefully this will save you some time...

import { useI18n } from 'vue-i18n'
const { t } = useI18n({ useScope: 'global' })

erayturan · 2022-06-09T08:40:49Z

If are you using "vuetify", review the Vuetify Internationalization ...

anburocky3 · 2022-06-10T17:10:07Z

Why it is still not solved. 😔

erayturan · 2022-06-11T06:07:51Z

It works on me, and I hope helps someone...

  // package.json
  
   "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "^3.4.0",
        "nuxt": "^3.0.0-rc.3"
    },
    "dependencies": {
        "sass": "^1.51.0",
        "vue-i18n": "^9.2.0-beta.36",
        "vuetify": "^3.0.0-beta.3"
    }

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
import vueI18n from '@intlify/vite-plugin-vue-i18n';

export default defineNuxtConfig({
    ssr: true,
    css: [
        "~~/assets/variables.scss",
    ],
    build: {
        transpile: ["vuetify","vue-i18n"],
    },
    vite: {
        plugins: [
            vueI18n({
                // compositionOnly: false
            })
        ],
    },
})

// ~~/plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import { createI18n } from 'vue-i18n';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import messages from "~~/locales";

export default defineNuxtPlugin((nuxtApp) => {

    type MessageSchema = typeof messages.en;

    const i18n = createI18n<[MessageSchema], "en" | "tr">({
        locale: "tr",
        fallbackLocale: "en",
        messages
    });

    const vuetify = createVuetify({
        components,
        directives,
        defaults: {
            global: {
                ripple: false
            },
        },
    });

    nuxtApp.vueApp.use(vuetify);
    nuxtApp.vueApp.use(i18n);
});

// ~~/locales/en/index.ts

export default {
    title: "Component Title",
    email:{
        label: "Email Address",
        hint: "Text-field hint"
    }
}

// ~~/pages/index.ts
<template>
    <div>{{ t('title') }}</div>
    <v-text-field v-bind="tm('email')" />
</template>

<script lang="ts" setup>
    import { useI18n } from "vue-i18n";
    const { t, tm } = useI18n();
</script>

yashika · 2022-06-15T03:14:05Z

Same issue on freshly created project with "nuxt": "3.0.0-rc.4".

yashika · 2022-06-16T10:03:44Z

Same issue on freshly created project with "nuxt": "3.0.0-rc.4".

I fix it finally after I shift all my project from win10(ver 2004) to Ubuntu distro via WSL on win10.

you can check the WSL( Windows Sub Linux system ) https://docs.microsoft.com/windows/wsl/

so I think maybe some Intlify/nuxt3 deps packages only works on linux/darwin core.

LuckyWraptor · 2022-06-17T06:51:08Z

This looks like it is a windows only issue related to #63

davidsneal · 2022-06-17T07:05:33Z

This looks like it is a windows only issue related to #63

Nah, I'm on Mac, same issue

LuckyWraptor · 2022-06-17T07:07:32Z

This looks like it is a windows only issue related to #63

Nah, I'm on Mac, same issue

Hmmm, weird, what version of node & npm are you running?

erayturan · 2022-06-17T08:17:23Z

It works on me, and I hope helps someone...

  // package.json
  
   "devDependencies": {
        "@intlify/vite-plugin-vue-i18n": "^3.4.0",
        "nuxt": "^3.0.0-rc.3"
    },
    "dependencies": {
        "sass": "^1.51.0",
        "vue-i18n": "^9.2.0-beta.36",
        "vuetify": "^3.0.0-beta.3"
    }

// nuxt.config.ts

import { defineNuxtConfig } from "nuxt";
import vueI18n from '@intlify/vite-plugin-vue-i18n';

export default defineNuxtConfig({
    ssr: true,
    css: [
        "~~/assets/variables.scss",
    ],
    build: {
        transpile: ["vuetify","vue-i18n"],
    },
    vite: {
        plugins: [
            vueI18n({
                // compositionOnly: false
            })
        ],
    },
})

// ~~/plugins/vuetify.ts

import { createVuetify } from 'vuetify';
import { createI18n } from 'vue-i18n';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

import messages from "~~/locales";

export default defineNuxtPlugin((nuxtApp) => {

    type MessageSchema = typeof messages.en;

    const i18n = createI18n<[MessageSchema], "en" | "tr">({
        locale: "tr",
        fallbackLocale: "en",
        messages
    });

    const vuetify = createVuetify({
        components,
        directives,
        defaults: {
            global: {
                ripple: false
            },
        },
    });

    nuxtApp.vueApp.use(vuetify);
    nuxtApp.vueApp.use(i18n);
});

// ~~/locales/en/index.ts

export default {
    title: "Component Title",
    email:{
        label: "Email Address",
        hint: "Text-field hint"
    }
}

// ~~/pages/index.ts
<template>
    <div>{{ t('title') }}</div>
    <v-text-field v-bind="tm('email')" />
</template>

<script lang="ts" setup>
    import { useI18n } from "vue-i18n";
    const { t, tm } = useI18n();
</script>

It's looks like working windows and mac.

node version: 16.13.2
npm version: 8.1.2

{
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
    "nuxt": "^3.0.0-rc.4"
  },
  "dependencies": {
    "sass": "^1.51.0",
    "vue-i18n": "^9.2.0-beta.36",
    "vuetify": "^3.0.0-beta.3"
  }
}

anburocky3 · 2022-06-26T08:59:50Z

const { t, tm } = useI18n();

@erayturan
Do i need to import in each file? Is there any global access like $t()?

codeflorist · 2022-06-26T13:43:30Z

@erayturan Do i need to import in each file? Is there any global access like $t()?

$t() is globally accessible in templates but not in script setup. so this should work:

// ~~/pages/index.vue
<template>
    <div>{{ $t('title') }}</div>
</template>

for script setup, you can make useI18n() accessible via autoload without requiring the import statement via creating a file called useI18n within the composables folder with the following content:

import { useI18n as useI18nSrc } from 'vue-i18n'
export const useI18n = () => useI18nSrc()

chaule97 · 2022-06-27T08:39:08Z

I tried it but it show Need to install with app.use function

Aurion72 · 2022-06-29T09:05:11Z

still getting error "vite_ssr_import_2.default is not a function" with RC4

aymaalo · 2022-07-01T07:49:54Z

Same error and no solution working...

kenan-dfrn · 2022-07-01T23:17:28Z

same problem for me

anburocky3 · 2022-07-02T10:00:55Z

Guys I have solved this problem by @erayturan without using vuetify.

Link of my open source project: https://github.com/anburocky3/developer-resources (Feel free to browse the code and check what i used to make it work.)

zenonux · 2022-07-04T08:02:45Z

Same issue on freshly created project with "nuxt": "3.0.0-rc.4".

androcado · 2022-07-06T10:19:31Z

I have the same issue. How we can fix it?

MessyComposer · 2022-07-06T15:51:43Z

I have the same issue. How we can fix it?

Seems to be OS specific.
If you're on Windows, run it with WSL or docker instead.

riptin mentioned this issue May 25, 2022

The requested module '/_nuxt/.nuxt/intlify.vuei18n.options.mjs' does not provide an export named 'default' #67

Open

ZCube added a commit to ZCube/nuxt3 that referenced this issue Jul 3, 2022

fix : intlify#68 default is not a function problem.

4718540

ZCube added a commit to ZCube/nuxt3 that referenced this issue Jul 6, 2022

fix : intlify#68 default is not a function problem.

071edbb

kazupon closed this as completed in c2845ed Jul 7, 2022

__vite_ssr_import_2__.default is not a function #68

__vite_ssr_import_2__.default is not a function #68

Comments

engenes commented May 18, 2022

phcent commented May 19, 2022

phcent commented May 19, 2022

Rasul1996 commented May 19, 2022

Rasul1996 commented May 19, 2022

Aurion72 commented May 19, 2022

amy-rb2 commented May 20, 2022

igor0sipov commented May 20, 2022

RossComputerGuy commented May 20, 2022

engenes commented May 20, 2022 • edited

RossComputerGuy commented May 20, 2022

alxtr1bal commented May 22, 2022 • edited

RossComputerGuy commented May 22, 2022

Bodokh commented May 24, 2022

riptin commented May 25, 2022

RossComputerGuy commented May 27, 2022

afif-hh commented May 27, 2022

RossComputerGuy commented May 27, 2022

afif-hh commented May 27, 2022

RossComputerGuy commented May 27, 2022

codeflorist commented May 27, 2022 • edited

davidsneal commented Jun 8, 2022

erayturan commented Jun 9, 2022 • edited

anburocky3 commented Jun 10, 2022

erayturan commented Jun 11, 2022 • edited

yashika commented Jun 15, 2022 • edited

yashika commented Jun 16, 2022

LuckyWraptor commented Jun 17, 2022

davidsneal commented Jun 17, 2022

LuckyWraptor commented Jun 17, 2022

erayturan commented Jun 17, 2022

anburocky3 commented Jun 26, 2022

codeflorist commented Jun 26, 2022

chaule97 commented Jun 27, 2022 • edited

Aurion72 commented Jun 29, 2022

aymaalo commented Jul 1, 2022

kenan-dfrn commented Jul 1, 2022

anburocky3 commented Jul 2, 2022

zenonux commented Jul 4, 2022

androcado commented Jul 6, 2022

MessyComposer commented Jul 6, 2022

engenes commented May 20, 2022 •

edited

alxtr1bal commented May 22, 2022 •

edited

codeflorist commented May 27, 2022 •

edited

erayturan commented Jun 9, 2022 •

edited

erayturan commented Jun 11, 2022 •

edited

yashika commented Jun 15, 2022 •

edited

chaule97 commented Jun 27, 2022 •

edited