WebAssembly files should be served with Content-Type=application/wasm

[rhmoller]

• Operating System: Ubuntu 17.10
• Node Version: 8.4.0
• NPM Version: 5.4.0
• webpack version: next branch
• webpack-dev-middleware Version: 1.12.0

• This is a feature request
• This is a bug

Code

I have created a project for testing the new webassembly support in the next branch of webpack.

https://github.com/rhmoller/webpack-webassembly-tester

Expected Behavior

The webpack-dev-server should serve the .wasm file with a Content-Type header = "application/wasm"

Actual Behavior

The .wasm file is served with "application/octet-stream; charset=UTF-8"

It has the wrong mime-type and the charset specification should not be there.

For Bugs; How can we reproduce the behavior?

Instructions are in https://github.com/rhmoller/webpack-webassembly-tester

For Features; What is the motivation and/or use-case for the feature?

To be able to use webpacks wasm support when serving the project with webpack-dev-server

[shellscape]

shouldn't this feature be asked in the mime project, considering https://github.com/webpack/webpack-dev-middleware/blob/master/middleware.js#L72?

[rhmoller]

yes the mime project should add support for .wasm. I will report that.

but the middleware also adds a charset to the MIME type which does not work

https://github.com/webpack/webpack-dev-middleware/pull/230/files#diff-27e39f85634d9276821c67a9bbf764b4R72

[rhmoller]

Support for the wasm content type is now available in mime 1.5.0. I have updated the pull request to use this new version and removed the temporary workaround.

[shellscape]

Closed by #230

[rhmoller]

Thank you. It works now when working from source. It would be great if you could publish a new version to npm.

[thijstriemstra]

Thanks for fixing this, also ran into this issue.

Slightly off-topic but in order to properly serve wasm with karma, I also had to put this in the karma config:

mime: {
    'application/wasm': ['wasm']
}

allowing you to specify the type in files:

files = [
    {pattern: 'node_modules/opus-recorder/dist/*.wasm', included: false, served: true, type: 'wasm'},
]

[David-OConnor]

I'm still having trouble with this. Using Create-React-App's Typescript version. When I run npm ls mime:

+-- mime@2.3.1
`-- react-scripts@1.1.4
  +-- url-loader@0.6.2
  | `-- mime@1.6.0
  `-- webpack-dev-server@2.9.4
    +-- express@4.16.3
    | `-- send@0.16.2
    |   `-- mime@1.4.1
    `-- webpack-dev-middleware@1.12.2
      `-- mime@1.6.0

PS C:\Users\david\code\dimensions\frontend> webpack --version
3.5.5

Are these the right versions of webpack, webpack-dev-server, and mime to make this work? Should I eject CRA and edit or replace certain files?

[henrylearn2rock]

Same here, when will the merged pull request be available? I'm still experiencing the problem in webpack-dev-server 3.1.5 which uses webpack-dev-middleware 3.1.3 (released on Apr 26, 2018), but the merge was carried out on Nov 22, 2017. Thanks!

[henrylearn2rock]

just updated to webpack-dev-server @ 3.1.6
which depends on webpack-dev-middleware@3.2.0

Still the same error. Thanks.

[thijstriemstra]

Ended up using this before handler for webpack-dev-server to serve the proper MIME-type for wasm files:

devServer: {
        // webpack-dev-server middleware
        before(app) {
            // use proper mime-type for wasm files
            app.get('*.wasm', function(req, res, next) {
                var options = {
                    root: contentBase,
                    dotfiles: 'deny',
                    headers: {
                        'Content-Type': 'application/wasm'
                    }
                };
                res.sendFile(req.url, options, function (err) {
                    if (err) {
                        next(err);
                    }
                });
            });
        }
}

[courteous]

@thijstriemstra i have tired copy pasting exactlly you devServer config but i am getting different error then i deleted to root:contentBase and dotfile: denies, and i still get "Error: ENOENT: no such file or directory, stat '/dist/mainTest.wasm'. could you please post your whole webpack.confg.js?

[thijstriemstra]

@courteous see https://github.com/collab-project/videojs-record/blob/master/build-config/fragments/dev.js