Cannot read properties of undefined (reading 'length')

[Arlisaha]

Reporting a bug?

I am building an application using VueJs webpack and vue-i18n, but whenever I run webpack I run into an error :

Cannot read properties of undefined (reading 'length')

I have checked many dependencies and it seems that it comes from @intlify/unplugin-vue-i18n.

My dependencies in my package.json :

"dependencies": {
        "axios": "^1.5.0",
        "bourbon": "^7.3.0",
        "json5": "^2.2.3",
        "lodash": "^4.17.21",
        "luxon": "^3.4.2",
        "vue": "^3.3.4",
        "vue-i18n": "^9.2.2",
        "vue-router": "^4.2.4",
        "vuetify": "^3.3.15",
        "vuex": "^4.1.0"
    },
    "devDependencies": {
        "@intlify/unplugin-vue-i18n": "^0.7.0",
        "@intlify/vue-i18n-loader": "^5.0.1",
        "@types/core-js": "^2.5.5",
        "@types/lodash": "^4.14.197",
        "@types/luxon": "^3.3.2",
        "@types/node": "^20.5.7",
        "@types/webpack": "^5.28.2",
        "@typescript-eslint/eslint-plugin": "^6.5.0",
        "@vue/compiler-sfc": "^3.3.4",
        "autoprefixer": "^10.4.15",
        "cross-env": "^7.0.3",
        "css-loader": "^6.8.1",
        "esbuild-loader": "^4.0.2",
        "eslint": "^8.48.0",
        "eslint-plugin-vue": "^9.17.0",
        "eslint-webpack-plugin": "^4.0.1",
        "handlebars-loader": "^1.7.3",
        "html-webpack-plugin": "^5.5.3",
        "mini-css-extract-plugin": "^2.7.6",
        "node-sass": "^9.0.0",
        "postcss": "^8.4.29",
        "postcss-loader": "^7.3.3",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.66.1",
        "sass-loader": "^13.3.2",
        "style-loader": "^3.3.3",
        "ts-loader": "^9.4.4",
        "ts-node": "^10.9.1",
        "typescript": "^5.2.2",
        "vue-eslint-parser": "^9.3.1",
        "vue-loader": "^17.2.2",
        "webpack": "^5.88.2",
        "webpack-cli": "^5.1.4",
        "webpack-dev-server": "^4.15.1",
        "webpack-plugin-vuetify": "^2.0.1"
    }

My tsconfig.json :

{
    "compilerOptions": {
        "allowJs"                       : true,
        "checkJs"                       : false,
        "lib"                           : [
            "ESNext",
            "ESNext.String",
            "ESNext.Array",
            "ESNext.Promise",
            "ESNext.AsyncIterable",
            "ESNext.Intl",
            "ESNext.Symbol",
            "ESNext.BigInt",
            "ESNext.WeakRef",
            "DOM",
            "DOM.Iterable",
            "ScriptHost"
        ],
        "target"                        : "ESNext",
        "module"                        : "ESNext",
        "strict"                        : true,
        "noImplicitAny"                 : false,
        "noImplicitReturns"             : true,
        "noUnusedParameters"            : false,
        "declaration"                   : false,
        "removeComments"                : false,
        "jsx"                           : "preserve",
        "sourceMap"                     : true,
        "moduleResolution"              : "bundler",
        "allowSyntheticDefaultImports"  : true,
        "esModuleInterop"               : true,
        "suppressImplicitAnyIndexErrors": true,
        "resolveJsonModule"             : true,
        "isolatedModules"               : true,
        "baseUrl"                       : ".",
        "types"                         : [
            "node",
            "@intlify/unplugin-vue-i18n/messages"
        ],
        "paths"                         : {
            "@/*": [
                "src/*"
            ]
        }
    },
    "ts-node"        : {
        "compilerOptions": {
            "target"          : "ESNext",
            "module"          : "CommonJS",
            "esModuleInterop" : true,
            "sourceMap"       : true,
            "moduleResolution": "node"
        }
    },
    "include"        : [
        "src"
    ],
    "exclude"        : [
        "node_modules"
    ]
}

