CODEWITHSUNDEEP
vue.jswebpackvuejs2webpack-4vue-loader
Aldarund
Aldarund

Reputation: 17621

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

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 https://i.imgur.com/BQxmrcF.png

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.

Upvotes: 2

Views: 1387

Answers (1)

Max Sinev
Max Sinev

Reputation: 6019

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

Upvotes: 1

Related Questions