vue-loader does not allow separating .vue and .js file with the same filenames

[SystemR]

Version

12.1.0

Reproduction link

https://jsbin.com/vuvumeduza/edit?html,output

Steps to reproduce

1. Generate a project using vue-cli
2. Change the script part in Hello component .vue file into an external js file as per https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns
3. Hello.vue and Hello.js still works, but restart the dev server
4. vue.esm.js would warn about "Failed to mount component: template or render function not defined."

What is expected?

Hello.vue should be the main file for the componenet

What is actually happening?

Hello.js is the file pointed by vue.esm.js

---

I was following this guide to separate my <template> and <script>:
https://vuejs.org/v2/guide/single-file-components.html#What-About-Separation-of-Concerns

However, it seems filenames for .vue and .js files would have to be different for the @component. Otherwise the vue-loader would pick up the .js file for the @component, resulting the error: "Failed to mount component: template or render function not defined."

If you introduce the .js file after the dev server is running, vue-loader would still process the .vue file first. But running dev server from cold boot would make the .js file as the main file for @component.

Example:

Hello.vue:
<template>
    <div class='hello'></hello>
</template>
<script src='./Hello.js'></script> //Doesn't work on dev server cold boot
<script src='./HelloController.js'></script> //Works

If won't fix, then maybe make a note on the documentation about the filename requirements when separating them.

[LinusBorg]

If you have two files with the same name, use explicit file extensions in imports.

Alternatively, change this line to resolve .vue first:

https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L22

[tjunussov]

I faced with same problem, maybe we should have warning section in manual ? or right webpack configuration from the defaul vue-cli ?

[LinusBorg]

This configuration is not "wrong". I think it's correct to prefer is files, they are the standard files in JS apps after all.