My webpack config :

const config = {
    ...
    resolve     : {
        alias     : {
            vue$      : 'vue/dist/vue.runtime.esm-bundler.js',
            'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js',
        },
    },
    rules: [
            {
                test   : /\.ts$/,
                exclude: /node_modules|vue\/src/,
                loader : 'esbuild-loader',
                options: {
                    loader: 'ts',
                    target: esTargetVersion,
                },
            },
            {
                test   : /\.js$/,
                loader : 'esbuild-loader',
                exclude: /node_modules/,
            },
            {
                test   : /\.vue$/,
                loader : 'vue-loader',
                options: {
                    extractCss         : true,
                    reactivityTransform: true,
                },
            },
            {
                test   : /\.(json5?|ya?ml)$/,
                type   : 'javascript/auto',
                loader : '@intlify/vue-i18n-loader',
                include: [sourcePath('i18n', 'locales')],
            },
            {
                resourceQuery: /blockType=i18n/,
                type         : 'javascript/auto',
                loader       : '@intlify/vue-i18n-loader',
            },
            {
                test  : /\.json5?$/,
                type  : 'json',
                parser: {
                    parse: json5.parse,
                },
            },
            {
                test  : /\.hbs$/,
                loader: 'handlebars-loader',
            },
            {
                test: /\.s?[ac]ss$/,
                use : [
                    'style-loader',
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            esModule: false,
                        },
                    },
                    {
                        loader : 'css-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader : 'postcss-loader',
                        options: {
                            sourceMap     : true,
                            postcssOptions: {
                                plugins: () => [autoprefixer()],
                            },
                        },
                    },
                    {
                        loader : 'sass-loader',
                        options: {
                            implementation: sass,
                            sourceMap     : !isProduction,
                            sassOptions   : {
                                includePaths: [sourcePath()],
                            },
                        },
                    },
                ],
            },
    ],
    plugins: [
        new VueLoaderPlugin(),
        new VuetifyPlugin({
            autoImport: true,
            styles    : 'sass',
        }),
        new MiniCssExtractPlugin({
            filename     : cssNameBuilder,
            chunkFilename: cssNameBuilder,
            ignoreOrder  : true,
        }),
        VueI18nPlugin({
            include            : sourcePath('i18n', 'locales', '**'),
            defaultSFCLang     : 'json5',
            compositionOnly    : true,
            runtimeOnly        : false,
            strictMessage      : false,
            escapeHtml         : false,
            jitCompilation     : true,
            dropMessageCompiler: true,
        }),
        new HtmlWebpackPlugin({
            filename  : destinationPath('index.html'),
            template  : sourcePath('index.hbs'),
            favicon   : rootPath(...parameters.tags.favicon),
            hash      : true,
            base      : parameters.tags.basePath,
            title     : parameters.tags.title,
            lang      : parameters.tags.lang,
            inject    : true,
            cache     : false,
            production: isProduction && !parameters.debug,
        }),
    ],
};

And the way I use vue-i18n :

import {createI18n} from 'vue-i18n';
import parameters   from '@/parameters';
//Messages
import messages     from '@intlify/unplugin-vue-i18n/messages';

const i18n = createI18n<false>({
    locale           : parameters.locale,
    fallbackLocale   : parameters.locale,
    legacy           : false,
    globalInjection  : true,
    warnHtmlInMessage: 'warn',
    messages,
});

export default i18n;

const t = i18n.global.t, tc = i18n.global.tc;

export {t, tc};

My entry point :

import {logWithStyles}                      from '@/logs';
import vuetify                              from '@/libs/vuetify';
import {createApp}                          from 'vue';
import i18n                                 from '@/i18n';
import store                                from '@/store';
import router                               from '@/router';
import App                                  from '@/App.vue';
//Plugins
import helpers                              from '@/plugins/helpers';
import styles                               from '@/plugins/styles';

