Prepend webpack rules with webpackConfig to catch .vue.html files

[matthewturk]

Problem

I'm attempting to build a jupyterlab extension that utilizes VueJS SFCs in the form of .vue files. My understanding -- which, I confess freely, may not be complete or total -- is that the most straightforward way to integrate these in the extension is to have webpack manage them using vue-loader. I've used the jupyterlab.webpackConfig key in package.json to supply an alternate set of rules, specifically:

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },

What vue-loader seems to do, however, is to verify that a loader works if it's able to match .vue.html such that the first rule to hit is the one that has loader: 'vue-loader'. If it doesn't, we get this nice error message:

/home/mturk/cis/jupyterlab_nodeeditor/node_modules/vue-loader/dist/pluginWebpack5.js:89
            throw new Error(`[VueLoaderPlugin Error] No matching use for vue-loader is found.\n` +
                  ^

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
    at VueLoaderPlugin.apply (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/vue-loader/dist/pluginWebpack5.js:89:19)
    at createCompiler (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/webpack.js:73:12)
    at /home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/webpack.js:44:48
    at Array.map (<anonymous>)
    at createMultiCompiler (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/webpack.js:44:33)
    at create (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/webpack.js:125:16)
    at webpack (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/webpack.js:158:32)
    at Object.f [as default] (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/webpack/lib/index.js:64:16)
    at Command.<anonymous> (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/@jupyterlab/builder/lib/build-labextension.js:88:39)
    at Command.listener [as _actionHandler] (/home/mturk/cis/jupyterlab_nodeeditor/node_modules/commander/index.js:422:31)

I believe that this is because extensionConfig.ts merges in the order baseConfig, then the custom one that includes .html mapping to file-loader, and then webpackConfig. This means that the first rule to match on .vue.html would be the file-loader, which then vue-loader isn't pleased with.

I'm not entirely sure if my use case is unreasonable here, but it would be very nice to be able to preempt the file-loader rule somehow to make vue-loader happy. For instance, reordering (in https://github.com/jupyterlab/jupyterlab/blob/3.4.x/builder/src/extensionConfig.ts#L253 ) succeeds at fixing this specific problem:

  const config = [
    merge(
      baseConfig,
      webpackConfig
      {
        mode,
        devtool,
        entry: {},
        output: {
          filename,
          path: staticPath,
          publicPath: staticUrl || 'auto'
        },
        module: {
          rules: [{ test: /\.html$/, use: 'file-loader' }]
        },
        plugins
      }
    )
  ].concat(extras);

but I am wary that this will break other use cases.

Would it be possible to provide a second key, or otherwise specify the order of merge-ing, so that the vue rule is first? (I'm happy to submit a PR to do this, but felt asking first might work better.)

[welcome]

Thank you for opening your first issue in this project! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out Jupyter's Code of Conduct. Also, please try to follow the issue template as it helps other other community members to contribute more effectively.

You can meet the other Jovyans by joining our Discourse forum. There is also an intro thread there where you can stop by and say Hi! 👋

Welcome to the Jupyter community! 🎉

[JasonWeill]

I don't have much familiarity with Vue, but I would encourage you to submit a pull request so that we can try your changes and see if anything is broken as a result. Thanks!

[fcollonval]

@matthewturk would you mind trying the following ordering for merge:

const config = [
    merge(
      baseConfig,
      {
        mode,
        devtool,
        entry: {},
        output: {
          filename,
          path: staticPath,
          publicPath: staticUrl || 'auto'
        },
        plugins
      },
      webpackConfig,
      {
        module: {
          rules: [{ test: /\.html$/, use: 'file-loader' }]
        },
      }
    )
  ].concat(extras);

It seems that indeed as the rules on all html file is the most generic, it should be the latest. And if someone is overriding that rule with another loader, it will never be called as rules are tried in order (hence the error you are seeing).
But the other parameters will still be overridden by custom webpackConfig if needed.

If it works with this suggestion, then that will definitely make a good bug fix PR for this issue.

[matthewturk]

@fcollonval @jweill-aws thank you for the suggestions! As noted in the log, I've issued a PR (#13040) with the changes suggested by @fcollonval. I was not sure how to appropriately credit you for the suggested change and I'd be happy to edit the pull request to do so if you have a suggestion for how!