Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read properties of undefined (reading 'length') #290

Open
4 tasks done
Arlisaha opened this issue Sep 1, 2023 · 3 comments
Open
4 tasks done

Cannot read properties of undefined (reading 'length') #290

Arlisaha opened this issue Sep 1, 2023 · 3 comments
Labels

Comments

@Arlisaha
Copy link

Arlisaha commented Sep 1, 2023

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/unplugin-vue-i18n@0.7.0 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.
@Arlisaha Arlisaha added the Status: Review Needed Request for review comments label Sep 1, 2023
Copy link
Member

kazupon commented Sep 28, 2023

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

@kazupon kazupon added Status: Need More Info Lacks enough info to make progress Package: unplugin-vue-i18n and removed Status: Review Needed Request for review comments labels Sep 28, 2023 — with Volta.net
@Arlisaha
Copy link
Author

Arlisaha commented Sep 29, 2023

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
Copy link
Author

up

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants