Uncaught ReferenceError: process is not defined in React UIKit v3

Sendbird Chat UIKit
,
1

I’m getting the following issue when updating to the latest react UI Kit:

Uncaught ReferenceError: process is not defined
    at push../node_modules/@sendbird/uikit-react/ui/MessageInput.js.exports.debuglog (MessageInput.js:757:1)
    at ./node_modules/@sendbird/uikit-react/ui/MessageInput.js (MessageInput.js:3791:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@sendbird/uikit-react/Channel/components/Message.js (FrozenNotification.js:20:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/@sendbird/uikit-react/Channel/components/MessageList.js (MessageInput.js:215:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

The import code:

import {
  SendBirdProvider,
  Channel,
} from '@sendbird/uikit-react';
import ReactDOM from 'react-dom';
import React from 'react';

import '@sendbird/uikit-react/dist/index.css';

This error is getting thrown on import. We did not have any issues with UIKit 2.7.2 and the same import code (with the package names substituted appropriately)

Using “@sendbird/uikit-react”: “3.1.1”
React 18.x
Webpack 5.74

1 Like
2

Hello @shelflife_john
The v3 import has been changed. Please do the migration and give us your opinion.

import SBProvider from “@sendbird/uikit-react/SendbirdProvider”;
import SBConversation from ‘@sendbird/uikit-react/Channel’;
import SBChannelList from ‘@sendbird/uikit-react/ChannelList’;
import SBChannelSettings from ‘@sendbird/uikit-react/ChannelSettings’;

3

Thanks for the response @Yongjun_Choi ! I am still seeing the error, here’s our full code:


import SBProvider from '@sendbird/uikit-react/SendbirdProvider';
import SBConversation from '@sendbird/uikit-react/Channel';
import ReactDOM from 'react-dom/client';
import React from 'react';

import '@sendbird/uikit-react/dist/index.css';

const renderChannelHeader = () => <div/>;

const TopicChannel = ({
  appId,
  userId,
  accessToken,
  channelUrl,
  stringSet,
}) => (
  <div className="topic-channel">
      <SBProvider appId={appId} userId={userId} accessToken={accessToken} stringSet={stringSet}>
        <SBConversation renderChannelHeader={renderChannelHeader}
                 channelUrl={channelUrl} />
      </SBProvider>
  </div>
);

export default function renderTopicChannel(props, container) {
  const root = ReactDOM.createRoot(container);
  root.render(<TopicChannel {...props} />);
}
1 Like
4

@shelflife_john I ended up adding a polyfill to just get passed this issue, since I am not using node/ssr so process will not exist unless you install a seperate package:

(window as any).process = {
    env: { NODE_DEBUG: undefined },
};
1 Like
5

Hello @shelflife_john can you share your project setup? (bundler you use/ are you using create react app or build the project from scratch)
@Ruanvm23 we have included polyfills into UIKit, havent seen issue with process package before. How about your project setup?

6

Thanks @Sravan_S - we’re using the UI Kit in a server side rendered Rails app, details:

Rails 7.0.3.1
Assets compiled using Webpack 5.74

The code file above (with the TopicChannel and renderTopicChannel method) is called from a Stimulus controller that calls renderTopicChannel client side after we retrieve the user’s Sendbird credentials via an API call (after page load)

7

The solution @Ruanvm23 posted worked for us - it seems like the UIKit library assumes a node environment is available, where we’re running server side rendering in a Ruby ecosystem (and React is loaded in the browser, so process isn’t available).

We decided to use the node-polyfill-webpack-plugin, as it seems like Webpack did this automatically prior to 5 (which we are using Webpack v5).

8

It would be great @Sravan_S and @Yongjun_Choi if we didn’t have to use a polyfill, since we didn’t need to with the UIKit v2 library