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

Question

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.

Anton Bakinowsky · Accepted Answer · 2020-09-29 07:38:08Z

1

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.

edited Sep 29, 2020 at 7:38

answered Sep 25, 2020 at 16:42

Anton Bakinowsky

3521 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related