1

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.

Archana Sharma
  • 1,953
  • 6
  • 33
  • 65

1 Answers1

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.

Anton Bakinowsky
  • 342
  • 1
  • 6