CommonJS 4.17.0 Issue - EJS botframework-webchat-api

[shah-vtx]

Is it an issue related to Adaptive Cards?

No

Is this an accessibility issue?

No

What version of Web Chat are you using?

Latest production

Which distribution are you using Web Chat from?

NPM

Which hosting environment does this issue primarily affect?

Web apps

Which browsers and platforms do the issue happened?

Others or unrelated

Which area does this issue affect?

Others or unrelated

Which theme pack does this issue affect?

I did not test it on other theme packs

What is the public URL for the website?

No response

Please describe the bug

I'm using a TS project with webpack. It is using commonjs. 4.16.0 works perfectly fine but as soon as I switch to the latest 4.17.0, I get runtime errors in the console in the browser because it is trying to use .mjs files. I also saw this PR and thought it would fix it so I tried the latest main version: 4.17.1-main.20240708.c9247bf.

Do you see any errors in console log?

botframework-webchat-api.mjs:1 Uncaught (in promise) TypeError: i is not a function
    at botframework-webchat-api.mjs:1:23790
    at chunk-4ZIUY4G5.mjs:1:182
    at ./node_modules/botframework-webchat-api/dist/botframework-webchat-api.mjs (botframework-webchat-api.mjs:139:43590)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/botframework-webchat-component/dist/botframework-webchat-component.mjs (botframework-webchat-component.internal.mjs:3:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/botframework-webchat/dist/chunk-EZUR2UAI.mjs (botframework-webchat.mjs:3:1)
    at __webpack_require__ (bootstrap:24:1)

How to reproduce the issue?

As as you load it in the browser.

What do you expect?

For the page to load and crash to not occur.

What actually happened?

Crashes with console error

Do you have any screenshots or recordings to repro the issue?

N/A

Adaptive Card JSON

No response

Additional context

No response

[OEvgeny]

We had some fixes related to Webpack, please try 4.18.*

[shah-vtx]

I just tried 4.18.0 and still seeing the same issue.

[OEvgeny]

Looks like another regression with globalize.

The i refers to Globalize._numberRound where the Globalize is imported from globalize/dist/globalize-runtime as CJS module:

The runtime module does not contain the function:

Instead, it is added in globalize/dist/globalize-runtime/number, defined in the module:

We seem to bundle-in everything needed for it to work, and respect the execution order of modules.

cc @compulim

[OEvgeny]

@shah-vtx could you share your webpack configuration and exact versions of webopack and plugins used?

[OEvgeny]

There is a known issue with Webpack v5 mentioned in changelog:

[4.17.0] - 2024-05-06

Known issues

• Web Chat is not loading with error Uncaught TypeError: Super constructor null of anonymous class is not a constructor
• A bug in webpack@>=5.84.1 is causing the issue. Please update to webpack@>=5.90.0

Please make sure you're using the right version.

[shah-vtx]

I did an override in my package.json to webpack 5.90.0 and still the same runtime console error.

[OEvgeny]

Can't assist without further details on webpack configuration and used plugins versions.

@shah-vtx could you share your webpack configuration and exact versions of webopack and plugins used?

[light049]

@shah-vtx, have you found any solution?

I think I'm facing similar issue... Q_Q I use CRA("react-scripts": "5.0.0") with craco(7.1.0) to help some customization

Although it seems successful when run dev service.

But it gets failed.

This is my craco.config.js

const path = require('path');
const CracoAlias = require('craco-alias');
const { ChangeJsFilename, ChangeCssFilename } = require('@navikt/craco-plugins');

const DropConsolePlugin = {
  overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
    if (pluginOptions) {
      const TerserPlugin = webpackConfig.optimization.minimizer.find(i => i.constructor.name === 'TerserPlugin');

      if (TerserPlugin) {
        try {
          TerserPlugin.options.minimizer.options.compress = {
            ...TerserPlugin.options.minimizer.options.compress,
            ...pluginOptions
          };
        } catch (e) {
          console.log('Fail to set drop_console in options.', e);
        }
      }
    }

    return webpackConfig;
  }
};

const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  devServer: {
    proxy: [{
      context: [
      ],
      secure: false
    }]
  },
  webpack: {
    fallback: {
      util: require.resolve('util/')
    }
  },
  eslint: {
    enable: !isProd
  },
  plugins: [{
    plugin: DropConsolePlugin,
    options: {
      drop_console: isProd
    }
  }, {
    plugin: ChangeJsFilename,
    options: {
      filename: `static/js/bundle${isProd ? '-react-eup' : ''}.js`,
      chunkFilename: `static/js/[name]${isProd ? '.react-eup' : ''}.chunk.js`
    }
  }, {
    plugin: ChangeCssFilename,
    options: {
      filename: 'static/css/[name].react-eup.css',
      chunkFilename: 'static/css/[name].react-eup.chunk.css'
    }
  }, {
    plugin: CracoAlias,
    options: {
      baseUrl: './src',
      source: 'tsconfig',
      tsConfigPath: './tsconfig.paths.json'
    }
  }],
  reactScriptsVersion: 'react-scripts',
  style: {
    css: {
      loaderOptions: () => ({
        url: false
      })
    }
  }
};

[OEvgeny]

From what I recall, CRA should use CJS, not ESM, so something is going on with the configuration. In the next nightly we'll have a slightly different build. It may affect some old configurations.

[light049]

From what I recall, CRA should use CJS, not ESM, so something is going on with the configuration. In the next nightly we'll have a slightly different build. It may affect some old configurations.

Is there any update for this issue?