Open avbutlov opened 2 months ago
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)
...
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?
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
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';
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!
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.
@sistrall: Now I am getting
l.matchMedia is not a function
on version 8.0.0-1
@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?
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.
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:It appears that the
VideoPlayer
component inreact-datocms
is causing the issue due to the missing module@mux/mux-player-react/lazy
.Environment:
Steps to Reproduce:
react-datocms
from 3.0.8 to 7.0.1 in a React Native project.Additional Information:
@mux/mux-player-react
seems to be incompatible with React Native or might not be included correctly as a dependency.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!