Appropriate loader in Webpack on Next JS-CodePudding

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.

CodePudding user response：

Did you install html-loader ?

If no, install it and try it again

CodePudding user response：

I think should be like this

<div dangerouslySetInnerHTML={{ __html: htmlDoc }}

this is typescript definition

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

htmlDoc that you are passing should be string.