CODEWITHSUNDEEP
javascriptreactjswebpackwebpack-loader
Archana Sharma
Archana Sharma

Reputation: 2081

How to read local html file content inside React js App using Webpack loaders?

I am working on react js app and trying to read html file content locally. On specific condition I am passing file html data inside a variable like this::

let content = require(`../Designs/${data.path}.html`);

But it gives me error:

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

To resolve this I have created "webpack.config.js" file and installed webpack, html-loader. My is look like this:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
    module: {
        rules: [
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html',
        })
    ]
};

Still I am getting same error. Please help or suggest something as I am new to webpack.

Upvotes: 1

Views: 1816

Answers (1)

Anton Bakinowsky
Anton Bakinowsky

Reputation: 352

let content = require(`../Designs/${data.path}.html`);

Code above is a dynamic module import.
It means that module path is generated in runtime (when code is executed). But webpack can't work with such imports.
Because it doesn't know exact path of module when it create a bundle.
So I think it is better to import all files you have and then switch between them in code rather than generating module path in runtime.

If believe minimal example from documentation should be enough to cover your needs.

Upvotes: 1

Related Questions