Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TypeError: i is not a function

See original GitHub issue

Reporting a bug?

There is a problem in production level caused the webpage not to display properly. At dev level, it is OK.

Expected behavior

i18n load properly on the webpage and display no i18n-related errors.

Reproduction

config i18n:

// import {createI18n} from 'vue-i18n'
const {createI18n} = require('vue-i18n')
// import i18n resources
import en from '@/locales/en'
import zhCN from '@/locales/zh-CN'

const datetimeFormats = {
    'en-US': {
        short: {
            year: 'numeric', month: 'short', day: 'numeric'
        },
        long: {
            year: 'numeric', month: 'short', day: 'numeric',
            weekday: 'short', hour: 'numeric', minute: 'numeric'
        }
    },
    'zh-CN': {
        short: {
            year: 'numeric', month: 'short', day: 'numeric'
        },
        long: {
            year: 'numeric', month: 'short', day: 'numeric',
            weekday: 'short', hour: 'numeric', minute: 'numeric', hour12: true
        }
    }
}

export default createI18n({
    legacy: false,
    locale: 'zh-CN',
    fallbackLocale: 'zh-CN',
    messages: {
        "zh-CN": zhCN,
        "en": en
    },
    datetimeFormats
})

How I used them and failed at production mode (some of the function may be replaced to a stub one)

<template>
    <el-container>
        <el-space wrap alignment="flex-start" :size="25">
            <div class="beian">
                <h4>{{t('footer.ICP_REGISTER')}}</h4>
                <el-link href="http://beian.miit.gov.cn" target="_blank" rel="nofollow"
                         id="beian-link" :underline="false">
                    <el-icon class="el-icon--right">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-394d1fd8=""><path fill="currentColor" d="M715.648 625.152 670.4 579.904l90.496-90.56c75.008-74.944 85.12-186.368 22.656-248.896-62.528-62.464-173.952-52.352-248.96 22.656L444.16 353.6l-45.248-45.248 90.496-90.496c100.032-99.968 251.968-110.08 339.456-22.656 87.488 87.488 77.312 239.424-22.656 339.456l-90.496 90.496zm-90.496 90.496-90.496 90.496C434.624 906.112 282.688 916.224 195.2 828.8c-87.488-87.488-77.312-239.424 22.656-339.456l90.496-90.496 45.248 45.248-90.496 90.56c-75.008 74.944-85.12 186.368-22.656 248.896 62.528 62.464 173.952 52.352 248.96-22.656l90.496-90.496 45.248 45.248zm0-362.048 45.248 45.248L398.848 670.4 353.6 625.152 625.152 353.6z"></path></svg>
                    </el-icon>
                </el-link>
            </div>
            <div class="inner-links">
                <h4>{{ t('footer.INSITE_LINK') }}</h4>
                <router-link :to="{name:'About'}" custom v-slot="{href}">
                    <el-link :href="href" :underline="false">个人介绍页</el-link>
                </router-link>
                <router-link :to="{name:'Privacy'}" custom v-slot="{href}">
                    <el-link :href="href" :underline="false">网站隐私政策（中文）</el-link>
                </router-link>
            </div>
            <div class="friend-links">
                <h4>{{t('footer.OTHER_LINK')}}</h4>
                <ul class="links">
                    <li v-for="link in friend_links" :key="link.linkID">
                        <el-tooltip class="item" effect="light" :content="link.alttext" placement="bottom-start">
                            <el-link :href="link.linkhref" :underline="false">
                                {{ link.displaytext }}
                            </el-link>
                        </el-tooltip>
                    </li>
                </ul>
            </div>
        </el-space>
    </el-container>
</template>

<script>
import {ElDivider, ElMessage} from "element-plus";
import {defineComponent, h, onMounted, ref} from "vue";
import {friendlinks} from "@/utils/webinterface-apis";
import {useI18n} from "vue-i18n";

