Versions of vue-loader 16.6.0+ issues compile time error while using with vue-svg-loader

[jskitz]

Version

16.6.0+

Reproduction link

github.com

Steps to reproduce

• Pull down the repository by issuing the command git clone git@github.com:jskitz/vue-loader-bug.git
• npm install to install the packages.
• Try to serve the project running npm run serve. You will receive a compile time error that complains of a module parse failure.

The problem occurs in vue-loader versions 16.6.0+ and above. If you want to fix the problem in this repository, you can install version 16.5.0 and everything will work fine.

If you want to see this running correctly, downgrade vue-loader to 16.5.0:

• npm install vue-loader@16.5.0, which will downgrade vue-loader from 16.8.1 to 16.5.0
• npm run serve
• Go to http://localhost:8080/ and you will see an SVG of a girl reading a book.

What is expected?

It is expected that this should compile correctly with later versions of vue-loader instead of receiving a compile time error.

What is actually happening?

In versions greater than 16.5.0, the following compile time error is received:

Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/vue-loader/dist/index.js
 * ./node_modules/vue-svg-loader/index.js
You may need an additional loader to handle the result of these loaders.

Stack trace:

@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/components/GirlReadingIllustration.vue?vue&type=script&lang=js 1:0-70 4:29-52
 @ ./src/components/GirlReadingIllustration.vue?vue&type=script&lang=js
 @ ./src/components/GirlReadingIllustration.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.143:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

---

Because I've migrated my project to vue-3 and versions are updating quickly, I'm trying to stay up to date as much as possible. When upgrading vue-loader from 16.5.0 to 16.8.1, I started getting compile time errors when compiling all svg files in my project.

[seeyoulater]

I have the same problem. The reason is that vue-loader doesn't anymore process files without .vue or .html extensions.
Not enough flexible workaround for ts-loader that causes a bug. Would be nice to have a way to process custom files too.

[frankykubo]

Any update on this?

[haoqunjiang]

Any update on this?

"help wanted".

[haoqunjiang]

Fixed in v16.8.2