Unable to use array of loaders in vue.config.js

[lattam]

Hi, I have trouble to convert this webpack config to vue.config.js. The .po file content is normally loaded by po-loader into JSON and then it's parsed by json-loader:

rules: [
  {
    test: /\.po$/,
    use:  ['json-loader', 'po-loader']
  },

I tried to use chainWebpack:

  chainWebpack: config => {
    config.module
      .rule('po-loader')
      .test(/\.po$/)
      .use('po-loader')
      .loader(['json-loader', 'po-loader'])
      .end()
  }

but the result is (after running vue inspect)

{
  test: /\.po$/,
  use: [
    /* config.module.rule('po-loader').use('po-loader') */
    {
      loader: [
        'json-loader',
        'po-loader'
      ]
    }
  ]
}

Which still results in the error:

1:21 Cannot find module './fr_FR.po'.
  > 1 | import * as Fr from './fr_FR.po';

Thank you for help!

[edmorley]

Hi!

The webpack-chain API mirrors the long-form loader webpack schema, and so requires that loaders be set individually rather than in an array: https://github.com/neutrinojs/webpack-chain#config-module-rules-uses-loaders-creating

For example:

  config.module
    .rule('po')
      .test(/\.po$/)
      .use('json')
        .loader('json-loader')
        .end()
      .use('po')
        .loader('po-loader')
        // Any options could be set here
        // .options(...)
        .end()

Corresponding webpack config output:

{
  test: /\.po$/,
  use: [
    /* config.module.rule('po').use('json') */
    {
      loader: 'json-loader'
    },
    /* config.module.rule('po').use('po') */
    {
      loader: 'po-loader',
      // Any options would be set here
      // options: { ... },
    },
  ]
}

If passed as an array there wouldn't be a way to specify which loader the .options() referred to.

We could perhaps add more validation so that .loader() throws if passed anything but a string. In addition, it might help if the docs had a "add several loaders" example.

Would you be up for opening a PR for either of those? :-)

[XavierShi]

    config.module
        .rule('zepto')
          .test(require.resolve('zepto'))
          .use('exports')
            .loader('exports-loader?window.Zepto')
            .end()
          .use('script')
            .loader('script-loader')
            .end()

Thank you very much!

[YamiOdymel]

Just a tip, if you are trying to overwrite the base loader in vue.config.js, the uses.clear() function is required to be called.

// vue.config.js
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')

    // clear all existing loaders.
    // if you don't do this, the loader below will be appended to
    // existing loaders of the rule.
    svgRule.uses.clear()

    // add replacement loader(s)
    svgRule
      .use('vue-svg-loader')
        .loader('vue-svg-loader')
  }
}

https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule