__vite_ssr_import_2__.default is not a function

Question

__vite_ssr_import_2__.default is not a function

engenes opened this issue 2 years ago · comments

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

Tycoon Song commented 2 years ago

same

Rasul1996 commented 2 years ago

Same

Rasul1996 commented 2 years ago

@kazupon

Aurion SARL commented 2 years ago

Same

amy commented 2 years ago

Same

Igor Osipov commented 2 years ago

Same

Tycoon Song · Answer 1 · Thu May 19 2022 14:03:24 GMT+0800 (China Standard Time)

临时解决方法：
/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(",")} }
`;
      }
    });

Tristan Ross · Answer 2 · Sat May 21 2022 00:58:50 GMT+0800 (China Standard Time)

Which version of Nuxt 3 are you using?

engenes · Answer 3 · Sat May 21 2022 01:40:21 GMT+0800 (China Standard Time)

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

Tristan Ross · Answer 4 · Sat May 21 2022 01:51:49 GMT+0800 (China Standard Time)

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 · Answer 5 · Sun May 22 2022 23:19:32 GMT+0800 (China Standard Time)

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

Tristan Ross · Answer 6 · Mon May 23 2022 02:44:50 GMT+0800 (China Standard Time)

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

Eran · Answer 7 · Tue May 24 2022 18:57:33 GMT+0800 (China Standard Time)

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 · Answer 8 · Wed May 25 2022 17:43:37 GMT+0800 (China Standard Time)

Same problem with Nuxt 3 rc.3

Tristan Ross · Answer 9 · Fri May 27 2022 10:08:55 GMT+0800 (China Standard Time)

I think this is related to #63

afif hh · Answer 10 · Fri May 27 2022 12:30:59 GMT+0800 (China Standard Time)

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

Tristan Ross · Answer 11 · Fri May 27 2022 12:31:59 GMT+0800 (China Standard Time)

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 · Answer 12 · Fri May 27 2022 12:35:53 GMT+0800 (China Standard Time)

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

Tristan Ross · Answer 13 · Fri May 27 2022 12:38:15 GMT+0800 (China Standard Time)

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 · Answer 14 · Fri May 27 2022 17:16:07 GMT+0800 (China Standard Time)

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)
})

David Neal · Answer 15 · Wed Jun 08 2022 16:35:56 GMT+0800 (China Standard Time)

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 · Answer 16 · Thu Jun 09 2022 16:40:49 GMT+0800 (China Standard Time)

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

Anbuselvan Annamalai · Answer 17 · Sat Jun 11 2022 01:10:07 GMT+0800 (China Standard Time)

Why it is still not solved. 😔

erayturan · Answer 18 · Sat Jun 11 2022 14:07:51 GMT+0800 (China Standard Time)

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 · Answer 19 · Wed Jun 15 2022 11:14:05 GMT+0800 (China Standard Time)

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

yashika · Answer 20 · Thu Jun 16 2022 18:03:44 GMT+0800 (China Standard Time)

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.

Thibaut Nijs · Answer 21 · Fri Jun 17 2022 14:51:08 GMT+0800 (China Standard Time)

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

David Neal · Answer 22 · Fri Jun 17 2022 15:05:33 GMT+0800 (China Standard Time)

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

Nah, I'm on Mac, same issue

Thibaut Nijs · Answer 23 · Fri Jun 17 2022 15:07:32 GMT+0800 (China Standard Time)

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 · Answer 24 · Fri Jun 17 2022 16:17:23 GMT+0800 (China Standard Time)

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

Anbuselvan Annamalai · Answer 25 · Sun Jun 26 2022 16:59:50 GMT+0800 (China Standard Time)

const { t, tm } = useI18n();

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

codeflorist · Answer 26 · Sun Jun 26 2022 21:43:30 GMT+0800 (China Standard Time)

@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()

Lê Châu · Answer 27 · Mon Jun 27 2022 16:39:08 GMT+0800 (China Standard Time)

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

Aurion SARL · Answer 28 · Wed Jun 29 2022 17:05:11 GMT+0800 (China Standard Time)

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

Malo · Answer 29 · Fri Jul 01 2022 15:49:54 GMT+0800 (China Standard Time)

Same error and no solution working...

Anebris · Answer 30 · Sat Jul 02 2022 07:17:28 GMT+0800 (China Standard Time)

same problem for me

Anbuselvan Annamalai · Answer 31 · Sat Jul 02 2022 18:00:55 GMT+0800 (China Standard Time)

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.)

换个头像心好累。 · Answer 32 · Mon Jul 04 2022 16:02:45 GMT+0800 (China Standard Time)

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

Andre Eberle · Answer 33 · Wed Jul 06 2022 18:19:31 GMT+0800 (China Standard Time)

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

MessyComposer · Answer 34 · Wed Jul 06 2022 23:51:43 GMT+0800 (China Standard Time)

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.