How to dynamically load html file into electron-react app?

Question

I am using react and electron. I need to load some external html file into one of my components. Before I added electron to my app was working fine but now I have this error:

     Uncaught Error: Module parse failed: Unexpected token (1:0) You may
     need an appropriate loader to handle this file type. 
| <!DOCTYPE html> | <html> | <head>

            at Object../src/Partlists/9501.010400.html (.html$:23)
            at __webpack_require__ (bootstrap 1141b6c863a0f68d945d:678)
            at fn (bootstrap 1141b6c863a0f68d945d:88)
            at webpackContext (.html$:10)
            at BoxLabelContainer.getHTMLFile (BoxLabelContainer.js:266)
            at BoxLabelContainer.render (BoxLabelContainer.js:379)
            at finishClassComponent (react-dom.development.js:7873)
            at updateClassComponent (react-dom.development.js:7850)
            at beginWork (react-dom.development.js:8225)
            at performUnitOfWork (react-dom.development.js:10224)
            at workLoop (react-dom.development.js:10288)
            at HTMLUnknownElement.callCallback (react-dom.development.js:542)
            at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
            at invokeGuardedCallback (react-dom.development.js:438)
            at renderRoot (react-dom.development.js:10366)
            at performWorkOnRoot (react-dom.development.js:11014)
            at performWork (react-dom.development.js:10967)
            at batchedUpdates (react-dom.development.js:11086)
            at batchedUpdates (react-dom.development.js:2330)
            at dispatchEvent (react-dom.development.js:3421)

I'm loading my file like this:

getHTMLFile(partNumber) {
    let html = require(`../Partlists/${partNumber}.html`);
    return {__html: `<div>${html}</div>`};
  }

<div dangerouslySetInnerHTML={this.getHTMLFile(this.state.selectedPartNumber)}></div>

I tried everything, but nothing is working. And I think is because of the electron way of building the app. Any ideas?

Your webpack setup has no `html-loader` this is why it has no idea how to require a `.html` file. You can get one here https://github.com/webpack-contrib/html-loader — Hans Koch, Mar 26 '18 at 14:19
you can use html loader, for example read this answer https://stackoverflow.com/a/46997182/713789 — Anirudha Gupta, Mar 26 '18 at 14:20
Thank you for your replay, I tried html-loader but it didn't work, I will try it again — Emanuela Grigore, Mar 26 '18 at 17:23
It's only working when I open the app in the browser, if I open it as an app in development mode I have the same error. Any ideas why? — Emanuela Grigore, Mar 27 '18 at 06:24

How to dynamically load html file into electron-react app?

0 Answers0