Module Parse Failed - SPFX React Extension - botframework-webchat

Question

Here is the
Screenshot of Error

I am creating SPFX Extension and using Chatbot Farework. While building I am getting above shown error.

It says, that loader is required. 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

P.S: I am using "botframework-webchat": "^4.9.0" that somehow using above modules and these module not able to parse properly and need loader to handle this. Any clue or solution will be appreciated.

I tried to remove node module and package lock json file and install again. but It didnt work.

Below is repo to reproduce. if you try to make gulp build it will fail.

https://github.com/Hasnii501/app-extension

Answer 1

This issue can be solved by installing esbuild-loader.

npm i -D esbuild-loader

and then update the gulpfile to add below configuration.

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push({
        test: /\.[jt]sx?$/,
        use: [
          {
            loader: 'esbuild-loader',
            options: {
              target: 'es2015'
            }
          }
        ]
      }
    );
    return generatedConfiguration;
  }
});