vite cannot handle xxx.html files

user_9672476 0
Viewed 1189

I had a Vite project for Vue2, It include a static html file.

like following

import template from 'editor.html';
export default {
    template: template
}

When I ran yarn dev, Terminal output:

node_modules/@gaoding/editor-framework/lib/base/editor.js:23:21: error: No loader is configured for ".html" files: node_modules/@gaoding/editor-framework/lib/base/editor.html 23 │ import template from './editor.html';

I tried to add some plugin below in vite.config.ts, But all of these didn't work.

@rollup/plugin-html

rollup-plugin-html

rollup-plugin-htmlvue

How can I solve this problem.

rollup vite loader plugins html
2 Answers

adding ?raw at the end of the import can address the issue:

import template from "./contact-list.html?raw";

I'm still looking for a solution how to set it globally for all HTML files.

user_6035440

I know that this is super old, however I found something that worked for me.

// vite.config.js
const htmlImport = {
  name: "htmlImport",
  /**
   * Checks to ensure that a html file is being imported.
   * If it is then it alters the code being passed as being a string being exported by default.
   * @param {string} code The file as a string.
   * @param {string} id The absolute path. 
   * @returns {{code: string}}
   */
  transform(code, id) {
    if (/^.*\.html$/g.test(id)) {
      code = `export default \`${code}\``
    }
    return { code }
  }
}

export default {
  plugins: [ htmlImport ]
}

The above code allows me to import an html file as a string without the ?raw. I needed this to migrate AngularJS 1.5 from gulp to Vite and it is working rather well.

You can find a point of reference here

user_55534280
Related