Fix "Warning: useLayoutEffect does nothing on the server" (#52)

Don't bundle @lit/react in ESM build

Author: MattiasBuelens

package-lock.json

@@ -10,6 +10,10 @@
 > -   🏠 Internal
 > -   💅 Polish
 
+## Unreleased
+
+-   🐛 Fix "Warning: useLayoutEffect does nothing on the server" when using `@theoplayer/react-ui` in Node. ([#52](https://github.com/THEOplayer/web-ui/pull/52))
+
 ## v1.7.0 (2024-02-15)
 
 -   🚀 Added support for loading in Node for static site generation (SSG) or server-side rendering (SSR). ([#50](https://github.com/THEOplayer/web-ui/pull/50))

react/CHANGELOG.md

@@ -49,7 +49,7 @@
     "directory": "react"
   },
   "dependencies": {
-    "@lit/react": "^1.0.2",
+    "@lit/react": "^1.0.3",
     "@theoplayer/web-ui": "^1.7.0"
   },
   "peerDependencies": {

react/package.json

@@ -17,11 +17,18 @@ const banner = `/*!
  * THEOplayer Open Video UI for React (v${version})
  * License: ${license}
  */`;
-const externals = {
+const globals = {
     react: 'React',
     '@theoplayer/web-ui': 'THEOplayerUI',
     '@theoplayer/web-ui/es5': 'THEOplayerUI'
 };
+const external = Object.keys(globals);
+const esmExternal = [
+    ...external,
+    // @lit-react has a separate entry point for Node, to support SSR.
+    // Don't bundle it ourselves, otherwise we'll always ship the browser version.
+    '@lit/react'
+];
 
 /**
  * @param {{configOutputDir?: string}} cliArgs
@@ -60,10 +67,10 @@ function jsConfig(outputDir, { es5 = false, production = false, sourcemap = fals
                 sourcemap,
                 indent: false,
                 banner,
-                globals: externals
+                globals
             },
             context: 'self',
-            external: Object.keys(externals),
+            external,
             plugins: jsPlugins({ es5, module: false, production, sourcemap })
         },
         {
@@ -75,7 +82,7 @@ function jsConfig(outputDir, { es5 = false, production = false, sourcemap = fals
                 indent: false
             },
             context: 'self',
-            external: Object.keys(externals),
+            external: esmExternal,
             plugins: jsPlugins({ es5, module: true, production, sourcemap })
         }
     ]);