Unable to resolve module @mux/mux-player-react/lazy after updating react-datocms to version 7.0.1 in React Native project

[avbutlov]

Description:

Hello,

I've recently updated the react-datocms library in my React Native project from version 3.0.8 to 7.0.1. After the update, the project crashes on startup with the following error:

error: Error: Unable to resolve module @mux/mux-player-react/lazy from PROJECT_PATH/node_modules/react-datocms/dist/cjs/VideoPlayer/index.js: @mux/mux-player-react/lazy could not be found within the project or in these directories:
node_modules
52 | // MUX player lazy version loads internally the eager version using
53 | // React.lazy().
54 | const lazy_1 = __importDefault(require("@mux/mux-player-react/lazy"));
55 | // The core of this component is the useVideoPlayer hook: it takes
56 | // data from DatoCMS GraphQL API and returns props as expected by the
57 | // <MuxPlayer /> component

It appears that the VideoPlayer component in react-datocms is causing the issue due to the missing module @mux/mux-player-react/lazy.

Environment:

• React version: 18.3.1
• React Native version: 0.75.3

Steps to Reproduce:

1. Update react-datocms from 3.0.8 to 7.0.1 in a React Native project.
2. Run the project.
3. Observe the error mentioned above.

Additional Information:

• The module @mux/mux-player-react seems to be incompatible with React Native or might not be included correctly as a dependency.
• I did not have this issue with react-datocms version 3.0.8.

Request:
Could you please provide guidance on how to resolve this issue? Is there a known workaround or fix available?

Thank you for your assistance!

[nmassaro]

Having recently updated from 4.0.13 and encountered a similar (likely the same) issue with that module, I'll add that I've tried all major versions between 5 and 7 with the same result. Version 4.* does not have the issue. The error in my case is on running a test suite:

Details:


