Skip to content

Commit 117eb47

Browse files
kylorhall-atlassiankylorhall-atlassian
authored
Upgrades to React 18 and improves ESM support for @compiled/react/jsx-runtime and @compiled/vite-plugin (#1853)
* Bump dependencies to React 18 and fix jsx runtime exports * Add ESM support for importing the Vite plugin
1 parent 6608677 commit 117eb47

File tree

36 files changed

+213
-201
lines changed

36 files changed

+213
-201
lines changed

‎.changeset/large-gifts-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@compiled/vite-plugin': patch
3+
---
4+
5+
Split CJS and ESM exports for the Vite Plugin

‎.changeset/slimy-cobras-reply.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
'@compiled/parcel-transformer-test-compress-class-name-app': minor
3+
'@compiled/parcel-transformer-test-custom-resolver-app': minor
4+
'@compiled/parcel-transformer-test-custom-resolve-app': minor
5+
'@compiled/parcel-transformer-test-extract-app': minor
6+
'@compiled/parcel-transformer-test-app': minor
7+
'@compiled/babel-component-extracted-fixture': minor
8+
'@compiled/parcel-optimizer-test-app': minor
9+
'@compiled/babel-component-fixture': minor
10+
'@compiled/webpack-loader': minor
11+
'@compiled/vite-plugin': minor
12+
'@compiled/webpack-app': minor
13+
'@compiled/parcel-app': minor
14+
'@compiled/react': minor
15+
'@compiled/vite-app': minor
16+
'@compiled/ssr-app': minor
17+
---
18+
19+
Bump package dependencies to React 18 globally. Replace jsx and jsx-dev runtimes with modern syntax to circumvent `export \*` issues.

‎examples/parcel/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
"dependencies": {
1111
"@compiled/babel-component-extracted-fixture": "*",
1212
"@compiled/react": "*",
13-
"react": "17.0.2",
14-
"react-dom": "17.0.2"
13+
"react": "^18.3.1",
14+
"react-dom": "^18.3.1"
1515
},
1616
"devDependencies": {
1717
"@babel/plugin-proposal-decorators": "^7.25.9",

‎examples/parcel/src/index.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React, { StrictMode } from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33

44
import { App } from './app';
55

6-
render(
6+
createRoot(document.getElementById('root')).render(
77
<StrictMode>
88
<App />
9-
</StrictMode>,
10-
document.getElementById('root')
9+
</StrictMode>
1110
);

‎examples/ssr/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"@babel/helper-builder-react-jsx-experimental": "^7.12.11",
1616
"@compiled/react": "*",
1717
"express": "4.21.2",
18-
"react": "17.0.2",
19-
"react-dom": "17.0.2"
18+
"react": "^18.3.1",
19+
"react-dom": "^18.3.1"
2020
},
2121
"devDependencies": {
2222
"babel-preset-razzle": "^4.2.18",

‎examples/ssr/src/client.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
2-
import { hydrate } from 'react-dom';
2+
import { hydrateRoot } from 'react-dom/client';
33

44
import App from './app';
55

6-
hydrate(<App />, document.getElementById('root'));
6+
hydrateRoot(document.getElementById('root'), <App />);
77

88
if (module.hot) {
99
module.hot.accept();

‎examples/vite/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,13 @@
1212
"@compiled/babel-component-extracted-fixture": "*",
1313
"@compiled/babel-component-fixture": "*",
1414
"@compiled/react": "*",
15-
"react": "^18.2.0",
16-
"react-dom": "^18.2.0"
15+
"react": "^18.3.1",
16+
"react-dom": "^18.3.1"
1717
},
1818
"devDependencies": {
1919
"@compiled/vite-plugin": "*",
20-
"@types/react": "^18.2.0",
21-
"@types/react-dom": "^18.2.0",
20+
"@types/react": "^18.3.1",
21+
"@types/react-dom": "^18.3.1",
2222
"@vitejs/plugin-react": "^4.2.0",
2323
"typescript": "^5.0.0",
2424
"vite": "^5.0.0"

‎examples/webpack/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"css-minimizer-webpack-plugin": "^5.0.0",
1717
"html-webpack-plugin": "^5.5.0",
1818
"mini-css-extract-plugin": "^1.6.2",
19-
"react": "^17.0.2",
20-
"react-dom": "^17.0.2",
19+
"react": "^18.3.1",
20+
"react-dom": "^18.3.1",
2121
"style-loader": "^3.3.2",
2222
"webpack": "^5.94.0",
2323
"webpack-cli": "^5.0.1"

‎examples/webpack/src/index.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,21 @@
11
import { StrictMode } from 'react';
2-
import { render } from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33

44
import { App } from './app';
55

66
import './styles.css';
77

8-
function createRoot() {
8+
function createRootElement() {
99
const element = document.createElement('div');
1010
element.id = 'root';
1111
document.body.appendChild(element);
1212
return element;
1313
}
1414

15-
render(
15+
createRoot(document.getElementById('root') || createRootElement()).render(
1616
<StrictMode>
1717
<App />
18-
</StrictMode>,
19-
document.getElementById('root') || createRoot()
18+
</StrictMode>
2019
);
2120

2221
if (module.hot) {

‎fixtures/babel-component-extracted/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,6 @@
1818
"@compiled/babel-plugin-strip-runtime": "*"
1919
},
2020
"peerDependencies": {
21-
"react": "^17.0.1"
21+
"react": "^18.3.1"
2222
}
2323
}

0 commit comments

Comments
 (0)