import '@/assets/styles/scss/app';

logWithStyles(
    {
        message: 'common.console.warning.title',
        styles : 'color:red;background-color:yellow;font-size:38px;font-family:sans-serif;',
    },
    {
        message: 'common.console.warning.body',
        styles : 'color:white;background-color:black;font-size:22px;font-family:monospace;',
    },
);

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
window.__version__ = __VERSION__;

const app = createApp(App);

app
    .use(vuetify)
    .use(i18n)
    .use(router)
    .use(store)
    
    .use(helpers)
    .use(styles)
        
    .mount('#app');

In @intlify/[email protected] everything is going well, but starting version 0.8.0, whenever I run a webpack watch, I run into an error :

ERROR in {main} [initial] main.571ceb03.js
Cannot read properties of undefined (reading 'length')
HookWebpackError: Cannot read properties of undefined (reading 'length')
    at tryRunOrWebpackError (XXX/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at JavascriptModulesPlugin.renderModule (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:528:36)
    at XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:649:10
    at XXX/node_modules/webpack/lib/Template.js:305:13
    at Array.map (<anonymous>)
    at Function.renderChunkModules (XXX/node_modules/webpack/lib/Template.js:302:30)
    at JavascriptModulesPlugin.renderChunk (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:648:13)
    at Object.render (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:309:13)
    at ItemCacheFacade.get (XXX/node_modules/webpack/lib/CacheFacade.js:115:15)
    at XXX/node_modules/webpack/lib/Compilation.js:4572:22
    at arrayEach (XXX/node_modules/neo-async/async.js:2405:9)
    at Object.each (XXX/node_modules/neo-async/async.js:2846:9)
    at XXX/node_modules/webpack/lib/Compilation.js:4561:14

Expected behavior

My app should be bundled properly.

Reproduction

Unfortunaltely nothing to give here

Issue Package

unplugin-vue-i18n

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 9.97 GB / 15.30 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.15.0 - .nvm/versions/node/v18.15.0/bin/node                     
    npm: 9.6.0 - ~/.nvm/versions/node/v18.15.0/bin/npm                           
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium (114.0.1823.79)
  npmPackages:
    @intlify/vue-i18n-loader: ^5.0.1 => 5.0.1                
    vue: ^3.3.4 => 3.3.4                                     
    vue-i18n: ^9.2.2 => 9.2.2                                
    webpack: ^5.88.2 => 5.88.2

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the README
• 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.

[kazupon]

Thank you for your reporting!
We need your minimal reproduction.
Could you give about it please?

[Arlisaha]

Yes thank you.
I made a stackblitz here.
With basic example, running pnpm run watch give me the error output :

ERROR in {main} [initial] main.571ceb03.js
Cannot read properties of undefined (reading 'length')
HookWebpackError: Cannot read properties of undefined (reading 'length')
    at tryRunOrWebpackError (XXX/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at JavascriptModulesPlugin.renderModule (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:528:36)
    at XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:649:10
    at XXX/node_modules/webpack/lib/Template.js:305:13
    at Array.map (<anonymous>)
    at Function.renderChunkModules (XXX/node_modules/webpack/lib/Template.js:302:30)
    at JavascriptModulesPlugin.renderChunk (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:648:13)
    at Object.render (XXX/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:309:13)
    at ItemCacheFacade.get (XXX/node_modules/webpack/lib/CacheFacade.js:115:15)
    at XXX/node_modules/webpack/lib/Compilation.js:4572:22
    at arrayEach (XXX/node_modules/neo-async/async.js:2405:9)
    at Object.each (XXX/node_modules/neo-async/async.js:2846:9)
    at XXX/node_modules/webpack/lib/Compilation.js:4561:14

However, if I use the version of @intlify/unplugin-vue-i18n specified in package.ok.json I have no error at build time.

[Arlisaha]

up