WebpackError: TypeError: Object(...) is not a function gatsbyjs build error (botframework-webchat)

Я пытаюсь интегрировать botframework-webchat на веб-сайт gatsby.js, сборка gatsby разрабатывается успешно, однако, когда я запускаю производственную сборку с помощью команды gatsby build, возникает следующая ошибка.

 > 15 |     const store = createStore({}, ({ dispatch }) => next => action => {
[1]      |                            ^
[1]   16 |       if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
[1]   17 |         dispatch({
[1]   18 |           type: 'WEB_CHAT/SEND_EVENT',
[1] 
[1] 
[1]   WebpackError: TypeError: Object(...) is not a function
[1]   
[1]   - MinimizableWebChat.js:15 
[1]     src/lib/webchat/MinimizableWebChat.js:15:31

запустите сборку разработки: gatsby develop (успешно строит).
запустить производственную сборку: gatsby build (выдает ошибку)

ниже приведен полный код для MinimizableWebChat.js, взятый из Microsoft BotFramework-Webchat

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { createStore } from 'botframework-webchat';
import classNames from 'classnames';
import WebChat from './WebChat';
import { checkTokenExpirationDate, createToken } from './utils/tokenDefs';
import './utils/fabric-icons-inline.css';
import './MinimizableWebChat.scss';

const USR_BOT_TKN = 'USR_TKN';

const MinimizableWebChat = ({ lang = 'en', darkMode = false }) => {
  useEffect(() => {
    return () => {
      localStorage.removeItem(USR_BOT_TKN);
      setToken(null);
    };
  }, [lang]);

  const store = useMemo(
    () =>
      createStore({}, ({ dispatch }) => next => action => {
        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
          dispatch({
            type: 'WEB_CHAT/SEND_EVENT',
            payload: {
              name: 'webchat/join',
              value: {
                language: lang,
              },
            },
          });
        } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
          if (action.payload.activity.from.role === 'bot') {
            setNewMessage(true);
          }
        }

        return next(action);
      }),
    [lang]
  );

  const [loaded, setLoaded] = useState(false);
  const [minimized, setMinimized] = useState(true);
  const [newMessage, setNewMessage] = useState(false);
  const [token, setToken] = useState();

  const handleFetchToken = useCallback(async () => {
    if (!token) {
      const userToken = localStorage.getItem(USR_BOT_TKN);
      const isValidToken = checkTokenExpirationDate(userToken);
      if (userToken && isValidToken) {
        return setToken(userToken);
      } else {
        const res = await fetch(createToken().uriGenerateToken, createToken().params);
        const { token } = await res.json();
        localStorage.setItem(USR_BOT_TKN, token);
        setToken(token);
      }
    }
  }, [setToken, token]);

  const handleMaximizeButtonClick = useCallback(async () => {
    setLoaded(true);
    setMinimized(false);
    setNewMessage(false);
  }, [setMinimized, setNewMessage]);

  const handleMinimizeButtonClick = useCallback(() => {
    setMinimized(true);
    setNewMessage(false);
  }, [setMinimized, setNewMessage]);

  return (
    <div className='minimizable-web-chat'>
      <button
        className = {classNames(
          lang === 'ar' ? 'maximize left' : 'maximize right',
          darkMode ? 'dark' : ''
        )}
        onClick = {minimized ? handleMaximizeButtonClick : handleMinimizeButtonClick}>
        {minimized ? (
          <img
            src = {darkMode ? '/open_chat_icon_black.svg' : '/open_chat_icon.svg'}
            alt='Open chat button icon'
          />
        ) : (
          <span className='ms-Icon ms-Icon--Cancel' />
        )}
        {newMessage && minimized && (
          <span className='ms-Icon ms-Icon--CircleShapeSolid red-dot' />
        )}
      </button>

      {loaded && (
        <div
          className = {classNames(
            lang === 'ar' ? 'chat-box left' : 'chat-box right',
            // side === 'left' ? 'chat-box left' : 'chat-box right',
            minimized ? 'hide' : '',
            darkMode ? 'dark' : ''
          )}>
          <header>
            <img src='/logo.svg' alt='Logo' />
          </header>
          {lang && (
            <WebChat
              className='react-web-chat'
              onFetchToken = {handleFetchToken}
              store = {store}
              token = {token}
              lang = {lang}
              darkMode = {darkMode}
            />
          )}
        </div>
      )}
    </div>
  );
};

export default MinimizableWebChat;

У вас есть воспроизводимый репо?

tmhao2005 24.12.2020 07:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
1
851
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я знаю, что вы перешли по предложенной ссылке https://www.gatsbyjs.com/docs/debugging-html-builds/#fixing-first-party-modules, чтобы исправить window проблему.

НО это может помешать webpack правильно скомпилировать commonjs пакеты веб-чата, что привело к проблеме.

Я также знал о конфигурации, в которой этап build-html не вызывается во время dev, поэтому вы не увидите ошибку, как вы yarn start // gatsby develop.

Однако в документе также предлагается другой способ исправления — использовать метод разделения кода с помощью loadable-component. Лично я думаю, что этот способ лучше всего подходит для вашего проекта, поскольку чат должен отображаться только на стороне клиента.

Вот несколько вещей, которые вы бы изменили:

  • Удалите свою конфигурацию в gatsby-node:
// Remove this
actions.setWebpackConfig({ ... }}
  • Примените yarn add @loadable/component к вашему репозиторию:

// Install `yarn add @loadable/component` // or with npm i -D yarn add @loadable/component

// Make your chat component to be loadable:
// pages/index.js

- import MinimizableWebChat from '../components/webchat/MinimizableWebChat'

+ import loadable from '@loadable/component'
+ const MinimizableWebChat = loadable(() => import('./../components/webchat/MinimizableWebChat'))

Другие вопросы по теме