Closed M4GNV5 closed 3 years ago
Hi @M4GNV5 ,
Since the Webpack still marks webassembly as an experimental feature, I'd prefer to keep using the file-loader rather than enable the flags. I'm not familiar with next.js and webpack 5. However, the file-loader is a well known loader for webpack and is used for the resources like images, I think it should still be available for webpack 5. So I suggest you to check if the file-loader can works for other files and to figure out why the file-loader didn't work for wasm.bin.
Enable the experiment could also be an option. But I don't want the users to be forced enabling the flags if they don't want to. And I also don't want to make the initialization process complicated. Thus, I don't think I'm going to change the default loading logic for now.
For those who want to use the webpack webassembly loader, try to replace the load.ts
with some other implementation by some webpack replacement plugin . For these cases, the file zbar.wasm
could be used directly instead of using zbar.wasm.bin
.
And, If you feel your implementation is general enough, a PR is also welcome.
Hope this reply to your question.
You need to configure webpack 5 to treat .bin
as a static file and output it into the static file folder.
Here's a working next.config.js
for Next.js 11:
module.exports = {
reactStrictMode: true,
webpack: config => {
config.module.rules.push({
test: /\.bin$/i,
type: 'asset/resource',
generator: {
// important, otherwise it will output into a folder that is not served by next
filename: 'static/[hash][ext][query]'
}
})
return config
},
}
As anyone successfully used the lib with angular or webpack5 ? I am struggling with the configuration since changing webpack config with angular is not easy.
I tried to change the load.js file and loading dynamically the module but I must be missing something
@hadrien-f I managed to use the library without any problems with Angular v12.
The only thing I needed was the @angular-builders/custom-webpack
builder, pointing it to my extra webpack config with the help of @alexhorn:
import { Configuration } from 'webpack';
export default (config: Configuration) => {
config.module?.rules?.push({
test: /\.bin$/i,
type: 'asset/resource',
generator: {
filename: 'assets/[hash][ext][query]',
},
});
return config;
};
I will close this issue, as it seems to work with different frameworks and a correct configuration.
Hey,
webpack comes with experimental WASM support. I've been trying to use this library with next.js, but so far without luck:
Without any configuration:
Setting
syncWebAssembly
gives the same error.Adding the following to my nextjs config:
The website compiles but tries to load
http://localhost:3000/_next/919afea9035a50020a842aba55b2024a.bin
which does not exist (error 404). And thus cases an errorWASM was not loaded
Any tips on getting this to run? Maybe now that webpack has WASM support the fetch/file-loader hack could even be replaced?