`version.split is not a function` on vite build

Vestibule commented 3 years ago

Reporting a bug?

Hi,

Thanks for this great package.

I'm running into an issue on a project with Vue 3 and Vite. You'll find my package.json below. When I run a yarn build (which basically does a vite build), it builds without problem. Then when I serve the freshly built file with yarn serve, I encounter this issue : Uncaught TypeError: au.version.split is not a function at vendor.1dcb0327.js:32. When I check where is exactly the issue, it happens to be the 'built version' of the package core-base:

  * (c) 2021 kazuya kawaguchi
  * Released under the MIT License.```

Here is my package.json:
```json
{
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "serve": "vite preview",
    "test:inte": "jest -c ./jest.inte.config.js",
    "ci": "./tmtc.ci.sh"
  },
  "dependencies": {
    "@apollo/client": "^3.3.21",
    "@capacitor/android": "^3.1.1",
    "@vue/apollo-composable": "^4.0.0-alpha.13",
    "axios": "^0.21.1",
    "cypress": "^7.7.0",
    "faker": "^5.5.3",
    "graphql": "^15.5.1",
    "graphql-tag": "^2.12.5",
    "jest": "^26.6.3",
    "jetifier": "^2.0.0",
    "lodash": "^4.17.21",
    "primeicons": "^4.1.0",
    "primevue": "^3.5.1",
    "ts-jest": "^26.5.6",
    "uuid": "^8.3.2",
    "vue": "^3.1.4",
    "vue-i18n": "^9.0.0",
    "vue-jest": "^5.0.0-alpha.10",
    "vue-router": "^4.0.10",
    "vuex": "^4.0.2"
  },
  "devDependencies": {
    "@capacitor/cli": "^3.1.1",
    "@capacitor/core": "^3.1.1",
    "@capacitor/ios": "^3.1.1",
    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/vue": "^6.4.2",
    "@types/axios": "^0.14.0",
    "@types/faker": "^5.5.8",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "@vitejs/plugin-vue": "^1.6.1",
    "@vue/compiler-sfc": "^3.0.5",
    "@vue/test-utils": "^2.0.0-rc.10",
    "autoprefixer": "^10.3.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^26.6.3",
    "babel-preset-env": "^1.7.0",
    "identity-obj-proxy": "^3.0.0",
    "postcss": "^8.3.5",
    "prettier": "2.3.2",
    "tailwindcss": "^2.2.4",
    "typescript": "^4.3.2",
    "vite": "^2.4.0",
    "vue-tsc": "^0.0.24"
  }
}

Step to reproduce:

yarn
yarn build
yarn serve
check in the browser

I hope we'll find a solution :)

Have a nice weekend. Cheers from Paris.

Expected behavior

The packaged javascript should run without error once built with Vite.

Reproduction

yarn
yarn build
yarn serve
check in the browser

System Info

Need to install the following packages:
  envinfo
Ok to proceed? (y) 
  System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 282.07 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.3 - /var/folders/sv/474ytjl57b53s_0qgw3r2wwc0000gn/T/fnm_multishells/6936_1623015784073/bin/node
    Yarn: 1.22.10 - /var/folders/sv/474ytjl57b53s_0qgw3r2wwc0000gn/T/fnm_multishells/33084_1633001172720/bin/yarn
    npm: 7.20.6 - /var/folders/sv/474ytjl57b53s_0qgw3r2wwc0000gn/T/fnm_multishells/6936_1623015784073/bin/npm
  Browsers:
    Brave Browser: 94.1.30.86
    Chrome: 94.0.4606.61
    Safari: 14.1.2
  npmPackages:
    vue: ^3.1.4 => 3.2.9 
    vue-i18n: ^9.0.0 => 9.1.7

Screenshot

No response

Additional context

No response

Validations

