Webpack 4 breaks file-loading'ing wasm file

Do you want to request a feature or report a bug?
bug

What is the current behavior?
wasm files which are loaded using file-loader throw an error about a parse fail.

Module parse failed: WasmCompile: Wasm decoding failed: expected magic word 00 61 73 6d, found 6d 6f 64 75 @+0

I believe the error is occurring because webpack is trying to parse the output from file-loader.

If the current behavior is a bug, please provide the steps to reproduce.

const urlToFile = require('!!file-loader!../../some/file.wasm');

What is the expected behavior?
If a wasm file already has a loader, webpack should not try to parse it.

If this is a feature request, what is motivation or use case for changing the behavior?
I do not want to include the wasm file in my bundle. Instead, I want to lazy load it from a url which was possible in previous webpack versions.

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
webpack version: 4.1.1

I was able to resolve the issue by omitting the wasm rule from module.defaultRules. So my config.module.defaultRules looks like

[
      {
        type: "javascript/auto",
        resolve: {}
      },
      {
        test: /\.json$/i,
        type: "json"
      },
]

I don't think this issue should have been closed. Imho, there should be an easier way to do this, especially directly in the import query.

For example, people using the Angular CLI, Create-react-app or similar tools should not have to eject to achieve this, especially since it works very well with webpack 3.

Webpack is currently working on an experimental support for WebAssembly:
see https://github.com/webpack/webpack/blob/master/examples/wasm-simple/webpack.config.js#L10-L11.

Also it seems that the binary you're trying to load is a text file. You can try by opening it in https://webassembly.js.org/share.html.

@jfizz

@jfizz what's defaultRules? Is it documented anywhere? Why does this work?

I updated a dependency that now loads a wasm at runtime, and thought, when I got the error about needing a loader for wasm, oh that's easy, I'll just set it up with a rule for file-loader and copy it over verbatim. I was confounded when I kept getting errors about "magic header not detected" with a stack trace that clearly showed that Webpack wanted to use a wasm-specific loader even though I told it not to.

Your fix got the build working, but damn it Webpack, every time this kind of mysterious "helpful" behavior kills half a day for me I feel more inclined to just go back to writing my whole build toolchain with shell scripts. WTF?

@xtuc

@xtuc It appears to be a text file because it was previously loaded by file-loader, which is the issue. I am suggesting: If a wasm file already has a loader, webpack should not try to parse it.

@thw0rted I discovered it by looking at the source:

webpack/lib/WebpackOptionsDefaulter.js

Line 52 in 677eaba

this.set("module.defaultRules", "make", options => [

For the record, I'm still pissed that Webpack hasn't documented this, but I think you can actually get rid of the error by just adding type: "javascript/auto" to the rule for /\.wasm$/, without touching defaultRules.

No need to be pissed. Webpack is free and provides a ton of functionality. Not every feature is documented, and historically webpack has lacked documentation but they've gotten a ton better. They always welcome PRs

@olsonpm

Sorry @olsonpm , you are of course correct -- I hate when people show up to an open-source project and make demands, and I was out of line to sound like the volunteer maintainers aren't doing enough.

What bothers me is when docs are incomplete or out of date, and I don't know enough about the project to fix them myself. If it's something I have a decent grasp of I don't mind reading the source to figure out the rest, but a lot of Webpack has always seemed a bit black-magic to me. Delving into the internals feels kind of daunting, and the source @jfizz linked to is nearly comment-free, which doesn't help.

Handle *.wasm files using file-loader

Hello ! Could this be re-opened, since it still seems to be an issue for a lot of people ?
Why does webpack still try to parse the wasm file when instructed to load it with file-loader ?
Is there a solution for those using create-react-app ?

Hello ! Could this be re-opened, since it still seems to be an issue for a lot of people ? Why does webpack still try to parse the wasm file when instructed to load it with file-loader ? Is there a solution for those using create-react-app ?

Speaking for CRA, I moved to craco, so you don"t have to eject from CRA. Adding a craco.config.js at root, with the following content

// Webpack 4
module.exports = {
    webpack: {
        configure: {
            // See https://github.com/webpack/webpack/issues/6725
            module: {
                rules: [
                    {
                        test: /\.wasm$/,
                        type: 'javascript/auto',
                    },
                ]
            },
        }
    },
};

// Webpack 5
module.exports = {
    webpack: {
        configure: {
            // See https://github.com/webpack/webpack/issues/6725
            module: {
                rules: [
                    {
                        test: /\.wasm$/,
                        type: 'javascript/auto',
                        use: [
                            { loader: 'file-loader' }
                        ]
                    },
                ]
            },
        }
    },
};

So i can import like this in React

import wasm from "!!file-loader?name=sql-wasm-hash.wasm!sql.js/dist/sql-wasm.wasm";

Navigation Menu

Repository navigation

Webpack 4 breaks file-loading'ing wasm file #6725

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Webpack 4 breaks file-loading'ing wasm file #6725

Description

Activity

jfizz commented on Mar 12, 2018

hccampos commented on Mar 13, 2018

xtuc commented on Mar 13, 2018

thw0rted commented on May 21, 2018

jfizz commented on May 23, 2018

thw0rted commented on May 23, 2018

olsonpm commented on Jun 18, 2018

thw0rted commented on Jun 19, 2018

lovasoa commented on Jul 5, 2021

dbuchet commented on Dec 9, 2022

Metadata

Metadata

Assignees

Labels

Type

Fields

Projects

Milestone

Relationships

Development

Issue actions