Error: No loader specified configuring vue.config.js

Question

Using vue-cli3 and trying to load a csv file via fetch command, I have configured vue.config.file like this

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('csv')
      .use('file-loader')
  }
}

and getting error:

 INFO  Starting development server...
 ERROR  Error: No loader specified
Error: No loader specified
    at Function.normalizeUseItem (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:274:10)
    at Function.normalizeUse (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:236:19)
    at use.map (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:233:33)
    at Array.map (<anonymous>)
    at Function.normalizeUse (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:233:6)
    at Function.normalizeRule (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:184:26)
    at rules.map (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:86:20)
    at Array.map (<anonymous>)
    at Function.normalizeRules (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:85:17)
    at new RuleSet (D:\Learn\d3\d3-projects\node_modules\webpack\lib\RuleSet.js:80:24)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

According to https://www.npmjs.com/package/webpack-chain what you've done is created a 'named use' but have not defined an associated loader. It appears that the config module requires invoking the functions in a specific order, which might not be very intuitive:

  chainWebpack: config => {
    config.module
      .rule("html")            //create a named rule
      .test(/web-components/)  //define the file test
      .use("html-loader")      //create a named use
      .loader("html-loader")   //assign a loader
      .end();                  //back up to define another use, e.g. you could do .end().use()....
}