export default defineComponent({
    name: "MainPageFooter",
    setup(){
        const { t } = useI18n()
        let friend_links = ref([])
        const spacer = h(ElDivider, {direction: 'vertical'})
        onMounted(()=>{
            friendlinks().then((res)=>{
                friend_links.value = res
            },
                ()=> ElMessage({
                    message: t("interact_msg.FRIENDLINK_ERROR"),
                    type: "error",
                    showClose: true
                }))
        })
        return{
            t,
            spacer,
            friend_links
        }
    }
})
</script>

<style scoped>
.friend-links > a, .inner-links > a {
    display: block;
    line-height: 1.5em;
}
</style>

and that’s what the original locales file like:

// en.js
export default {
    "lang_desc": {
        "zh_CN": "Simplified Chinese",
        "en": "English"
    },
    "directive": {
        "BACK_TO_LAST_PAGE": "Back to last page",
        "BACK_TO_HOME": "Return to Home page"
    },
    "interact_msg": {
        "BACKEND_ERROR": "Backend not connected! Page may not display properly.",
        "FRIENDLINK_ERROR": "Get friend link data error.",
        "MODAL_WECHAT": "Open wechat and have a scan!",
        "MODAL_WECHAT2": "Scan to follow my updates on wechat!",
        "CHANGE_LANG": "Successfully changed to {lang}",
        "CHANGE_LANG_TOOLTIP": "Change to {lang}",
        "ERROR_NO_FOUND_TITLE": "Error",
        "ERROR_NO_FOUND_SUBTITLE": "Are you stepping in wrong place?"
    },
    "footer": {
        "OTHER_LINK": "OTHER LINKS",
        "INSITE_LINK": "INSITE LINKS",
        "SOCIAL_ICONS": "CONTACTS",
        "ICP_REGISTER": "ICP INFO(mainland China)"
    }
}

// zh-CN.js
export default {
  "lang_desc": {
	"zh_CN": "简体中文",
	"en": "英语"
  },
  "directive": {
	"BACK_TO_LAST_PAGE": "返回上一页",
	"BACK_TO_HOME": "返回首页"
  },
  "footer": {
	"OTHER_LINK": "其他链接",
	"INSITE_LINK": "站内链接",
	"SOCIAL_ICONS": "联系方式",
	"ICP_REGISTER": "备案信息"
  },
  "interact_msg": {
	"BACKEND_ERROR": "后台链接失败！页面可能显示不正常",
	"FRIENDLINK_ERROR": "获取友情链接失败！",
	"MODAL_WECHAT": "来关注一下吧！",
	"MODAL_WECHAT2": "扫描一下二维码，关注我的微信公众号！",
	"CHANGE_LANG": "成功切换至 {lang}",
	"CHANGE_LANG_TOOLTIP": "切换至 {lang}",
	"ERROR_NO_FOUND_TITLE": "错误提示",
	"ERROR_NO_FOUND_SUBTITLE": "你似乎找错了地方？"
  }
}

System Info

OS: Windows 10 21H1(19043.1237)
npm executable: 6.14.8
node executable: v14.15.1
Browser: Edge 95.0.1020.44 
since `npx envinfo` does not run well, I manually put package dependencies here.
packages: 

	"@element-plus/icons": "0.0.11",
	"@vue/server-renderer": "^3.2.21",
	"core-js": "^3.6.5",
	"echarts": "^5.1.2",
	"element-plus": "^1.2.0-beta.3",
	"postcss": "^8.1.0",
	"vue": "^3.2.0",
	"vue-echarts": "^6.0.0",
	"vue-gtag": "^2.0.1",
	"vue-i18n": "^9.2.0-beta.17",
	"vue-meta": "^3.0.0-alpha.9",
	"vue-router": "^4.0.10"

I am using @intlify/vue-i18n-loader ^4.0.0 and vue-cli-service to build the project.

Screenshot

The error come out from this. Causing the webpage stop loading.

Additional context

vue.config.js content

const path = require('path')

module.exports = {
    productionSourceMap: false,
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.mjs$/,
                    include: /node_modules/,
                    type: "javascript/auto"
                },
                {
                    test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
                    type: 'javascript/auto',
                    loader: '@intlify/vue-i18n-loader',
                    include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
                        path.resolve(__dirname, 'src/locales')
                    ]
                },
                // for i18n custom block
                {
                    resourceQuery: /blockType=i18n/,
                    type: 'javascript/auto',
                    loader: '@intlify/vue-i18n-loader'
                }
            ]
        }
    },
    css: {},
    chainWebpack: config => {
        config.optimization.minimize(true);
        config.plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
        // https://github.com/intlify/vue-i18n-next/issues/219#issuecomment-748783027
        // https://vue-i18n.intlify.dev/guide/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only
        if (process.env.NODE_ENV === "production") {
            config.resolve.alias.set('vue-i18n','vue-i18n/dist/vue-i18n.runtime.esm-bundler.js')
            config.externals({
                wx: "wx",
                'vue': "Vue",
                'vue-router': 'VueRouter',
                // 'vue-i18n':"VueI18n"
            })
        }else{
            config.resolve.alias.set('vue-i18n','vue-i18n/dist/vue-i18n.cjs.js')
        }
        // https://vue-i18n.intlify.dev/guide/advanced/sfc.html#vue-cli
        config.module
            .rule('i18n-resource')
            .test(/\.(json5?|ya?ml)$/)
            .include.add(path.resolve(__dirname, './src/locales'))
            .end()
            .type('javascript/auto')
            .use('i18n-resource')
            .loader('@intlify/vue-i18n-loader')
        config.module
            .rule('i18n')
            .resourceQuery(/blockType=i18n/)
            .type('javascript/auto')
            .use('i18n')
            .loader('@intlify/vue-i18n-loader')
    },
    devServer: {
        port: 8079,
        proxy: {
            "/api": {
                "target": "http://localhost:8080"
            }
        }
    },
    transpileDependencies: [
        'vue-meta',
    ]
}

Validations

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

Issue Analytics

State:
Created 2 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

2reactions

libbGitcommented, Nov 15, 2021

Do you renamed only the .js File? Because of Error: Unexpected Token ‘export’, seems not a valid json format

No, I also modified the content, ensuring it’s valid. The localized file now looks like

{
    "lang_desc": {
        "zh_CN": "Simplified Chinese",
        "en": "English"
    },
    "directive": {
        "BACK_TO_LAST_PAGE": "Back to last page",
        "BACK_TO_HOME": "Return to Home page"
    },
    "interact_msg": {
        "BACKEND_ERROR": "Backend not connected! Page may not display properly.",
        "FRIENDLINK_ERROR": "Get friend link data error.",
        "MODAL_WECHAT": "Open wechat and have a scan!",
        "MODAL_WECHAT2": "Scan to follow my updates on wechat!",
        "CHANGE_LANG": "Successfully changed to {lang}",
        "CHANGE_LANG_TOOLTIP": "Change to {lang}",
        "ERROR_NO_FOUND_TITLE": "Error",
        "ERROR_NO_FOUND_SUBTITLE": "Are you stepping in wrong place?"
    },
    "footer": {
        "OTHER_LINK": "OTHER LINKS",
        "INSITE_LINK": "INSITE LINKS",
        "SOCIAL_ICONS": "CONTACTS",
        "ICP_REGISTER": "ICP INFO(mainland China)"
    }
}

我觉得用中文说清晰点，我遇到了一模一样的问题，我发现在setup中使用useI18n()时，是默认翻译本组件中的<i18n>部分的信息。对于在createI18n()时传入的全局messages不对起作用。就会报错。

不过这个报错在vite的 npm run serve阶段，在npm run dev阶段没有发现错误，非常奇怪

2reactions

kazuponcommented, Nov 14, 2021

Thank you for reporting!

I noticed that you use the js as i18n resources not json / yaml / json5 vue-i18n-loader don’t bundle js as defined i18n resources because we are considering the ease of integration with localization services. Some localization services do not support executable formats such as js.

You would need to change zh-CN.js to a format like zh-CN.json.