Error when import [import ReactWebChat, {createDirectLine, createStore} from 'botframework-webchat';]

[robinlang0513]

Hi SFCC Team,

I was trying to import the bot framework to pwa kit, but when I was trying to import the following, I got the parserError
It works well when I import the modules in my normal React project.
Could you please help me with that if I was missing some setting?

• pwa-kit version: 3.8
• code: import ReactWebChat, {createDirectLine, createStore} from 'botframework-webchat';
• error:

First build complete
ModuleParseError: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (22:0)
File was processed with these loaders:

• ./node_modules/source-map-loader/dist/cjs.js
  You may need an additional loader to handle the result of these loaders.
  | return value instanceof Error || Errlop.isErrlop(value)
  | }

export default class Errlop extends Error {
| /**
| * Create an instance of an error, using a message, as well as an optional parent.
at handleParseError (C:\Users\618678\retail-react-app\node_modules\webpack\lib\NormalModule.js:1176:19)
at C:\Users\618678\retail-react-app\node_modules\webpack\lib\NormalModule.js:1318:5
at processResult (C:\Users\618678\retail-react-app\node_modules\webpack\lib\NormalModule.js:939:11)
at C:\Users\618678\retail-react-app\node_modules\webpack\lib\NormalModule.js:1037:5
at C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:407:3
at iterateNormalLoaders (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:233:10)
at iterateNormalLoaders (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:240:10)
at C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:255:3
at context.callback (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.loader (C:\Users\618678\retail-react-app\node_modules\source-map-loader\dist\index.js:24:5)
at LOADER_EXECUTION (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:132:14)
at runSyncOrAsync (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:133:4)
at iterateNormalLoaders (C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:251:2)
at C:\Users\618678\retail-react-app\node_modules\loader-runner\lib\LoaderRunner.js:224:4
at C:\Users\618678\retail-react-app\node_modules\webpack\lib\NormalModule.js:991:15
at Array.eval (eval at create (C:\Users\618678\retail-react-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), :12:1) at runCallbacks (C:\Users\618678\retail-react-app\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:45:15)
at C:\Users\618678\retail-react-app\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:279:5
at C:\Users\618678\retail-react-app\node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)
pwa-kit-runtime.httprequest ERROR (40636150-8edb-493d-8a87-cf45dbd52a05) GET / 500 5.075 ms
"""

[bendvc]

Hi @robinlang0513,

Sorry about the long delay. The issue you are running into here seems to be a problem with the ReactWebChat not being able to be transpiled in a non-web environment. Because PWA-Kit is isomorphic, your app will be compiled for node and web, and this lib doesn't like being compiled for node targets from the looks of it.

So how might you get around that. You'll have to do a couple things:

1. Customize the webpack config, react a file called webpack.config.js in the root of your project, and inside it place this code:

const path = require('path')
const config = require('@salesforce/pwa-kit-dev/configs/webpack/config')

// Add your customizations here
const serverConfig = config.find((cnf) => cnf.name === 'server')

serverConfig.resolve.alias['botframework-webchat'] = path.resolve(__dirname, 'empty-module.js')

module.exports = config

What we are doing here is saying not to compile that module for the server.

2. Create an empty placeholder module called empty-module.js at the root:

export default {}

3. Dynamically import the module in your react application, maybe in _app component or wherever you want to use it.

This is how I did it, in your component use the useEffect hook like this:

useEffect(() => {
        const loadWebChat = async () => {
            try {
              const {renderWebChat} = await import('botframework-webchat')
              
              renderWebChat(
                {
                    directLine: window.WebChat.createDirectLine({
                      token: 'YOUR_DIRECT_LINE_TOKEN'
                    }),
                    userID: 'YOUR_USER_ID',
                    username: 'Web Chat User',
                    locale: 'en-US'
                  },
                  document.getElementById('webchat')
            )

              setReactWebChat(module.default)
            } catch (error) {
              console.error('Error loading module:', error)
            }
          }
          
          loadWebChat()
    }, [])

Ensure that you have a target dom element with the correct id:

<div id="webchat"></div>

If you did everything right you should see your webchat load up.

[robinlang0513]

Hi @bendvc ,
Appreciate for the help and please let me share the way I used to bypass the issue
I directly pull the module from https://cdn.botframework.com/botframework-webchat/latest/webchat.js and
the source code is like this: I wonder which way do you recommend to use: revise webpack config of salesforce pwa kit or directly
pull the module from cdn server?

import React, { useEffect, useRef } from 'react';

const WebChatComponent = () => {
const webchatRef = useRef(null);

useEffect(() => {
const loadWebChat = () => {

  const directLineScript = document.createElement('script');
  directLineScript.src = 'https://cdn.jsdelivr.net/npm/botframework-directlinejs@latest/dist/directline.js?module';
  directLineScript.async = true;
  directLineScript.onload = () => {

    const waitForDirectLine = setInterval(() => {
      if (window.DirectLine && window.DirectLine.DirectLine) {
        clearInterval(waitForDirectLine);
        initializeWebChat();
      }
    }, 100);
  };

  document.body.appendChild(directLineScript);
};

const initializeWebChat = () => {

  const directLine = new window.DirectLine.DirectLine({
    token: "",
    userId: "",
    pollingInterval: 2000
  });

  const store = window.WebChat.createStore({}, ({ dispatch }) => (next) => (action) => {
    if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
      console.log('Message Recieved:', action.payload.activity);
    }
    return next(action);
  });

  const styleOptions = {
    botAvatarInitials: '🤖',
    userAvatarInitials: '👤',
    backgroundColor: '#f5f5f5',
    bubbleBackground: '#0078D7',
    bubbleTextColor: 'white',
    bubbleBorderRadius: 10,
  };

  if (window.WebChat && webchatRef.current) {
    window.WebChat.renderWebChat(
      {
        directLine,
        userID: "",
        store,
        styleOptions
      },
      webchatRef.current
    );
  }
};

const script = document.createElement('script');
script.src = 'https://cdn.botframework.com/botframework-webchat/latest/webchat.js';
script.async = true;
script.onload = loadWebChat;
document.body.appendChild(script);

}, []);

return <div ref={webchatRef} style={{ width: '100%', height: '500px' }} />;
};

export default WebChatComponent;