Search code examples
javascriptreactjswebpackowl-carousel

How can I configure webpack.config.js to convert/transform my HTML file into JS in reactjs?

Here is my folder structure

enter image description here

when i tried to run my react app it give me this error Failed to compile.

./src/css/owl.html 1:0 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. See https://webpack.js.org/concepts#loaders

I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.

Solution

  • Short answer:

    No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.

    There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.

    Long Answer:

    React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.

    In the Owl.js write the following:

    import React from 'react';

export default () => { 
  return (
    <React.Fragment>enter code here
      // paste the code from your owl.html file. (everything that is written under <body>)
    </React.Fragment>
  )
}

    Use this newly created component in the App.js you have by importing it into.

    Also use the css by importing it simply in the Owl.js file, like this:

    import '~you-path~/owl.css';

    And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.

    I hope this clears the confusion here.