gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Rust generated WebAssembly in gatsby project #19072

Closed glfmn closed 4 years ago

glfmn commented 5 years ago

Summary

I am including visualizations in my site built in Rust with web assembly as a target. I would prefer to keep the rust code in the same repo as the gatsby app like so:

.
├── content // site content...
├── src     // js components...
└── wasm    // rust project...
   ├── pkg  // built wasm files
   ├── src
   ├── target
   ├── Cargo.lock
   ├── Cargo.toml
   └── rustfmt.toml

The development server works well, but how do I get it to build?

Relevant information

The setup works when using gatsby develop, but causes errors in Gatsby build.

I get an error which appears to complain about not using an "import" statement to include the file. However, I load the wasm module as follows:

const [{ res: wasm, loading }, load] = useLoadable(() => import('../../../wasm/pkg'))

The issue may actually be inside the generated js glue code which imports the wasm files as:

import * as wasm from './glfmn_io_bg.wasm';
wasm/pkg
├── glfmn_io.d.ts
├── glfmn_io.js
├── glfmn_io_bg.d.ts
├── glfmn_io_bg.wasm
└── package.json

Build Error

 ERROR #98123  WEBPACK

Generating SSR bundle failed

WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* ./.cache/static-entry.js --> ./.cache/sync-requires.js --> ./src/templates/series.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./src/components/backgrounds/astar.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/cave.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./.cache/sync-requires.js --> ./src/templates/post.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./.cache/sync-requires.js --> ./src/pages/index.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./src/templates/series.jsx --> ./src/components/layout.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./src/pages/index.jsx --> ./src/components/layout.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm
* ... --> ./.cache/sync-requires.js --> ./src/pages/404.jsx --> ./src/components/layout.jsx --> ./src/components/preview.jsx --> ./src/components/backgrounds.jsx --> ./src/components/backgrounds/astar.jsx --> ./wasm/pkg/glfmn_io.js --> ./wasm/pkg/glfmn_io_bg.wasm

File: wasm/pkg/glfmn_io_bg.wasm

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A package.json: N/A gatsby-node.js: N/A gatsby-browser.js: N/A gatsby-ssr.js: N/A

LekoArts commented 5 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

gatsbot[bot] commented 4 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

github-actions[bot] commented 4 years ago

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

JakubKoralewski commented 4 years ago

That's not a good way to treat an issue...