intlify / vite-plugin-vue-i18n Goto Github PK

[vite]: Rollup failed to resolve import "@intlify/shared" from "node_modules/vue-i18n/dist/vue-i18n.runtime.esm-bundler.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { createI18n } from 'vue-i18n'
import messages from "@intlify/vite-plugin-vue-i18n/messages";

// https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n
const i18n = createI18n({
    legacy: false,
    locale: 'en',
    messages
})

let app = createApp(App)
app.use(router)
app.use(VueAxios, axios)
app.use(i18n)
app.mount('#app')

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "jest",
      "vite/client",
      "@types/jest",
      "vite-plugin-pwa/client",
      "cypress",
      "@intlify/vite-plugin-vue-i18n/client"
    ],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost", "WebWorker"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/tests/**/*.ts",
    "src/tests/**/*.tsx"
  ],
  "exclude": ["node_modules"]
}

import {UserConfig, defineConfig, UserConfigExport} from 'vite'
import Vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'
import replace from '@rollup/plugin-replace'
import path from 'path'
import vueI18n from '@intlify/vite-plugin-vue-i18n'
const srcPath = path.resolve(__dirname, './src');

const config: UserConfigExport = defineConfig({
  resolve: {
    alias: [
      {find: "@", replacement: path.resolve(__dirname, 'src')}
    ],
    // optimizeDeps: {
    //   include: [
    //     "javascript-time-ago/locale/de"
    //   ],
    // },
  },
  // base: process.env.BASE_URL || 'https://github.com/',
  build: {
    sourcemap: process.env.SOURCE_MAP === 'true',
  },
  optimizeDeps: {
    include: ['swiper/vue'],
  },
  plugins: [
    Vue(),
    vueI18n({
      include: path.resolve(__dirname, './**/locales/**'),
    }),
    VitePWA({
      mode: 'development',
      srcDir: 'src',
      filename: 'sw.ts',
      base: '/',
      strategies: 'injectManifest',
    }),
    replace({
      preventAssignment: true,
      'process.browser': true,
      __DATE__: new Date().toISOString(),
    }),
  ],
})

export default config

{

  "name": "vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "test": "jest src",
    "build": "vite build",
    "test:e2e": "start-server-and-test dev http-get://localhost:3000 cypress",
    "cypress": "cypress run",
    "lint:script": "eslint --ext .ts,vue --ignore-path .gitignore .",
    "lint:style": "stylelint src/**/*.{css,scss,vue}",
    "lint:markup": "vti diagnostics",
    "https-preview": "serve dist"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "swiper": "^6.5.7",
    "typescript": "^4.2.4",
    "vue": "^3.0.4",
    "vue-axios": "^3.2.4",
    "vue-i18n": "^9.1.6",
    "vue-router": "4"
  },
  "devDependencies": {
    "@intlify/vite-plugin-vue-i18n": "^2.1.2",
    "@rollup/plugin-replace": "^2.4.2",
    "@types/jest": "^26.0.22",
    "@types/debug": "^4.1.5",
    "@types/jsdom": "^16.2.5",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "@vitejs/plugin-vue": "^1.2.1",
    "@vue/compiler-sfc": "^3.0.4",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-rc.6",
    "cypress": "^7.1.0",
    "eslint": "^7.25.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.9.0",
    "https-localhost": "^4.6.4",
    "husky": "^6.0.0",
    "jest": "^26.6.3",
    "lint-staged": "^10.5.4",
    "prettier": "^2.2.1",
    "sass": "^1.32.10",
    "start-server-and-test": "^1.12.1",
    "stylelint": "^13.12.0",
    "stylelint-config-recommended": "^4.0.0",
    "stylelint-config-standard": "^21.0.0",
    "ts-jest": "^26.5.5",
    "typescript-eslint-language-service": "^4.1.3",
    "vite": "^2.1.5",
    "vite-plugin-pwa": "^0.7.2",
    "vti": "^0.1.1",
    "vue-jest": "^5.0.0-alpha.7"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,vue}": "eslint --fix",
    "*.{css,scss,vue}": "stylelint --fix",
    "*": "prettier -w -u"
  }
}

