TextEncoder is not defined or TextEncoder is not a constructor (mini_racer)

[simlegate]

A bug is a crash or incorrect behavior. If you have a debugging or troubleshooting question, please open a discussion.

Environment

1. Ruby version: 3.1.2
2. Rails version: 7.0.3
3. Webpacker version: 6.4.0(shakapacker)
4. React on Rails version: 13.0.1
5. OS version: MacOS 12.2
6. Hardware version: Apple M1 Pro

Expected behavior

Try to create new app as the steps.

The difference is that I change the argument prerender in directory app/views/hello_world/index.htm.erb, like this <%= react_component("HelloWorld", props: @hello_world_props, prerender: true) %>

It should show the HelloWorld component when accessing http://localhost:3000/hello_world

Actual behavior

But it failed and shows some errors below,

ERROR in SERVER PRERENDERING
Encountered error:

Error evaluating server bundle. Check your webpack configuration.
===============================================================
Caught error:
ReferenceError: TextEncoder is not defined
===============================================================


when prerendering HelloWorld with props: {"name":"Stranger"}

code:

        (function() {
          var railsContext = {"railsEnv":"development","inMailer":false,"i18nLocale":"en","i18nDefaultLocale":"en","rorVersion":"13.0.1","rorPro":false,"href":"http://localhost:3000/hello_world","location":"/hello_world","scheme":"http","host":"localhost","port":3000,"pathname":"/hello_world","search":null,"httpAcceptLanguage":"zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7","serverSide":true};
              ReactOnRails.clearHydratedStores();

          var props = {"name":"Stranger"};
          return ReactOnRails.serverRenderReactComponent({
            name: 'HelloWorld',
            domNodeId: 'HelloWorld-react-component-29970588-318b-4c7c-8540-32b5f05f3b98',
            props: props,
            trace: true,
            railsContext: railsContext
          });
        })()



eval (webpack://app/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:145:19)
eval (webpack://app/./node_modules/react-dom/cjs/react-dom-server.browser.development.js?:6733:5)
Object../node_modules/react-dom/cjs/react-dom-server.browser.development.js ((execjs):2012:1)
__webpack_require__ ((execjs):2586:42)
eval (webpack://app/./node_modules/react-dom/server.browser.js?:6:7)
Object../node_modules/react-dom/server.browser.js ((execjs):2045:1)
__webpack_require__ ((execjs):2586:42)
eval (webpack://app/./node_modules/react-on-rails/node_package/lib/handleError.js?:7:32)
Object../node_modules/react-on-rails/node_package/lib/handleError.js ((execjs):2177:1)
__webpack_require__ ((execjs):2586:42)
/Users/devin/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/mini_racer-0.6.2/lib/mini_racer.rb:223:in `eval_unsafe'
/Users/devin/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/mini_racer-0.6.2/lib/mini_racer.rb:223:in `block (2 levels) in eval'
/Users/devin/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/mini_racer-0.6.2/lib/mini_racer.rb:343:in `timeout'
/Users/devin/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/mini_racer-0.6.2/lib/mini_racer.rb:222:in `block in eval'
/Users/devin/.rbenv/versions/3.1.2/lib/ruby/gems/3.1.0/gems/mini_racer-0.6.2/lib/mini_racer.rb:220:in `synchronize'

Then I try to switch the JS engine of ruby to node, like export EXECJS_RUNTIME=Node.
It works.

It seems that the mini_racer(0.6.2) does not support the TextEncoder.

Is there something I missed?

Small, reproducible repo

[arlyxiao]

I encountered the same issue. @justin808

[alexeyr]

mini_racer is no longer used partly because we were running into this bug in CI.

[wyattades]

Greetings, this was my solution for adding all the required polyfills for react SSR with mini_racer:

add this plugin to your webpack config:

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

// need to polyfill certain node libs like `stream` and `util` (used by `react-dom/server`)
config.plugins.push(
  new NodePolyfillPlugin({
    excludeAliases: ['console', 'Buffer'],
  }),
);

serverPolyfills.js (import this file at the top of our server-rendering file b/c it needs to run before importing react)

//
// polyfills for mini_racer v8 runtime (which has less features than node.js)
//

// `URL` constructor
import 'core-js/actual/url';
// `URLSearchParams` constructor
import 'core-js/actual/url-search-params';

// polyfill TextEncoder & TextDecoder onto `util` b/c `node-util` polyfill doesn't include them
// https://github.com/browserify/node-util/issues/46
import util from 'util';
import 'fast-text-encoding';

Object.assign(util, { TextDecoder, TextEncoder });

[simlegate]

@alexeyr Thanks for your reply.
Now I have switched Node runtime.

[minisemi]

Thank you @wyattades! I'm assuming we have different version though, because for me URL and URLSearchParams were in core-js-pure instead of core-js. Then I obviously also needed to install the fast-text-encoding package with yarn. So for anyone else having the same issue as me, I needed to make the following changes to @wyattades code:

// `URL` constructor
import 'core-js-pure/actual/url';
// `URLSearchParams` constructor
import 'core-js-pure/actual/url-search-params';

[Judahmeek]

@wyattades I owe you big thanks.

I ran into this problem while working on reactjs/react-rails#1290 & your solution is the only logic that didn't result in TextEncoder is not a constructor errors.

[Judahmeek]

Note to self: requires core-js >= 3