diff --git a/.changeset/good-trainers-appear.md b/.changeset/good-trainers-appear.md new file mode 100644 index 0000000000..3bce8c86bd --- /dev/null +++ b/.changeset/good-trainers-appear.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +The check for `react-dom/client` will now properly always run from the target directory. diff --git a/.changeset/real-tigers-punch.md b/.changeset/real-tigers-punch.md new file mode 100644 index 0000000000..c5597e50da --- /dev/null +++ b/.changeset/real-tigers-punch.md @@ -0,0 +1,5 @@ +--- +'@backstage/cli': patch +--- + +Updated the Vite implementation behind the `EXPERIMENTAL_VITE` flag to work with more recent versions of Backstage. diff --git a/packages/app/package.json b/packages/app/package.json index 71ee806121..36eecdfebd 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -73,6 +73,7 @@ "@material-ui/core": "^4.12.2", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "4.0.0-alpha.61", + "@modyfi/vite-plugin-yaml": "^1.1.0", "@octokit/rest": "^19.0.3", "@vitejs/plugin-react": "^4.3.1", "history": "^5.0.0", diff --git a/packages/cli/package.json b/packages/cli/package.json index df75e435df..0ca580dd91 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -194,12 +194,16 @@ "vite-plugin-node-polyfills": "^0.22.0" }, "peerDependencies": { + "@modyfi/vite-plugin-yaml": "^1.1.0", "@vitejs/plugin-react": "^4.3.1", "vite": "^5.0.0", "vite-plugin-html": "^3.2.2", "vite-plugin-node-polyfills": "^0.22.0" }, "peerDependenciesMeta": { + "@modyfi/vite-plugin-yaml": { + "optional": true + }, "@vitejs/plugin-react": { "optional": true }, diff --git a/packages/cli/src/lib/bundler/hasReactDomClient.ts b/packages/cli/src/lib/bundler/hasReactDomClient.ts index e7ef7bbac9..67e6a3f42e 100644 --- a/packages/cli/src/lib/bundler/hasReactDomClient.ts +++ b/packages/cli/src/lib/bundler/hasReactDomClient.ts @@ -13,9 +13,14 @@ * See the License for the specific language governing permissions and * limitations under the License. */ + +import { paths } from '../paths'; + export function hasReactDomClient() { try { - require.resolve('react-dom/client'); + require.resolve('react-dom/client', { + paths: [paths.targetDir], + }); return true; } catch { return false; diff --git a/packages/cli/src/lib/bundler/server.ts b/packages/cli/src/lib/bundler/server.ts index d73bcc662e..6542e0a393 100644 --- a/packages/cli/src/lib/bundler/server.ts +++ b/packages/cli/src/lib/bundler/server.ts @@ -125,24 +125,65 @@ DEPRECATION WARNING: React Router Beta is deprecated and support for it will be }); if (process.env.EXPERIMENTAL_VITE) { - const vite = require('vite'); - const { default: viteReact } = require('@vitejs/plugin-react'); - const { - nodePolyfills: viteNodePolyfills, - } = require('vite-plugin-node-polyfills'); - const { createHtmlPlugin: viteHtml } = require('vite-plugin-html'); + const vite = require('vite') as typeof import('vite'); + const { default: viteReact } = + require('@vitejs/plugin-react') as typeof import('@vitejs/plugin-react'); + const { default: viteYaml } = + require('@modyfi/vite-plugin-yaml') as typeof import('@modyfi/vite-plugin-yaml'); + const { nodePolyfills: viteNodePolyfills } = + require('vite-plugin-node-polyfills') as typeof import('vite-plugin-node-polyfills'); + const { createHtmlPlugin: viteHtml } = + require('vite-plugin-html') as typeof import('vite-plugin-html'); + viteServer = await vite.createServer({ define: { - global: 'window', 'process.argv': JSON.stringify(process.argv), 'process.env.APP_CONFIG': JSON.stringify(cliConfig.frontendAppConfigs), // This allows for conditional imports of react-dom/client, since there's no way // to check for presence of it in source code without module resolution errors. 'process.env.HAS_REACT_DOM_CLIENT': JSON.stringify(hasReactDomClient()), }, + optimizeDeps: { + esbuildOptions: { + plugins: [ + { + name: 'custom-define', + setup(build) { + const define = (build.initialOptions.define ||= {}); + define['process.env.HAS_REACT_DOM_CLIENT'] = JSON.stringify( + hasReactDomClient(), + ); + define['process.env.NODE_ENV'] = JSON.stringify('development'); + }, + }, + ], + }, + }, plugins: [ viteReact(), - viteNodePolyfills(), + viteNodePolyfills({ + include: [ + 'buffer', + 'events', + 'fs', + 'http', + 'https', + 'os', + 'path', + 'process', + 'querystring', + 'stream', + 'url', + 'util', + 'zlib', + ], + globals: { + global: true, + Buffer: true, + process: true, + }, + }), + viteYaml(), viteHtml({ entry: paths.targetEntry, // todo(blam): we should look at contributing to thPe plugin here diff --git a/yarn.lock b/yarn.lock index 71421a2ad5..7d4e6a0452 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4058,11 +4058,14 @@ __metadata: yn: ^4.0.0 zod: ^3.22.4 peerDependencies: + "@modyfi/vite-plugin-yaml": ^1.1.0 "@vitejs/plugin-react": ^4.3.1 vite: ^5.0.0 vite-plugin-html: ^3.2.2 vite-plugin-node-polyfills: ^0.22.0 peerDependenciesMeta: + "@modyfi/vite-plugin-yaml": + optional: true "@vitejs/plugin-react": optional: true vite: @@ -11588,6 +11591,19 @@ __metadata: languageName: node linkType: hard +"@modyfi/vite-plugin-yaml@npm:^1.1.0": + version: 1.1.0 + resolution: "@modyfi/vite-plugin-yaml@npm:1.1.0" + dependencies: + "@rollup/pluginutils": 5.1.0 + js-yaml: 4.1.0 + tosource: 2.0.0-alpha.3 + peerDependencies: + vite: ^3.2.7 || ^4.0.5 || ^5.0.5 + checksum: 6989cde89323321b714b69d11b9125c8d3483a8c6ace536df313edd653180e85e6013effbc6cb8b89e6f9d6e107a10f7a82fadf6a44e81255b437702d5dd1db0 + languageName: node + linkType: hard + "@motionone/animation@npm:^10.12.0": version: 10.16.3 resolution: "@motionone/animation@npm:10.16.3" @@ -14918,17 +14934,7 @@ __metadata: languageName: node linkType: hard -"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1": - version: 4.2.1 - resolution: "@rollup/pluginutils@npm:4.2.1" - dependencies: - estree-walker: ^2.0.1 - picomatch: ^2.2.2 - checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12 - languageName: node - linkType: hard - -"@rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0": +"@rollup/pluginutils@npm:5.1.0, @rollup/pluginutils@npm:^5.0.1, @rollup/pluginutils@npm:^5.0.5, @rollup/pluginutils@npm:^5.1.0": version: 5.1.0 resolution: "@rollup/pluginutils@npm:5.1.0" dependencies: @@ -14944,6 +14950,16 @@ __metadata: languageName: node linkType: hard +"@rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1": + version: 4.2.1 + resolution: "@rollup/pluginutils@npm:4.2.1" + dependencies: + estree-walker: ^2.0.1 + picomatch: ^2.2.2 + checksum: 6bc41f22b1a0f1efec3043899e4d3b6b1497b3dea4d94292d8f83b4cf07a1073ecbaedd562a22d11913ff7659f459677b01b09e9598a98936e746780ecc93a12 + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.22.5": version: 4.22.5 resolution: "@rollup/rollup-android-arm-eabi@npm:4.22.5" @@ -26854,6 +26870,7 @@ __metadata: "@material-ui/core": ^4.12.2 "@material-ui/icons": ^4.9.1 "@material-ui/lab": 4.0.0-alpha.61 + "@modyfi/vite-plugin-yaml": ^1.1.0 "@octokit/rest": ^19.0.3 "@playwright/test": ^1.32.3 "@testing-library/dom": ^10.0.0 @@ -31623,7 +31640,7 @@ __metadata: languageName: node linkType: hard -"js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0": +"js-yaml@npm:4.1.0, js-yaml@npm:=4.1.0, js-yaml@npm:^4.0.0, js-yaml@npm:^4.1.0": version: 4.1.0 resolution: "js-yaml@npm:4.1.0" dependencies: @@ -42707,7 +42724,7 @@ __metadata: languageName: node linkType: hard -"tosource@npm:^2.0.0-alpha.3": +"tosource@npm:2.0.0-alpha.3, tosource@npm:^2.0.0-alpha.3": version: 2.0.0-alpha.3 resolution: "tosource@npm:2.0.0-alpha.3" checksum: bc03a7571de8ed4306e6721283fa891f2adcab9dd80c46f6f177d4259b34bb192fe3a2cb3e1e2ce16f9db0bc7e534acfcb5478ab094b0ba255f98abfce6dab46