fix(react): add react, react-dom and lit/react to vite externals (#594)

* fix(react): add react, react-dom and lit/react to vite externals

* prettier

---------

Co-authored-by: Dominique Wirz <[email protected]>

example-project/next-15-react-19-app/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

example-project/next-15-react-19-app/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

example-project/next-15-react-19-app/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

example-project/next-15-react-19-app/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

example-project/next-15-react-19-app/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "next-15-react-19-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "start": "next dev -p 3001",
+    "lint": "next lint",
+    "prettier": "prettier --write --print-width 80 \"*.mjs\" \"*.json\" \"src/**/*.tsx\" \"*.ts\"",
+    "test": "wdio run ./wdio.conf.mts"
+  },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom"
+  },
+  "dependencies": {
+    "html-react-parser": "^5.1.18",
+    "next": "15.1.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
+  },
+  "devDependencies": {
+    "@stencil/react-output-target": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "19.0.4",
+    "@types/react-dom": "19.0.2",
+    "@wdio/cli": "^9.4.5",
+    "@wdio/globals": "^9.1.5",
+    "@wdio/local-runner": "^9.1.5",
+    "@wdio/mocha-framework": "^9.1.3",
+    "@wdio/spec-reporter": "^9.1.3",
+    "@wdio/types": "^9.1.3",
+    "autoprefixer": "^10.4.20",
+    "component-library": "workspace:*",
+    "component-library-react": "workspace:*",
+    "eslint": "^8",
+    "eslint-config-next": "^15",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.13",
+    "tsx": "^4.19.1",
+    "typescript": "^5",
+    "webdriverio": "^9.1.5",
+    "wdio-next-service": "^0.1.0"
+  },
+  "volta": {
+    "node": "20.12.0"
+  }
+}

example-project/next-15-react-19-app/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

example-project/next-15-react-19-app/src/app/Button/Button.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import { useState } from 'react';
+
+import { MyButton, MyComponent } from '../components';
+
+function Button() {
+  const [inputEvent, setInputEvent] = useState<number>(0);
+  return (
+    <>
+      <MyButton href="#" onClick={() => setInputEvent(inputEvent + 1)}>
+        Click me <b>now</b>!
+        <MyComponent
+          first="Stencil"
+          last="'Don't call me a framework' JS"
+          style={{ backgroundColor: 'red' }}
+        >
+          Hello
+        </MyComponent>
+      </MyButton>
+      <div className="buttonResult">
+        <p>Input Event: {inputEvent}</p>
+      </div>
+    </>
+  );
+}
+
+export default Button;

example-project/next-15-react-19-app/src/app/Input/Input.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { useState } from 'react';
+
+import { MyInput } from '../components';
+
+function Input() {
+  const [inputEvent, setInputEvent] = useState<string>('');
+  const [changeEvent, setChangeEvent] = useState<string>('');
+  return (
+    <>
+      <MyInput
+        onMyInput={(ev) => setInputEvent(`${ev.target.value}`)}
+        onMyChange={(ev) => setChangeEvent(`${ev.detail.value}`)}
+      >
+        {' '}
+      </MyInput>
+      <div className="inputResult">
+        <p>Input Event: {inputEvent}</p>
+        <p>Change Event: {changeEvent}</p>
+      </div>
+    </>
+  );
+}
+
+export default Input;

example-project/next-15-react-19-app/src/app/LazyComponent/LazyComponent.tsx

@@ -0,0 +1,7 @@
+import { lazy } from 'react';
+
+export const LazyComponent = lazy(() =>
+  import('./LazyLoadedComponent').then((module) => ({
+    default: module.LazyLoadedComponent,
+  }))
+);

example-project/next-15-react-19-app/src/app/LazyComponent/LazyLoadedComponent.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useContext, useState } from 'react';
+import { ThemeContext } from '../ThemeContext/ThemeContext';
+
+export const LazyLoadedComponent = () => {
+  const [state, setState] = useState(0);
+  const theme = useContext(ThemeContext);
+
+  return (
+    <div
+      style={{
+        border: '1px red solid',
+        padding: '1rem',
+        margin: '1rem',
+        borderRadius: '0.5rem',
+      }}
+    >
+      <p style={{ marginBottom: '0.5rem' }}>
+        LazyLoadedComponent with theme: {theme}
+      </p>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <button
+          style={{
+            border: '1px solid black',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+          }}
+          onClick={() => setState(state - 1)}
+        >
+          -
+        </button>
+        <span>{state}</span>
+        <button
+          style={{
+            border: '1px solid black',
+            padding: '0.5rem',
+            borderRadius: '0.5rem',
+          }}
+          onClick={() => setState(state + 1)}
+        >
+          +
+        </button>
+      </div>
+    </div>
+  );
+};

example-project/next-15-react-19-app/src/app/List/List.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { MyList, MyListItem } from '../components.server';
+import { LazyComponent } from '../LazyComponent/LazyComponent';
+import { ThemeContext } from '../ThemeContext/ThemeContext';
+
+export const List = () => {
+  const theme = 'light';
+
+  return (
+    // @ts-ignore: Because component-library-react is linked and contains a node_modules folder, with a different @types/react version, TypeScript will throw an error.
+    <ThemeContext.Provider value={theme}>
+      {/* @ts-ignore: Because component-library-react is linked and contains a node_modules folder, with a different @types/react version, TypeScript will throw an error. */}
+      <LazyComponent />
+      <MyList>
+        <MyListItem>Item 1</MyListItem>
+        <MyListItem>Item 2</MyListItem>
+        <MyListItem>Item 3</MyListItem>
+      </MyList>
+    </ThemeContext.Provider>
+  );
+};

example-project/next-15-react-19-app/src/app/PureReactComponent/PureReactComponent.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState } from 'react';
+
+export const PureReactComponent = () => {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div
+      style={{
+        padding: '1rem',
+        border: '1px solid black',
+        borderRadius: '0.5rem',
+        margin: '1rem',
+      }}
+    >
+      <p style={{ marginBottom: '0.5rem' }}>Pure React Component</p>
+      <button
+        style={{
+          border: '1px solid black',
+          padding: '0.5rem',
+          borderRadius: '0.5rem',
+        }}
+        onClick={() => setCount(count + 1)}
+      >
+        Click me (Clicked: {count})
+      </button>
+    </div>
+  );
+};

example-project/next-15-react-19-app/src/app/ThemeContext/ThemeContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ThemeContext = createContext('light');

example-project/next-15-react-19-app/src/app/ToggleableContent/ToggleableContent.tsx

@@ -0,0 +1,14 @@
+'use client';
+
+import { MyToggle } from '../components.server';
+import { List } from '../List/List';
+import { PureReactComponent } from '../PureReactComponent/PureReactComponent';
+
+export const ToggleableContent = () => {
+  return (
+    <MyToggle>
+      <PureReactComponent />
+      <List />
+    </MyToggle>
+  );
+};