Disable esModuleInterop (#1699)

Co-authored-by: Alexey Romanov <[email protected]>

CHANGELOG.md

@@ -20,6 +20,7 @@ Changes since the last non-beta release.
 
 #### Fixed
 - Fix obscure errors by introducing FULL_TEXT_ERRORS [PR 1695](https://github.com/shakacode/react_on_rails/pull/1695) by [Romex91](https://github.com/Romex91).
+- Disable `esModuleInterop` to increase interoperability [PR 1699](https://github.com/shakacode/react_on_rails/pull/1699) by [alexeyr-ci](https://github.com/alexeyr-ci).
 
 ### [14.1.1] - 2025-01-15
 

node_package/src/clientStartup.ts

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type {
   RailsContext,

node_package/src/createReactOutput.ts

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 
-import React from 'react';
+import * as React from 'react';
 import type { ServerRenderResult,
   CreateParams, ReactComponent, RenderFunction, CreateReactOutputResult } from './types/index';
 import {isServerRenderHash, isPromise} from "./isServerRenderResult";

node_package/src/handleError.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import ReactDOMServer from 'react-dom/server';
+import * as React from 'react';
+import * as ReactDOMServer from 'react-dom/server';
 import type { ErrorOptions } from './types/index';
 
 function handleRenderFunctionIssue(options: ErrorOptions): string {

node_package/src/reactApis.ts

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 const reactMajorVersion = Number(ReactDOM.version?.split('.')[0]) || 16;
 

node_package/src/reactHydrateOrRender.ts

@@ -1,5 +1,5 @@
 import type { ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 import type { RenderReturnType } from './types';
 import { supportsRootApi } from './reactApis';
 

node_package/src/serverRenderReactComponent.ts

@@ -1,4 +1,4 @@
-import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';

node_package/src/streamServerRenderedReactComponent.ts

@@ -1,4 +1,4 @@
-import ReactDOMServer, { type PipeableStream } from 'react-dom/server';
+import * as ReactDOMServer from 'react-dom/server';
 import { PassThrough, Readable } from 'stream';
 import type { ReactElement } from 'react';
 
@@ -34,8 +34,8 @@ const transformRenderStreamChunksToResultObject = (renderState: StreamRenderStat
     }
   });
 
-  let pipedStream: PipeableStream | null = null;
-  const pipeToTransform = (pipeableStream: PipeableStream) => {
+  let pipedStream: ReactDOMServer.PipeableStream | null = null;
+  const pipeToTransform = (pipeableStream: ReactDOMServer.PipeableStream) => {
     pipeableStream.pipe(transformStream);
     pipedStream = pipeableStream;
   };

node_package/tests/ComponentRegistry.test.js

@@ -5,8 +5,8 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable import/extensions */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
+import * as React from 'react';
+import * as createReactClass from 'create-react-class';
 
 import ComponentRegistry from '../src/ComponentRegistry';
 

node_package/tests/ReactOnRails.test.js

@@ -4,8 +4,8 @@
 /* eslint-disable react/jsx-filename-extension */
 
 import { createStore } from 'redux';
-import React from 'react';
-import createReactClass from 'create-react-class';
+import * as React from 'react';
+import * as createReactClass from 'create-react-class';
 import ReactOnRails from '../src/ReactOnRails';
 
 describe('ReactOnRails', () => {

node_package/tests/renderFunction.test.js

@@ -3,8 +3,8 @@
 /* eslint-disable react/prefer-stateless-function */
 /* eslint-disable react/jsx-filename-extension */
 
-import React from 'react';
-import createReactClass from 'create-react-class';
+import * as React from 'react';
+import * as createReactClass from 'create-react-class';
 
 import isRenderFunction from '../src/isRenderFunction';
 

node_package/tests/serverRenderReactComponent.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-filename-extension */
 /* eslint-disable no-unused-vars */
 
-import React from 'react';
+import * as React from 'react';
 
 import serverRenderReactComponent from '../src/serverRenderReactComponent';
 import ComponentRegistry from '../src/ComponentRegistry';

node_package/tests/streamServerRenderedReactComponent.test.jsx

@@ -2,8 +2,8 @@
  * @jest-environment node
  */
 
-import React, { Suspense } from 'react';
-import PropTypes from 'prop-types';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
 import streamServerRenderedReactComponent from '../src/streamServerRenderedReactComponent';
 import ComponentRegistry from '../src/ComponentRegistry';
 
@@ -23,9 +23,9 @@ const TestComponentForStreaming = ({ throwSyncError, throwAsyncError }) => {
   return (
     <div>
       <h1>Header In The Shell</h1>
-      <Suspense fallback={<div>Loading...</div>}>
+      <React.Suspense fallback={<div>Loading...</div>}>
         <AsyncContent throwAsyncError={throwAsyncError} />
-      </Suspense>
+      </React.Suspense>
     </div>
   );
 };

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
-    "esModuleInterop": true,
+    "esModuleInterop": false,
     "jsx": "react-jsx",
     "lib": ["dom", "es2015"],
     "module": "CommonJS",