Did the latest beta update break your WebPack? My app & builds broke!

[armenr]

Using the latest Quasar beta, we've apparently been upgraded to WebPack 5 from WebPack 4.

In my configs, I have the following:

      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .loader('vue-loader')
          .tap(options => {
            options.compilerOptions = {
              ...(options.compilerOptions || {}),
              isCustomElement: tag => tag.startsWith('amplify-')
            }
            return options
          })

        config.resolve.alias
          .set('@amplify', './amplify')
          .set('@assets', 'src/assets')
          .set('@boot', 'src/boot')
          .set('@components', 'src/components')
          .set('@css', 'src/css')
          .set('@gql', 'src/graphql')
          .set('@layouts', 'src/layouts')
          .set('@models', 'src/models')
          .set('@pages', 'src/pages')
          .set('@router', 'src/router')
          .set('@store', 'src/store')
          .set('@tools', './tools')
      }

With WebPack 5, I'm now getting transpile-time errors like the following:

App •  ERROR  •  UI  in ./node_modules/@aws-amplify/api-graphql/node_modules/graphql/error/GraphQLError.mjs

Module not found: Can't resolve imported dependency "./printError"

After some googling, I discovered the following issue reported by others: webpack/webpack#11467 (comment)

So, I tried to update my chainWebPack as follows, but it throws errors.

      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .loader('vue-loader')
          .tap(options => {
            options.compilerOptions = {
              ...(options.compilerOptions || {}),
              isCustomElement: tag => tag.startsWith('amplify-')
            }
            return options
          })
          .end()
        config.module
          .rule('some-rule')
          .test(/\.m?js/)
          .resolve.fullySpecified(false)

... (other config stuff)
      }

Error:

App • Chaining "UI" Webpack config
(node:5824) UnhandledPromiseRejectionWarning:   TypeError: config.module.rule(...).test(...).resolve is not a function
  
  - quasar.conf.js:105 Object.chainWebpack
    /Users/armenr/Development/new/boiler-prettier/quasar.conf.js:105:12
  
  - index.js:20 getWebpackConfig
    [boiler-prettier]/[@quasar]/app/lib/webpack/index.js:20:54
  
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5
  
  - index.js:67 async getSPA
    [boiler-prettier]/[@quasar]/app/lib/webpack/index.js:67:15
  
  - index.js:230 async module.exports
    [boiler-prettier]/[@quasar]/app/lib/webpack/index.js:230:12
  
  - quasar-conf-file.js:951 async QuasarConfFile.compile
    [boiler-prettier]/[@quasar]/app/lib/quasar-conf-file.js:951:26
  
  - quasar-dev:237 async goLive
    [boiler-prettier]/[@quasar]/app/bin/quasar-dev:237:3
  

WebPack doesn't seem to like this:

        config.module
          .rule('some-rule')
          .test(/\.m?js/)
          .resolve.fullySpecified(false)

I also tried with:

        config.module
          .rule('some-rule')
          .test(/\.m?js/)
          .resolve({
            fullySpecified: false
          })

I must be doing something obviously (and simply) stupid/wrong. Could anyone please advise? I'm just checking to make sure if this is supported, and I'm guessing it is.

[armenr]

For anyone else who gets hit with something similar, the quickest fix is to use extendWebpack after chainWebpack

      chainWebpack: config => {
        config.module
          .rule('vue')
          .use('vue-loader')
          .loader('vue-loader')
          .tap(options => {
            options.compilerOptions = {
              ...(options.compilerOptions || {}),
              isCustomElement: tag => tag.startsWith('amplify-')
            }
            return options
          })
          .end()

        config.resolve.alias
          .set('@amplify', './amplify')
          .set('@assets', 'src/assets')
          .set('@boot', 'src/boot')
          .set('@components', 'src/components')
          .set('@css', 'src/css')
          .set('@gql', 'src/graphql')
          .set('@layouts', 'src/layouts')
          .set('@models', 'src/models')
          .set('@pages', 'src/pages')
          .set('@router', 'src/router')
          .set('@store', 'src/store')
          .set('@tools', './tools')
      },

      extendWebpack: cfg => {
        cfg.module.rules.push({
          test: /\.m?js/,
          resolve: {
            fullySpecified: false
          }
        })
      }

[hawkeye64]

@armenr The order won't make a difference.
You originally did this:

        config.module
          .rule('some-rule')
          .test(/\.m?js/)
          .resolve({
            fullySpecified: false
          })

when it should have been this:

      extendWebpack: cfg => {
        cfg.module.rules.push({
          test: /\.m?js/,
          resolve: {
            fullySpecified: false
          }
        })
      }

On the latter, you are specifying .rules.push, which was missed in your original post.

[armenr]

To the maintainers of Quasar - WebPack 5 comes with significant (breaking) changes. Please see here: https://webpack.js.org/blog/2020-10-10-webpack-5-release/

After upgrading, I wasn't able to access "process.env" and a file picker/upload component I had totally broke.

I had to go digging and googling to learn the following about WebPack 5:

Automatic polyfills for native Node.js modules were removed
node.Buffer removed
node.console removed
node.process removed
node.* (Node.js native module) removed
MIGRATION: resolve.alias and ProvidePlugin. Errors will give hints. (Refer to node-libs-browser for polyfills & mocks used in v4)

We should probably consider rolling back to WebPack 4, or at least releasing something that notifies/alerts users of Quasar Beta that a bunch of things might break and to be aware of that.

Possible Solution:

• This WebPack plugin will help users gently migrate/move over without their app breaking: https://www.npmjs.com/package/node-polyfill-webpack-plugin

Example:

file: quasar.conf.js

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

/* rest of file */

     chainWebpack: config => {
        config.plugin('NodePolyFills').use(NodePolyfillPlugin)

        config.resolve.alias
          .set('@amplify', './amplify')
          .set('@assets', 'src/assets')
          .set('@boot', 'src/boot')
          .set('@components', 'src/components')
          .set('@css', 'src/css')
          .set('@gql', 'src/graphql')
          .set('@layouts', 'src/layouts')
          .set('@models', 'src/models')
          .set('@pages', 'src/pages')
          .set('@router', 'src/router')
          .set('@store', 'src/store')
          .set('@tools', './tools')
      }
/* rest of file */

[hawkeye64]

You might have missed LOTs of mentions for webpack 5 to be included in Quasar v2. That was always the plan:
#8102
#7836

[armenr]

Thanks @hawkeye64. I'm not trying to sound sarcastic, or like an *sshole, but I hadn't thought to read GitHub issues as part of my process (but that's kinda my fault since I'm using a package that's not even out of beta yet).