Unable to render html file using Route in react

Question

I am trying to render html using Route but browser is giving me following error:

Failed to compile.

./src/hello.html 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type.

<html> | Hello | </html>

I have already tried using babel but when I run npm start the terminal is telling me undo all the babel and webpack changes -

Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.

Delete node_modules in your project folder.

Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder.

Run npm install or yarn, depending on the package manager you use. In most cases, this should be enough to fix the problem. If this has not helped, there are a few other things you can try:

If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. This may help because npm has known issues with package hoisting which may get resolved in future versions.

Check if /Users/shubhamnandanwar/Desktop/react/YourHourWebApp/node_modules/babel-loader is outside your project directory. For example, you might have accidentally installed something in your home folder.

Try running npm ls babel-loader in your project folder. This will tell you which other package (apart from the expected react-scripts) installed babel-loader.

This is my App.js file

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Dashboard from "./components/dashboard/Dashboard";
import UserStory from "./components/stories/UserStory";
import SignIn from "./components/auth/SignIn";
import SignUp from "./components/auth/SignUp";
import CreateStory from "./components/stories/CreateStory";
import { Redirect } from "react-router-dom";

class App extends Component {
  reload = () => window.location.reload();

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Switch>
            <Route exact path="/" component={TemplateHTMLComponent} />
            <Route exact path="/stories" component={Dashboard} />
            <Route path="/story/:id" component={UserStory} />
            <Route path="/signin" component={SignIn} />
            <Route path="/signup" component={SignUp} />
            <Route path="/uploadStory" component={CreateStory} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

class TemplateHTMLComponent extends React.Component {
  htmlFile = require("./hello.html");
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

export default App;

I am new in react and have spent hours trying to fix it. Can anyone please give me some direction

tarzen chugh · Accepted Answer · 2019-09-11 05:46:22Z

1

1) First of all install html-loader module.

npm install --save-dev html-loader

2) Inside webpack.config.js

{
  modules: {
    loaders: [
      { test: /\.html$/, loader: 'html' }
    ]
  }
}

3) Correct the calling component

import htmlFile from './hello.html';

class TemplateHTMLComponent extends React.Component {
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

Hope that helps!!!

answered Sep 11, 2019 at 5:46

tarzen chugh

11.4k4 gold badges22 silver badges31 bronze badges

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

9 Comments

Shunan Over a year ago

Hey @tarzenchugh, I had tried installing webpack but react had told me to revert all the webpack changes. Can you direct how should i install webpack? Is it possible to directly add webpack.config.js file without installing webpack?

tarzen chugh Over a year ago

Are you using create-react-app? Which bundler are you using if not using webpack?

Shunan Over a year ago

I am not sure what bundler is but I guess I am using npm

tarzen chugh Over a year ago

npm is package manager. how did you create your application was it using create-react-app?

Shunan Over a year ago

Yup.. i had used create-react-app

|

Sain Pradeep · Accepted Answer · 2019-09-11 05:30:59Z

0

please put 'htmlFile = require("./hello.html");' line on the top outside the class.

const htmlFile = require("./hello.html");

class TemplateHTMLComponent extends React.Component {      
  render() {
    return <div dangerouslySetInnerHTML={{ __html: this.htmlFile }} />;
  }
}

answered Sep 11, 2019 at 5:30

Sain Pradeep

3,1351 gold badge24 silver badges34 bronze badges

1 Comment

Sain Pradeep Over a year ago

Please add the webpack.config.js and package.json file to your question. It look likes some config issue.

Fatah · Accepted Answer · 2019-09-11 06:49:42Z

0

Make sure your html is a string. Read more here https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

Then export it from a .js file like this:

// inside hello.js file
// using es6 syntax
export default `<html> |   Hello | </html>`

or

// inside hello.js file
// using older syntax
module.exports = `<html>blah blah</html>`

then import it:

import htmlFile from 'htmlFile'

or

const htmlFile = require('hello')

edited Sep 11, 2019 at 6:49

answered Sep 11, 2019 at 5:49

Fatah

2,2864 gold badges22 silver badges40 bronze badges

Collectives™ on Stack Overflow

Unable to render html file using Route in react

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related