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.

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

Support Webpack 4 (e.g. for Create React App) #11

Closed
webmaster128 opened this issue Sep 13, 2020 · 2 comments
Closed

Support Webpack 4 (e.g. for Create React App) #11

webmaster128 opened this issue Sep 13, 2020 · 2 comments

Comments

@webmaster128
Copy link
Contributor

When trying to use this lib from npm in a React project, I get the error

Failed to compile.

./node_modules/drand-client/verifying.js 16:29
Module parse failed: Unexpected token (16:29)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|         // TODO: switch to TinyGo when math/big works for smaller wasm file and non-global exports.
|         const go = new Go();
>         const url = `${import.meta.url.split('/').slice(0, -1).join('/')}/wasm/drand.wasm`;
|         let result;
|

This is because import.meta.url is not supported in Webpack 4. Webpack 5 support probably will take some more time.

I have no great idea how to solve this, but let's see.

@webmaster128
Copy link
Contributor Author

Starting with Webpack 5, import.meta.url is resolved to an absolute file URL at build time. Then

        // TODO: switch to TinyGo when math/big works for smaller wasm file and non-global exports.
        const go = new Go()
        const url = `${import.meta.url.split('/').slice(0, -1).join('/')}/wasm/drand.wasm`
        let result

becomes

// TODO: switch to TinyGo when math/big works for smaller wasm file and non-global exports.
const go = new Go()
const url = `${"file:///Users/me/projects/drand-client/verifying.js".split('/').slice(0, -1).join('/')}/wasm/drand.wasm`
let result

which is not very helpful. However, a small rewrite to

        // TODO: switch to TinyGo when math/big works for smaller wasm file and non-global exports.
        const go = new Go()
        const url = new URL("./wasm/drand.wasm", import.meta.url)
        let result

lets Webpack bundle the Wasm file as an asset.

@CluEleSsUK
Copy link
Contributor

The client has now been migrated to typescript, so you shouldn't have a problem with create-react-app as there's no wasm binding! Let me know if you have any issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants