How to fix this unusual Script error sometimes when i load MS Word Addin.

Question

I have made my Word addin in React.js with Yeoman Generator. I have deployed it it my server and published it to Office store. But sometimes, i get very unusual error. What is the reason for this. I have tried to disbale warnings but it was not working.

And this is the starting point of the project import * as React from "react";

import { createRoot } from "react-dom/client";

import App from "./components/App";

import { FluentProvider, webLightTheme } from "@fluentui/react-components";

import { HashRouter } from "react-router-dom";

import "./index.css";

import { Toaster } from "react-hot-toast";

import { Tooltip } from "react-tooltip";

/ global document, Office, module, require /

const title = "Compugrade for Word";

const rootElement = document.getElementById("container");

const root = rootElement ? createRoot(rootElement) : undefined;

Office.initialize = function () {};

/ Render application after Office initializes /

Office.onReady(function () {

  root?.render(

    <FluentProvider theme={webLightTheme}>

      <div>

        <Toaster />

      </div>

      <HashRouter>

        <App title={title} />

      </HashRouter>

      <Tooltip id="my-tooltip" className="!p-1 !text-xs !bg-black shadow-md" />

    </FluentProvider>

  );

});

if (module.hot) {

  module.hot.accept("./components/App", () => {

    const NextApp = require("./components/App").default;

    root?.render(NextApp);

  });

}

Here is my Webpack.js / eslint-disable no-undef /

const devCerts = require("office-addin-dev-certs");

const CopyWebpackPlugin = require("copy-webpack-plugin");

const HtmlWebpackPlugin = require("html-webpack-plugin");

const webpack = require("webpack");

const urlDev = "https://localhost:3001/";

const urlProd = "https://admin.wordaddin.educating.ai/"; // CHANGE THIS TO YOUR PRODUCTION DEPLOYMENT LOCATION

async function getHttpsOptions() {

  const httpsOptions = await devCerts.getHttpsServerOptions();

  return { ca: httpsOptions.ca, key: httpsOptions.key, cert: httpsOptions.cert };

}

const path = require("path");

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = async (env, options) => {

  const dev = options.mode === "development";

  const config = {

    devtool: "source-map",

    entry: {

      polyfill: ["core-js/stable", "regenerator-runtime/runtime"],

      vendor: ["react", "react-dom", "core-js", "@fluentui/react-components", "@fluentui/react-icons"],

      taskpane: ["./src/taskpane/index.jsx", "./src/taskpane/taskpane.html"],

      commands: "./src/commands/commands.js",

    },

    output: {

      clean: true,

    },

    resolve: {

      extensions: [".js", ".jsx", ".html"],

    },

    module: {

      rules: [

        {

          test: /.jsx?$/,

          use: {

            loader: "babel-loader",

            options: {

              presets: ["@babel/preset-env"],

            },

          },

          exclude: /node_modules/,

        },

        {

          test: /.html$/,

          exclude: /node_modules/,

          use: "html-loader",

        },

        {

          test: /.(png|jpg|jpeg|ttf|woff|woff2|gif|ico)$/,

          type: "asset/resource",

          generator: {

            filename: "assets/[name][ext][query]",

          },

        },

        {

          test: /.css$/i,

          include: path.resolve(__dirname, "src"),

          use: ["style-loader", "css-loader", "postcss-loader"],

        },

        {

          test: /.css$/i,

          exclude: path.resolve(__dirname, "src"),

          use: ["style-loader", "css-loader"], // No PostCSS for node_modules

        },

      ],

    },

   

    plugins: [

      new NodePolyfillPlugin(),

      new CopyWebpackPlugin({

        patterns: [

          {

            from: "assets/",*

            to: "assets/[name][ext][query]",

          },

          {

            from: "manifest.xml",*

            to: "[name]" + "[ext]",

            transform(content) {

              if (dev) {

                return content;

              } else {

                return content.toString().replace(new RegExp(urlDev, "g"), urlProd);

              }

            },

          },

        ],

      }),

      new HtmlWebpackPlugin({

        filename: "taskpane.html",

        template: "./src/taskpane/taskpane.html",

        chunks: ["polyfill", "vendor", "taskpane"],

        scriptLoading: "defer",

        attributes: { crossorigin: "anonymous" },

      }),

      new HtmlWebpackPlugin({

        filename: "commands.html",

        template: "./src/commands/commands.html",

        chunks: ["commands"],

        scriptLoading: "defer",

        attributes: { crossorigin: "anonymous" },

      }),

      new webpack.ProvidePlugin({

        Promise: ["es6-promise", "Promise"],

      }),

    ],

    devServer: {

      hot: true,

      compress: true,

      allowedHosts: ["admin.wordaddin.educating.ai"],

      headers: {

        "Access-Control-Allow-Origin": "",*

      },

      server: {

        type: "https",

        options: env.WEBPACK_BUILD || options.https !== undefined ? options.https : await getHttpsOptions(),

      },

      port: process.env.npm_package_config_dev_server_port || 3001,

    },

  };

  return config;

};