Vue upgrade 8.37->8.38 webpack issues

Hi,

After upgrading from 8.37 -> 8.38 on the vue version, now my vue.config is not working anymore. In your changelog you haven't written anything about breaking changes?

this is what causing errors:
chainWebpack: config => {
config.module
.rule("eslint")
.use("eslint-loader")
.tap(options => {
options.configFile = path.resolve(__dirname, ".eslintrc.js");
return options;
});
config.plugin('copy')
.tap(args => {
args[0].push({
from: path.resolve(__dirname, 'public/media'),
to: path.resolve(__dirname, '../../public/media'),
toType: 'dir',
ignore: ['.DS_Store']
});
args[0].push({
from: path.resolve(__dirname, 'public/media/weplan'),
to: path.resolve(__dirname, '../../public/media/weplan'),
toType: 'dir',
ignore: ['.DS_Store']
});
return args
});
config.plugin('prefetch')
.tap(args => {
return [
{
rel: 'prefetch',
include: 'asyncChunks',
fileBlacklist: [
/\.map$/,
/pdfmake\.[^.]+\.js$/,
/xlsx\.[^.]+\.js$/,
/fabric[^.]*\.[^.]+\.js$/,
/responsivedefaults\.[^.]+\.js$/,
]
}
]
});
},

my entire vue.config can be found here:

https://pastebin.com/ynkwVSXw

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

Hi Stephan!

Thank you for your feedback.

In the latest version, we updated vue dependencies and eslint config.

Do you have any errors in your console when running the application?

for the ESLint :

TypeError: Cannot set properties of undefined (setting 'configFile')
at /metronic8.38/vue.config.js:34:30
at Object.tap (/metronic8.38/node_modules/webpack-chain/src/Use.js:14:20)
at chainWebpack (/metronic8.38/vue.config.js:33:10)
at /metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:40
at Array.forEach ()
at Service.resolveChainableWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:26)
at Service.resolveWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:272:48)
at PluginAPI.resolveWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
at serve (/metronic8.38/node_modules/@vue/cli-service/lib/commands/serve.js:75:31)
at Service.run (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:262:12)

(the config exists)

if I disable that part I get:
TypeError: args[0].push is not a function
at /metronic8.38/vue.config.js:32:19
at Object.tap (/metronic8.38/node_modules/webpack-chain/src/Plugin.js:30:24)
at chainWebpack (/metronic8.38/vue.config.js:31:10)
at /metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:40
at Array.forEach ()
at Service.resolveChainableWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:26)
at Service.resolveWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:272:48)
at PluginAPI.resolveWebpackConfig (/metronic8.38/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
at serve (/metronic8.38/node_modules/@vue/cli-service/lib/commands/serve.js:75:31)
at Service.run (/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:262:12)

and if I disable the copy:

Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('prefetch').use() first.
at Object.tap (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/webpack-chain/src/Plugin.js:26:15)
at chainWebpack (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/vue.config.js:32:10)
at /Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:40
at Array.forEach ()
at Service.resolveChainableWebpackConfig (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:268:26)
at Service.resolveWebpackConfig (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:272:48)
at PluginAPI.resolveWebpackConfig (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/PluginAPI.js:132:25)
at serve (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/commands/serve.js:75:31)
at Service.run (/Users/shn/Sites/WePlan2022/Portal/frontend/metronic8.38/node_modules/@vue/cli-service/lib/Service.js:262:12)
at processTicksAndRejections (node:internal/process/task_queues:96:5)


So I am suspecting something breaking change to the chainWebpack?

Could you please try to remove the eslint whole configuration module?

If your configuration worked with Metronic v8.0.37, you can try to revert package.json and eslint config from v8.0.37.

Well.. it's not ESLint causing the problems... To me it seems that .38 has a major update in dependencies both bumping vue-cli and other dependencies up a major. so the entire chainWebpack function will not work at all... Can't seem to find any suggestions on the web towards this?

Hi Stephan!

In the latest vue-cli chainWebpack option still exists.

Please make sure that your configuration worked correctly with older versions of Metronic.

I never actually got back on this.. It turned out that my entire vue.config should be rewritten due to many breaking changes in my setup using different plugins..
https://cli.vuejs.org/migrations/migrate-from-v4.html#vue-cli-service

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(