How to import html file into react as string?

Question

I have an HTML template as a separate file that I would like to import into my react application. The intention will be replacing specific keywords and then sending it as the body in an email.

How can I import this html file into my react application?

I have tried import htmlString from '../../../constants/EmailHTML.html'; as well as var html = require('../../../constants/EmailHTML.html'); (which was suggested in this similar question)

I get the following error for both attempts:

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

Effectively this question boils down to: How do I import a text file as a string in React? This is an often-answered question and all the results seem to be to use an async loader -- something that shouldn't really need to happen given the file is in my src directory ready to go before build.

Not really, as those rely on using the filesystem module from node.js and the use of a readFileSync. Though, perhaps importing is simply a complicated process and I need to deal with it. — lowcrawler
– lowcrawler, Commented Mar 9, 2021 at 16:49

Rich N · Accepted Answer · 2021-03-10 17:11:44Z

6

Answer for create-react-app:

Install the raw-loader package npm i --save raw-loader
Add a test HTML file you want read to src. I added test.html.
Add the lines below where you want to get the contents of the HTML file into a JavaScript string. html will contain the string contents of the file.

Code:

// eslint-disable-next-line import/no-webpack-loader-syntax
var htmlModule = require('raw-loader!./test.html');
var html = htmlModule.default;

edited Mar 10, 2021 at 17:11

answered Mar 9, 2021 at 19:45

Rich N

9,5053 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lowcrawler Over a year ago

Create-React-App kind of hides the webpack stuff from you unless you 'eject' your project.

Rich N Over a year ago

I've posted an answer for create-react-app. It would have been good to mention it in the original question :-)

Collectives™ on Stack Overflow

How to import html file into react as string?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related