1

Trying to build a simple Vite project and every thing is right, but when I add a library(it's a privite library in my company so I call it ui-modal here), getting an error

✘ [ERROR] No loader is configured for ".html" files: node_modules/ui-modal/src/template/toast.html

    node_modules/ui-modal/es5/Toast.js:20:44:
      20 │ ...fault(require("../src/template/toast.html"));
         ╵                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

10:22:45 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/ui-modal/es5/Toast.js:20:44: ERROR: No loader is configured for ".html" files: node_modules/ui-modal/src/template/toast.html

I checked the ui-modal library and find out that it compiled with webpack, but there is only text-loader for .html files， so it has been relying on the user's webpack configuration to process this html file. The code corresponding to the error is as follows

node_modules/ui-modal/es5/Toast.js

var _toast = _interopRequireDefault(require("../src/template/toast.html"));

node_modules/ui-modal/src/template/toast.html

<div class="ui-toast-box _u-modal-box <%if(data.id){%> ui-toast-<%=data.id%> <%}%> <%if(data.animation){%> ui-toast-animation <%}%>">
    <p class="ui-toast"><%=data.content%></p>
</div>
<div class="ui-dialog-mask<%if(data.duration && !data.captureEvt){%> ui-dialog-mask-noevent<%}%>" <%if(!data.withMask){%> style="opacity: 0;" <%}%> ></div>

I know that if I used webpack, I could solve this with html-loader, so I tried to use html-loader manually, but failed because lack of webpack context in vite

Can anyone help me?

Livio
  • 300
  • 1
  • 10

0 Answers0