Nuxt.js: WARN vendor has been deprecated due to webpack4 optimization

[sgmheyhey]

Version

v2.6.2

Reproduction link

https://github.com/nuxt/nuxt.js/issues/2201#issuecomment-416149468

Steps to reproduce

Nuxt.js v2.6.2-25915688.22138535

$ nuxt build --analyze
 WARN  vendor has been deprecated due to webpack4 optimization

...

                  vendors.app.js   1.11 MiB      10  [emitted]  [big]  vendors.app
 + 2 hidden assets
Entrypoint app [big] = runtime.js commons.app.js vendors.app.js app.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  vendors.app.js (1.11 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
  app (1.33 MiB)
      runtime.js
      commons.app.js
      vendors.app.js
      app.js

What is expected ?

Wanted not to see the message WARN vendor has been deprecated due to webpack4 optimization

What is actually happening?

I do not know how to write in nuxt.config.js or is nuxt.js not doing this inside automatically?

Additional comments?

@besnikh vendor has been deprecated due to webpack4 has used SplitChunksPlugin to automatically generate common chunks.

The reason may be because your config doesn't meet default conditions of the strategy, try to change maxAsyncRequests or maxInitialRequests or provide a reproducible repo, but webpack default configurations should be the best practice and recommendation smile .

Originally posted by @clarkdo in #2201 (comment)

It's from https://github.com/nuxt/nuxt.js/issues/2201#issuecomment-416149468

_{This bug report is available on Nuxt community (#c9058)}

[manniL]

remove the build.vendor part of your nuxt.config.js as the error says.

[rs-8]

Any other solution for build js libs on client side, excluding mode: 'client' (ssr: false)?

[pi0]

@rs-8 If you have big vendors, you can use dynamic import. Webpack automatically splits vendors into separate chunks when needed BTW.

[rs-8]

@rs-8 If you have big vendors, you can use dynamic import. Webpack automatically splits vendors into separate chunks when needed BTW.

import in the component doesn't work(
register as plugin and ssr: false also doesn't work
dropzone.js throw error (window not defined)
it seems like nuxt try build it on the server side

[pi0]

@rs-8 How do you register plugin? Can you please share nuxt.config and plugin file? Also, ensure that dropzone is not being imported from somewhere other than the plugin itself.

[rs-8]

Now its only work if i put in the component:
const Dropzone = process.client ? require('dropzone') : undefined;
and vendor property.
I tried register as plugin:

import dropzone from 'dropzone'
export default dropzone

also:

let dropzone;
if (process.client) {
  dropzone = require('dropzone')
}
export default dropzone

and nuxt config: mode: client

[rs-8]

I know about vue-dropzone. but i dont like it

[pi0]

process.client can do the trick indeed and is a valid solution.

When you specify mode: 'client' to a plugin, nuxt only requires it in client bundle but you should not directly import a plugin file!

[rs-8]

process.client can do the trick indeed and is a valid solution.

When you specify mode: 'client' to a plugin, nuxt only requires it in client bundle but you should not directly import a plugin file!

What should the working solution look like?)

[pi0]

@rs-8 same as you mentioned in https://github.com/nuxt/nuxt.js/issues/5544#issuecomment-492134696 is the solution:

const Dropzone = process.client ? require('dropzone') : undefined;

Plugins are useful if:

• You want to do a global action like registering a Vue plugin with Vue.use, initialize some lib, etc
• You want to inject a value to the context to be usable as this.$...