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.
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
fix: usage of wasm in an appDir page file using the edge runtime #41689
Changes from 2 commits
7d66819
638cfcb
ede03bc
6221673
63c70aa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import path from 'path' | ||
import { createNext, FileRef } from 'e2e-utils' | ||
import { NextInstance } from 'test/lib/next-modes/base' | ||
import { renderViaHTTP } from 'next-test-utils' | ||
|
||
const files = { | ||
'app/layout.tsx': ` | ||
export default function AppLayout({ children }) { | ||
return ( | ||
<html> | ||
<head> | ||
<title>WASM Import</title> | ||
</head> | ||
<body> | ||
{children} | ||
</body> | ||
</html> | ||
) | ||
} | ||
`, | ||
'app/page.tsx': ` | ||
// @ts-expect-error | ||
import wasm from '../wasm/add.wasm?module' | ||
|
||
console.log(wasm) | ||
|
||
export default function Page() { | ||
return "index page" | ||
} | ||
|
||
export const runtime = "experimental-edge" | ||
`, | ||
'wasm/add.wasm': new FileRef(path.join(__dirname, 'add.wasm')), | ||
} | ||
|
||
describe('app-dir edge runtime with wasm', () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm not sure if it would be preferred to have all of the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think it's good. We can always merge tests. Extracting is harder. 🙏 |
||
let next: NextInstance | ||
|
||
beforeAll(async () => { | ||
next = await createNext({ | ||
files, | ||
dependencies: { | ||
react: 'experimental', | ||
'react-dom': 'experimental', | ||
typescript: 'latest', | ||
'@types/react': 'latest', | ||
'@types/node': 'latest', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: consider writing the tests in JavaScript and not in TypeScript, so we can remove these dependencies. wdyt? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Great idea, updated! |
||
}, | ||
nextConfig: { | ||
experimental: { | ||
appDir: true, | ||
}, | ||
}, | ||
}) | ||
}) | ||
afterAll(() => next.destroy()) | ||
|
||
it('should have built', async () => { | ||
const html = await renderViaHTTP(next.url, '/') | ||
expect(html).toContain('index page') | ||
}) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we execute the wasm? & see that it actually loads the Wasm file correctly in runtime? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Updated! 😃 |
||
}) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
good catch
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we need to do the same for blob assets? (i.e.
fetch(new URL("./file.png", import.meta.url))
)anyway that can be in a new PR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good question 🤔 yeah I can take a look and add a test case as a follow-up!