Appropriate loader in Webpack on Next JS

Question

I want to load a HTML file with Next JS and html-loader, but I have this error message :

Module parse failed: Unexpected token (2:2)
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

// next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  env: {
    SERVICE_ID: process.env.SERVICE_ID,
  },
  webpack: {
    test: /\.(html)$/,
    use: {
      loader: "html-loader",
      options: {
        attrs: [":data-src"],
      },
    },
  },
};

module.exports = nextConfig;

// My Component (Planning.jsx)

import Page from "../planning.html";

const Planning = () => {
  let htmlDoc = { __html: Page };

  return <div dangerouslySetInnerHTML={htmlDoc} />;
};

export default Planning;

// planning.html

<div
  id="ID"
  data-id-projet="ID"
>
  Loading...
</div>
<script
  type="text/javascript"
  src="https://reservation.elloha.com/Scripts/widget-loader.min.js?v=38"
></script>
<script type="text/javascript">
  var constellationWidgetUrlID =
    "https://reservation.elloha.com/Widget/BookingCalendar/ID";
  constellationTypeModuleID = 2;
  constellationBookingCalendarLoad(
    "ID"
  );
</script>

How can I solve this problem ? I really need to load some HTML code and JS script in my project.

Answer 1

Did you install html-loader ?

If no, install it and try it again

Answer 2

if you are using react.js, and you want to import html, you need to create component which returns proper jsx code. If the code inside Planning.html is what you show, that is wrong.

Next, syntax for dangerouslySetInnerHTML is like this

<div dangerouslySetInnerHTML={{ __html: htmlDoc }}

this is typescript definition

DOMAttributes<HTMLDivElement>.dangerouslySetInnerHTML?: {
    __html: string;
} | undefined

htmlDoc that you are passing should be string. For example, this data is a string

I think, if instead of Planning.html file, you set this

const data=`<>
  <div id="ID" data-id-projet="ID">
    Loading...
  </div>
  <script
    type="text/javascript"
    src="https://reservation.elloha.com/Scripts/widget-loader.min.js?v=38"
  ></script>
  <script type="text/javascript">
    var constellationWidgetUrlID =
    "https://reservation.elloha.com/Widget/BookingCalendar/ID";
    constellationTypeModuleID = 2; constellationBookingCalendarLoad( "ID" );
  </script>
</>;`

and then inject this

 <div dangerouslySetInnerHTML={{ __html: data }}