Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: waku build will bundle browser files in server side #900

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

fix: waku build will bundle browser files in server side #900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3c2e0fa
fix: waku build will bundle browser files in server side
himself65 Sep 25, 2024
3d9ad51
fix: prettier
himself65 Sep 30, 2024
d19c8ed
test: update example
himself65 Sep 30, 2024
942c608
fix: tsconfig
himself65 Sep 30, 2024
32f416c
fix: file position
himself65 Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions e2e/fixtures/exports-condition/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Exports Condition
1 change: 1 addition & 0 deletions e2e/fixtures/exports-condition/modules/my-module/index.browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const runtime = 'browser'
1 change: 1 addition & 0 deletions e2e/fixtures/exports-condition/modules/my-module/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const runtime: string;
1 change: 1 addition & 0 deletions e2e/fixtures/exports-condition/modules/my-module/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const runtime = 'server'
12 changes: 12 additions & 0 deletions e2e/fixtures/exports-condition/modules/my-module/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"name": "my-module",
"private": true,
"type": "module",
"types": "./index.d.ts",
"exports": {
".": {
"browser": "./index.browser.js",
"import": "./index.js"
}
}
}
23 changes: 23 additions & 0 deletions e2e/fixtures/exports-condition/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "exports-condition",
"version": "0.1.0",
"type": "module",
"private": true,
"scripts": {
"dev": "waku dev",
"build": "waku build",
"start": "waku start"
},
"dependencies": {
"react": "19.0.0-rc-d6cb4e77-20240911",
"react-dom": "19.0.0-rc-d6cb4e77-20240911",
"react-server-dom-webpack": "19.0.0-rc-d6cb4e77-20240911",
"waku": "workspace:*",
"my-module": "link:./modules/my-module"
},
"devDependencies": {
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"typescript": "^5.6.2"
}
}
23 changes: 23 additions & 0 deletions e2e/fixtures/exports-condition/src/components/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { runtime } from 'my-module';
import { Client } from './Client.js';

const App = ({ name }: { name: string }) => {
return (
<html>
<head>
<title>Waku example</title>
</head>
<body>
<div
style={{ border: '3px red dashed', margin: '1em', padding: '1em' }}
>
<h1 data-testid="app-name">{name}</h1>
<div data-testid="server-runtime">{runtime}</div>
<Client />
</div>
</body>
</html>
);
};

export default App;
15 changes: 15 additions & 0 deletions e2e/fixtures/exports-condition/src/components/Client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
'use client';
import { runtime } from 'my-module';
import { useEffect, useState } from 'react';

export const Client = () => {
// avoid hydration error, since runtime is different between client/server
const [mount, setMount] = useState(false);
useEffect(() => {
setMount(true);
}, []);
if (mount) {
return <div data-testid="client-runtime">{runtime}</div>;
}
return null;
};
28 changes: 28 additions & 0 deletions e2e/fixtures/exports-condition/src/entries.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { lazy } from 'react';
import { defineEntries } from 'waku/server';
import { Slot } from 'waku/client';

const App = lazy(() => import('./components/App.js'));

export default defineEntries(
// renderEntries
async (input) => {
return {
App: <App name={input || 'Waku'} />,
};
},
// getBuildConfig
async () => [{ pathname: '/', entries: [{ input: '' }] }],
// getSsrConfig
async (pathname) => {
switch (pathname) {
case '/':
return {
input: '',
html: <Slot id="App" />,
};
default:
return null;
}
},
);
17 changes: 17 additions & 0 deletions e2e/fixtures/exports-condition/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { StrictMode } from 'react';
import { createRoot, hydrateRoot } from 'react-dom/client';
import { Root, Slot } from 'waku/client';

const rootElement = (
<StrictMode>
<Root>
<Slot id="App" />
</Root>
</StrictMode>
);

if ((globalThis as any).__WAKU_HYDRATE__) {
hydrateRoot(document, rootElement);
} else {
createRoot(document as any).render(rootElement);
}
17 changes: 17 additions & 0 deletions e2e/fixtures/exports-condition/tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"compilerOptions": {
"composite": true,
"strict": true,
"target": "esnext",
"downlevelIteration": true,
"esModuleInterop": true,
"module": "nodenext",
"skipLibCheck": true,
"noUncheckedIndexedAccess": true,
"exactOptionalPropertyTypes": true,
"types": ["react/experimental"],
"jsx": "react-jsx",
"outDir": "./dist"
},
"include": ["./src", "./vite.config.ts"]
}
6 changes: 6 additions & 0 deletions packages/waku/src/lib/builder/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,6 +251,9 @@ const buildServerBundle = async (
esbuild: {
jsx: 'automatic',
},
resolve: {
conditions: ['import', 'module', 'default'],
},
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
Expand Down Expand Up @@ -311,6 +314,9 @@ const buildSsrBundle = async (
esbuild: {
jsx: 'automatic',
},
resolve: {
conditions: ['import', 'module', 'default'],
},
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
Expand Down
3 changes: 3 additions & 0 deletions packages/waku/src/lib/middleware/dev-server-impl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,9 @@ const createMainViteServer = (
rscHmrPlugin(),
fsRouterTypegenPlugin(config),
],
resolve: {
conditions: ['import', 'module', 'default'],
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

MainViteServer is used to bundle for browsers.
It should be in ssr.resolve.conditions.
Do we need to change RscViteServer?

Now I wonder if build.ts change is correct.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested, ssrLoadModule won't use browser condition by default

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So, what's the original problem?
This MainViteServer it to for browsers, so browser condition should be appropriate.

},
optimizeDeps: {
include: ['react-server-dom-webpack/client', 'react-dom'],
exclude: ['waku', 'rsc-html-stream/server'],
Expand Down
28 changes: 28 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions tsconfig.e2e.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@
},
{
"path": "./e2e/fixtures/broken-links/tsconfig.json"
},
{
"path": "./e2e/fixtures/exports-condition/tsconfig.json"
}
]
}
Loading