Laravel-mix: When splitting component into separate js/html files compilation breaks

[ZacharieBaptiste]

• Laravel Mix Version: 4.0.12 (npm list --depth=0)

# npm list --depth=0
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

• Node Version (node -v): v11.5.0
• NPM Version (npm -v): 6.4.1
• OS: Ubuntu 16.10

Description:

Splitting template into separate html file doesn't work. Gives compilation errors.
Looks like two module.exports are generated, one with the html and one as an empty string.

I'm not sure this is the right place to report this, but I hit this wall when upgrading to latest mix following the documentation. Also tried doing the same thing from a clean Vue project, there was no issues. This is only an issue with latest version of laravel mix.

Steps To Reproduce:

1. Create a new laravel project with laravel new
2. Run npm install
3. Split the ExampleComponents.vue into a JS and HTML file, vue file should look like this:

<template src="./ExampleComponent.html"></template>
<script src="./ExampleComponent.js"></script>

Contents of those file are simple the JS part and the HTML part of that original vue file.

1. Run npm run dev:

Error:

ERROR in ./resources/js/components/ExampleComponent.html?vue&type=template&id=299e239e& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/html-loader!./resources/js/components/ExampleComponent.html?vue&type=template&id=299e239e&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Error compiling template:
  module.exports = "<div class=\"container\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-md-8\">\n            <div class=\"card card-default\">\n                <div class=\"card-header\">Example Component</div>\n\n                <div class=\"card-body\">\n                    I'm an example component.\n                </div>\n            </div>\n        </div>\n    </div>\n</div>";
  - text "module.exports = "" outside root element will be ignored.

 @ ./resources/js/components/ExampleComponent.html?vue&type=template&id=299e239e& 1:0-198 1:0-198
 @ ./resources/js/components/ExampleComponent.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss

[ZacharieBaptiste]

I've now also tried it on a stand alone, without laravel. Still the same issue.
my-app.zip

# npm list --depth=0
[email protected]
└── [email protected]

```
ERROR in ./src/components/ExampleComponent.html?vue&type=template&id=6982cd3a& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/html-loader!./src/components/ExampleComponent.html?vue&type=template&id=6982cd3a&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Error compiling template:
module.exports = "

n

n

n

n

Example Component

nn

n I'm an example component.n

n

n

n

n

";

• text "module.exports = "" outside root element will be ignored.

@ ./src/components/ExampleComponent.html?vue&type=template&id=6982cd3a& 1:0-192 1:0-192
@ ./src/components/ExampleComponent.vue
@ ./src/app.js
@ multi ./src/app.js
``

[MaxwellHutt]

I am having this same issue.

`ERROR in ./resources/assets/js/components/TermsAndSigns/view.html?vue&type=template&id=2dd81fad& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/html-loader!./resources/assets/js/components/TermsAndSigns/view.html?vue&type=template&id=2dd81fad&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
Error compiling template:
module.exports = "

n";

• text "module.exports = "" outside root element will be ignored.

@ ./resources/assets/js/components/TermsAndSigns/view.html?vue&type=template&id=2dd81fad& 1:0-198 1:0-198
@ ./resources/assets/js/components/TermsAndSigns/component.vue
@ ./resources/assets/js/app.js
@ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss`

[ZacharieBaptiste]

src/builder/webpack-rules.js

    // Add support for loading HTML files.
    rules.push({
        test: /\.html$/,
        loaders: ['html-loader']
    });

If removed, then things just work. But that for sure will have some side effects?

[sergseriy]

+1 same issue

[jpscharf]

I found a work around until the issue is resolved: rename ExampleComponent.html -> ExampleComponent.htm

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ZacharieBaptiste]

@JeffreyWay This is still an issue. And reproducable. Any way to get this fixed properly?

[Verron]

Anyone looking into this?

[dhrumil4u360]

Facing same issue!... +1

[enghelewa]

I make it like so & it works fine :

<scrpit>
export default MyVue{
          template: require(‘./MyVue.html’);
}
</scrpit>

[decadence]

Have the same problem, solutions from @jpscharf and @enghelewa are working.
Does anyone know is this possible to include HTML in Vue template instead of creating new nested component like so?

<template>
<div>
    <h1>Component Header</h1>
    <!-- include here separate HTML file -->
</div>
</template>

<template src="./test.html"></template> doesn't work.

[geordyd]

Still facing the same issue.