[X] Read the Contributing Guidelines
[X] Read the Documentation
[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

kazupon commented 3 years ago

@Vestibule Thank you for your reporting!

I've tried to reproduce your reporting! Unfortunately, I could not that issue... 😞

I've put the repro repo https://github.com/kazupon/vue-i18n-next-repro-719

Could you modify some reproduction code, please? 🙏

Vestibule commented 3 years ago

Hi @kazupon Thank you for you quick response.

I tried to reproduce the issue on your repo but I didn't succeed. I can't explain to myself what is going wrong here, as the package.json is strictly the same for your repo and my project. The vendor.js should be changed only by changes in the package.json, right ? Also, I tried to remove i18n from my project and the issue disappeared.

I'm a bit lost here and don't know what to do next.

kazupon commented 3 years ago

npmPackages: vue: ^3.1.4 => 3.2.9 vue-i18n: ^9.0.0 => 9.1.7

I noticed vue-i18n v9.0.x is used in your package.json Could you try to use the vue-i18n v9.1.x (latest v9.1.8) please?

Vestibule commented 3 years ago

I tried with 9.1.8, nothing changed.

kazupon commented 3 years ago

Hmm... Could you try to build with minify off (vite build --minify false), please?

kazupon commented 3 years ago

We can get the details of stacktrace.

kazupon commented 3 years ago

Closing due to inactivity. Please open a new issue with a reference to this one if you can follow up with more information.

Thanks!

HassanZahirnia commented 2 years ago

I've encountered same issue when running npm run build :( I get Uncaught TypeError: Sg.version.split is not a function When I click on error line in console it brings to this :

["object", "boolean", "number", "function", "string", "symbol"].forEach(function(e, t) {
    bf[e] = function(n) {
        return typeof n === e || "a" + (t < 1 ? "n " : " ") + e
    }
});
var Eg = {}
  , tT = Sg.version.split("."); // <-------- Here the error happens
function wg(e, t) {
    for (var r = t ? t.split(".") : tT, n = e.split("."), i = 0; i < 3; i++) {
        if (r[i] > n[i])
            return !0;
        if (r[i] < n[i])
            return !1
    }
    return !1
}

My package.json setup is (anything vite related) :

"@intlify/vite-plugin-vue-i18n": "^3.2.0",
"vue-i18n": "^9.2.0-beta.20",
"@intlify/vite-plugin-vue-i18n": "^3.2.0",
"@vitejs/plugin-vue": "^1.9.4",
"vite": "^2.6.14",
"vite-plugin-imagemin": "^0.4.6",

My vite.config.ts :

import { defineConfig } from "laravel-vite";
import vue from "@vitejs/plugin-vue";
import viteImagemin from "vite-plugin-imagemin";
import vueI18n from '@intlify/vite-plugin-vue-i18n'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Components from 'unplugin-vue-components/vite'

export default defineConfig()
    .withPlugin(vue)
    .withPlugin(vueI18n())
    .withPlugin(Components({
        resolvers: IconsResolver(),
    }))
    .withPlugin(Icons({
        compiler: 'vue3',
    }))
    .withPlugin(
        viteImagemin({
            gifsicle: {
                optimizationLevel: 7,
                interlaced: false,
            },
            optipng: {
                optimizationLevel: 7,
            },
            mozjpeg: {
                quality: 77,
            },
            pngquant: {
                quality: [0.8, 0.9],
                speed: 4,
            },
            svgo: {
                plugins: [
                    {
                        name: "removeComments",
                    },
                    {
                        name: "removeTitle",
                    },
                    {
                        name: "removeDimensions",
                    },
                ],
            },
        })
    );

HassanZahirnia commented 2 years ago

Just do add more information, This is how I initialize i18n in my app.js file :

import { createI18n } from 'vue-i18n'
createInertiaApp({
    setup({ el, App, props, plugin }) {
        const i18n = createI18n({
            legacy: false,
            locale: props.initialPage.props.locale,
        });
        createApp({
            render: () => h(App, props)
        })
        .use(i18n)

And this is how I use it in my SFC (just like the docs example) :

<script>
import { useI18n } from 'vue-i18n'
export default {
        const { locale, t } = useI18n({
            inheritLocale: true
        })
        return {
            t,
        }
}
</script>

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

( I have removed the extra codes to keep it simple )

Here is what I tried :

Setting runtimeOnly to false

Setting resolve.alias like so :

resolve: {
alias: {
  'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
}
},

Changing vue-i18n from ^9.2.0-beta.20 to ^9.0.0
Removing node_modules and package-lock.json and re-run npm i

Btw sorry if I missed any guidelines or anything for posting the issue, I tried to put as much as info I could though

dschoeni commented 2 years ago

I faced the exact same problem and updated axios to "^0.26.0" in my package.json. This fixed the issue - To be honest, kinda hard to explain why this shows up in this specific vendor chunk, but give it a try.

HassanZahirnia commented 2 years ago

I faced the exact same problem and updated axios to "^0.26.0" in my package.json. This fixed the issue - To be honest, kinda hard to explain why this shows up in this specific vendor chunk, but give it a try.

I've tried your suggestion but it still throws the error for me on npm run build ＞﹏＜ I'm not sure what to do... I need to build a multi lang app and this issue doesn't let me use this package... currently looking for an alternative

HassanZahirnia commented 2 years ago

I think I found the source of this problem ( more like I found the culprit, not the actual source ), it's the @intlify/vite-plugin-vue-i18n plugin. If I remove that from vite config, vue-i18n ( during npm run build ) will just work fine! 😄

philefstat commented 2 years ago

I ran into the same issue and wanted to share how I solved it.

I used vite build --minify as suggested above

I split the vendor chunks in vite.config.ts to identify which package was the culprit

build: {
rollupOptions: {
  manualChunks: {
    "vue-i18n": ["vue-i18n"],
     ...etc...
  },

This helped me identify that the error was actually occurring because a dependency of a dependency was using an old version of axios, which was the root source of error
I was able to override the version of axios to be used across my project using
```
"pnpm": {
"overrides": {
  "axios": "^0.26.1"
}
}
```
in my root package.json (npm and yarn probably have something similar)

tsekka commented 2 years ago

Had same issue. I was also depending on older version of axios.

When minified, it seemed as if it was related to i18n but when turned minification off, then it was clear that it was not related to i18n at all but it was axios version error.

kazupon commented 2 years ago

Thank you for reporting!

We need a solution to this issue, but we need the minimue reproduction code that can actually confirm the issue with anyone. we need a github repo or stackbliz where anyone can reproduce the issue.

After this comment, I will close this thread once there is no reproduction code provided in github repo or stackbliz.

We appreciate your understanding :)

kazupon commented 1 year ago

close in-activity

intlify / vue-i18n