vueI18n({
  include: path.resolve(__dirname, ".src/locales/**"),
  compositionOnly: false,
}),

yarn build
yarn serve

TypeError: messageCompiler is not a function
    at compileMessageFormat (vendor.5894b8cb.js:4759)
    at translate (vendor.5894b8cb.js:4697)
    at vendor.5894b8cb.js:5182
    at wrapWithDeps (vendor.5894b8cb.js:5170)
    at Object.t (vendor.5894b8cb.js:5182)
    at Object.t (vendor.5894b8cb.js:5571)
    at Proxy.$t (vendor.5894b8cb.js:5911)
    at Proxy._sfc_render (index.21a6f879.js:54)
    at renderComponentRoot (vendor.5894b8cb.js:1223)
    at componentEffect (vendor.5894b8cb.js:2437)
logError @ vendor.5894b8cb.js:969

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueI18n from "@intlify/vite-plugin-vue-i18n";;
export default defineConfig({
  plugins: [
      vue(),
    vueI18n({
    // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
    compositionOnly: false,

    // you need to set i18n resource including paths !
    include: path.resolve(__dirname, './src/locales/')
  })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
  },
})

import { createI18n } from 'vue-i18n'
import en from './locales/en.json';
import ar from './locales/ar.json';
const  i18n=createI18n(
    {
      locale:'en',
      messages:{
        en,
        ar
      }
    }
)
app.use(i18n);

| root/
| -- node_modules/
| -- package.json
| -- client/
| ---- package.json
| -- server/
| ---- package.json

export default {
  
}

<template>
  <form>
    <label>{{ t('language') }}</label>
    <select v-model="locale">
      <option value="en">en</option>
      <option value="ja">ja</option>
    </select>
  </form>
  <p>{{ t('hello') }}</p>
</template>

<script>
import { useI18n } from 'vue-i18n'

export default {
  name: 'App',
  setup() {
    const { locale, t } = useI18n({
      inheritLocale: true
    })

    return { locale, t }
  }
}
</script>

<i18n>
{
  "en": {
    "language": "Language",
    "hello": "hello, world!"
  },
  "ja": {
    "language": "言語",
    "hello": "こんにちは、世界！"
  }
}
</i18n>

import { createApp } from 'vue'
import './tailwind.css'
import App from './App.vue'
import { routes } from './routes.js'
import { createRouter, createWebHistory } from 'vue-router'

const app = createApp(App)

const router = createRouter({
  history: createWebHistory(),
  routes,
})

app.use(router)
app.mount('#app')

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import {vueI18n} from "@intlify/vite-plugin-vue-i18n";
export default defineConfig({
  plugins: [vue(),
    vueI18n({
    // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
    // compositionOnly: false,

    // you need to set i18n resource including paths !
    include: path.resolve(__dirname, './src/locales/**')
  })],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
    },
  },
  server: {
    open: true,
  },
})

{
  "name": "vite2-vue3-tailwind2-starter",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "dependencies": {
    "vue": "^3.0.11",
    "vue-i18n": "^9.1.6",
    "vue-router": "^4.0.8"
  },
  "devDependencies": {
    "@headlessui/vue": "^1.2.0",
    "@heroicons/vue": "^1.0.1",
    "@intlify/vite-plugin-vue-i18n": "^2.1.2",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/line-clamp": "^0.2.1",
    "@tailwindcss/typography": "^0.4.1",
    "@types/tailwindcss": "^2.0.3",
    "@vitejs/plugin-vue": "^1.2.2",
    "@vue/compiler-sfc": "^3.0.11",
    "autoprefixer": "^10.2.6",
    "axios": "^0.21.1",
    "tailwindcss": "^2.1.2",
    "vite": "^2.3.4"
  }
}