node_modules/@mux/mux-player-react/dist/lazy.mjs:1
...
SyntaxError: Cannot use import statement outside a module

      13 |   ...stackProps
      14 | }: MediaBlockProps) => {
    > 15 |   if (!image) {
         |                       ^
      16 |     return null;
      17 |   }
      18 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
      at Object.<anonymous> (node_modules/react-datocms/src/VideoPlayer/index.tsx:23:1)
      at Object.<anonymous> (node_modules/react-datocms/src/index.ts:3:1)
...

[arcataroger]

Hi @nmassaro and @avbutlov,

Sorry about that! Does it work if you add @mux/mux-player-react as a dependency in your own package.json?

[avbutlov]

Hi @arcataroger I tried that but it didn't work
Also the @mux/mux-player-react package is listed in the react-datocms's package.json and I see it installed in my node_modules

[avbutlov]

I created a small patch to address this issue, it removes all the VideoPlayer module exports
Might be useful if you don't use VideoPlayer

diff --git a/node_modules/react-datocms/dist/cjs/index.js b/node_modules/react-datocms/dist/cjs/index.js
index 1aa12b7..90ef73e 100644
--- a/node_modules/react-datocms/dist/cjs/index.js
+++ b/node_modules/react-datocms/dist/cjs/index.js
@@ -18,8 +18,6 @@ __exportStar(require("./Image/index.js"), exports);
 __exportStar(require("./SRCImage/index.js"), exports);
 __exportStar(require("./Seo/index.js"), exports);
 __exportStar(require("./StructuredText/index.js"), exports);
-__exportStar(require("./VideoPlayer/index.js"), exports);
 __exportStar(require("./useQuerySubscription/index.js"), exports);
 __exportStar(require("./useSiteSearch/index.js"), exports);
-__exportStar(require("./useVideoPlayer/index.js"), exports);
 //# sourceMappingURL=index.js.map
diff --git a/node_modules/react-datocms/dist/esm/index.js b/node_modules/react-datocms/dist/esm/index.js
index 87d297b..ed7d881 100644
--- a/node_modules/react-datocms/dist/esm/index.js
+++ b/node_modules/react-datocms/dist/esm/index.js
@@ -2,8 +2,6 @@ export * from './Image/index.js';
 export * from './SRCImage/index.js';
 export * from './Seo/index.js';
 export * from './StructuredText/index.js';
-export * from './VideoPlayer/index.js';
 export * from './useQuerySubscription/index.js';
 export * from './useSiteSearch/index.js';
-export * from './useVideoPlayer/index.js';
 //# sourceMappingURL=index.js.map
diff --git a/node_modules/react-datocms/dist/types/index.d.ts b/node_modules/react-datocms/dist/types/index.d.ts
index f198ee4..ad5355b 100644
--- a/node_modules/react-datocms/dist/types/index.d.ts
+++ b/node_modules/react-datocms/dist/types/index.d.ts
@@ -2,7 +2,5 @@ export * from './Image/index.js';
 export * from './SRCImage/index.js';
 export * from './Seo/index.js';
 export * from './StructuredText/index.js';
-export * from './VideoPlayer/index.js';
 export * from './useQuerySubscription/index.js';
 export * from './useSiteSearch/index.js';
-export * from './useVideoPlayer/index.js';
diff --git a/node_modules/react-datocms/src/index.ts b/node_modules/react-datocms/src/index.ts
index 454eb5b..8e4d8ed 100644
--- a/node_modules/react-datocms/src/index.ts
+++ b/node_modules/react-datocms/src/index.ts
@@ -2,8 +2,6 @@ export * from './Image/index.js';
 export * from './SRCImage/index.js';
 export * from './Seo/index.js';
 export * from './StructuredText/index.js';
-export * from './VideoPlayer/index.js';
 
 export * from './useQuerySubscription/index.js';
 export * from './useSiteSearch/index.js';
-export * from './useVideoPlayer/index.js';

[arcataroger]

Thank you for the details, @avbutlov and @nmassaro. I've reported this to our devs internally and will let you know once I hear back!

[sistrall]

Hello @avbutlov @nmassaro ,

I just released a preview version of the library that uses a different export strategy for the <VideoPlayer /> component.

import { VideoPlayer } from 'react-datocms'; now uses the eager version of the MUX player. A lazy version of the component is still available via import VideoPlayer from "react-datocms/video-player/lazy";.

That should workaround your issues and help in those contexts where React.lazy() may cause problems.

I hope you have the chance to test this new approach and let me know of any problems you may find: npm add react-datocms@next will install version 8.0.0-0.

[dazlious]

@sistrall: Now I am getting

l.matchMedia is not a function

on version 8.0.0-1

[sistrall]

@dazlious thanks for your feedback: I'd need some more info to understand the problem. What's the context where you're using the library?

[dazlious]

I was experimenting a bit with our setup that includes webpack 5, server side code bundling (commonjs) and client side (mostly esm). I ran into several issues one of them was the one above.

When I run the code through webpack I was forced to bundle the react-datocms package into our bundle as leaving it it node_modules during runtime I would get an error because of the package.json with type module. (7.0.3) So the general fix I applied is that I now bundle react-datocms into my bundle (also on the server)

Another error I am getting is when I try to import only react-datocms/structured-text. Although the package exports it, I am getting an error on jest runtime telling me that the module cannot be found. (7.0.3)

One more error I get also on jest runtime that is Cannot find module '@mux/mux-player-react/lazy' from 'node_modules/react-datocms/dist/cjs/VideoPlayer/index.js' although I am just using import { renderNodeRule, StructuredText } from 'react-datocms'; (7.0.3)

The error with TypeError: l.matchMedia is not a function I get when running jest with this library on 8.0.0-1

I have experimented a bit too much so that I am unable to pinpoint exactly the underlying issue. Happy to connect with you and walk you through anything in more detail.

[nmassaro]

@sistrall I am seeing a similar, slightly different error on the latest version (8.0.0-1):

 FAIL  src/components/OverviewCard.spec.tsx
  ● Test suite failed to run

    TypeError: l.ResizeObserver is not a constructor

      13 | import NextLink from "next/link";
    > 14 | import { Image } from "react-datocms";
         |                       ^
      15 | import { render as renderAsPlaintext } from "datocms-structured-text-to-plain-text";
      16 | import { getArticleReadingTimeInMinutes } from "@/utils/cms";
      17 | import * as Sentry from "@sentry/nextjs";

      at Object.<anonymous> (node_modules/@mux/mux-player/dist/index.cjs.js:1:9704)
      at Object.<anonymous> (node_modules/@mux/mux-player-react/src/common/utils.ts:12:13)
      at Object.<anonymous> (node_modules/react-datocms/src/VideoPlayer/index.tsx:22:1)
      at Object.<anonymous> (node_modules/react-datocms/src/index.ts:5:1)

In my case the context is a test. The error is reported by jest

[brentlecomte-itp]

Is there any update on this issue?

[arcataroger]

@brentlecomte-itp Not yet, but I'll try to get some clarity on it. What is the issue that you're waiting for (is it the mux-player-react-lazy inside React Native, or the thing with Jest, etc.)? Is it with v8.0.0-1 that @sistrall mentioned in #103 (comment)?

[brentlecomte-itp]

@arcataroger It is the mux-player-react-lazy inside React Native unfortunately. I have the error with v7 and up, I am working in an pnpm monorepo tho so that could cause some extra issues. With v8.0.0-1 I do get another error ReferenceError: Property 'Event' doesn't exist [Component Stack] on the import of StructuredText. I know colleagues of mine are using v6.0.5 and don't have the issue, but when I downgrade and do a clean install (remove node_modules etc) I still get the same issue.

[brentlecomte-itp]

For now I've mocked the implementation of the mux-player-react and mux-player-react-lazy. And replaced it by expo's Video package.

[arcataroger]

Thank you @brentlecomte-itp. I'll ping the devs involved in this to have them take another look.