Vue custom block produce error when an empty loader added to .use clause of webpack

Question

If there is a custom block in vue file. E.g.

<router3333>
    path: /:category/:segment
</router3333>

It will be compiled and work fine with vue loader configured as the only one in the .use clause

If i add another loader into use clause that do exactly nothing for example whole loader

module.exports = function (source) { return source }

Compilation will fail with error

Module parse failed: Unexpected token (24:17)
File was processed with these loaders:
 * ./my-loader.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> path: /:category/:segment

The output of vue-loader in both cases is same

import { render, staticRenderFns } from "./xxxc.vue?vue&type=template&id=0067048f&"                                                                                                       01:13:55
import script from "./xxxc.vue?vue&type=script&lang=ts&"
export * from "./xxxc.vue?vue&type=script&lang=ts&"


/* normalize component */
import normalizer from "!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js"
var component = normalizer(
  script,
  render,
  staticRenderFns,
  false,
  null,
  null,
  null

)

/* custom blocks */
import block0 from "./xxxc.vue?vue&type=custom&index=0&blockType=router3333"
if (typeof block0 === 'function') block0(component)

export default component.exports

So just adding an loader that do nothing in use clause make custom block fail. Whats happening here and how to avoid it ?

Here is repro https://codesandbox.io/s/codesandbox-nuxt-4dqmy If in nuxt.config set vuetify.treeShake: true - it will do what is described here, e.g. add another loader to use clause and it will cause error. The loader code itself doesn't matter as it happen with empty loader too.

@MaxSinev not using webpack directly, but rather via nuxt. And the relevant change to add new loader is done via api. vueRule.use.unshift({ loader: require.resolve('./loader'), options: this.options }) — Aldarund
– Aldarund, Commented Jul 15, 2019 at 9:19
The error pops up whether you add the loader or not. The repro does not contain any my-loader. — Munim Munna
– Munim Munna, Commented Jul 15, 2019 at 16:42
@MunimMunna yes, the error popups whether i add new loader to use clause or no - no error. Disable treeShake and there wont be error. Thats the exact point. The repro contains vuetify-loader added, but the loader content isnt important at all, it could be replaced with empty loader e.g. my-loader with exact same result like i said . — Aldarund
– Aldarund, Commented Jul 15, 2019 at 17:08

Max Sinev · Accepted Answer · 2019-07-15 18:37:31Z

1

+100

Whats happening here ...?

The answer is pretty simple - because you have another one loader for vue files(that's why even vuetify-loader fails your build), and it can be proved with vue-loader source code function which is responsible for this. It just checks number of loaders and decides to add import statement for a custom block or just pass empty string [code block].

... and how to avoid it ?

Vue-loader has docs section for the custom blocks functionality. You can just create a new rule with blockType query param to process your custom router3333 block code:

rules: [
  // ...
  {
    resourceQuery: /blockType=router3333/,
    loader: require.resolve('./my-loader')
  }
  // ...
]

So as you can see you should use your block tag as type in the code above.

And if you don't want to do anything for now with your custom block content just return an empty string from your loader function.

Vue-loader Custom Blocks

answered Jul 15, 2019 at 18:37

Max Sinev

6,0192 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aldarund Over a year ago

Thanks :) That code piece from vue-loader look exactly what i was looking for, i didnt digged into vue loader code to find out it (

Max Sinev Over a year ago

@Aldarund And there was also the same internal issue with cache-loader for vue files and they added kind of exception for that case(in the function from my link in the answer) github.com/vuejs/vue-loader/issues/1394 :)

Aldarund Over a year ago

yes, i noticed it in code. Not very robust solution to hardcode ignored loaders like this :)

Collectives™ on Stack Overflow

Vue custom block produce error when an empty loader added to .use clause of webpack

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related