bundle-tools
bundle-tools copied to clipboard
intlify
Cannot read properties of undefined (reading 'length')
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
- [X] Read the Contributing Guidelines.
- [X] Read the README
- [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.
Thank you for your reporting! We need your minimal reproduction. Could you give about it please?
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.