Cannot set property 'wasm' of undefined. Mismatched `mime` versions?

[tannerlinsley]

• Operating System: MacOS 10.14
• Node Version: 10.5.0
• NPM Version: 6.4.1
• webpack Version: 4.29.6
• webpack-dev-server Version: 3.2.1

• This is a bug
• This is a modification request

Code

TypeError: Cannot set property 'wasm' of undefined
  
  - Server.js:160 new Server
    [basic]/[webpack-dev-server]/lib/Server.js:160:36
  
  - index.js:248 _callee7$
    ../../../src/static/webpack/index.js:248:15
  
  - runtime.js:62 tryCatch
    [basic]/[regenerator-runtime]/runtime.js:62:40

This is currently in a local WIP branch of React Static v7.
This bug may be related to #1580?

The line of code [basic]/[webpack-dev-server]/lib/Server.js:160:36 is referring to is https://github.com/webpack/webpack-dev-server/blob/master/lib/Server.js#L160

Expected Behavior

The dev server should start without errors.

Actual Behavior

When attempting to start the dev server, Cannot set property 'wasm' of undefined is logged and the process hangs.

For Bugs; How can we reproduce the behavior?

Working on a reproduction link, will edit to include asap.

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

[alexander-akait]

Yep, reproducible test repo will be great

[tannerlinsley]

I realize this is extremely involved, so I admire your patience should you choose to help me with this. React Static is no walk-in-the-park, but here we go!

• git clone https://github.com/nozzle/react-static.git
• Checkout the v7 branch
• Run yarn
• Run yarn link
• Run yarn start to compile
• In packages/react-static/templates/basic
  • Run yarn
  • Run yarn link react-static
  • Run yarn start
  • The error is displayed

Given that this is an alpha branch, any number of things could go wrong, so if you hit a roadblock, let me know and I'll do my best to guide you to the issue.

Points of interest:

• https://github.com/nozzle/react-static/tree/v7/packages/react-static/src/static/webpack contains all of our webpack files. In this case, webpack.dev.js is what is being used to compile.

[alexander-akait]

Thanks for repo, i will see on this in near future, anyway PR welcome

[tannerlinsley]

Thanks.

[tannerlinsley]

This rabbit hole has led me through a few packages:

• express
• serve-static
• send
• mime

In the mime package, it appears they are not using a mime.types property name, but actually mime._types (https://github.com/broofa/node-mime/blob/master/Mime.js#L8)

So when webpack dev server calls express.static.mime.types['wasm'] = '...' it errors. I noticed a ref in the webpack dev server for a specific version of send. Do I need to lock to a specific version for the dev server to work right now?

[alexander-akait]

I don't understand you

[tannerlinsley]

So I looked for the mime package in my packages and found this:

➜  react-static (v7) ✔ yarn why mime
yarn why v1.12.1
[1/4] 🤔  Why do we have the module "mime"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "mime@2.4.0"
info Has been hoisted to "mime"
info Reasons this module exists
   - "workspace-aggregator-13bb6450-ff97-4a1c-a3c5-091240e53182" depends on it
   - Hoisted from "_project_#react-static#url-loader#mime"
   - Hoisted from "_project_#react-static#webpack-dev-server#webpack-dev-middleware#mime"
info Disk size without dependencies: "144KB"
info Disk size with unique dependencies: "144KB"
info Disk size with transitive dependencies: "144KB"
info Number of shared dependencies: 0
=> Found "send#mime@1.4.1"
info This module exists because "_project_#react-static#webpack-dev-server#express#send" depends on it.
info Disk size without dependencies: "72KB"
info Disk size with unique dependencies: "72KB"
info Disk size with transitive dependencies: "72KB"
info Number of shared dependencies: 0
✨  Done in 0.91s.

It appears that the latest webpack-dev-middleware and url-loader packages are relying on the latest version of mime, but webpack-dev-server is relying on the old version. Looks like webpack-dev-server is trying to use the latest version of mime (which has no mime.types property, but instead has been changed to mime._types).

This produces the OP error.

[tannerlinsley]

I've also updated the OP description with the stack trace and a link to the dev-server line that is erroring.

[alexander-akait]

We use latest version of mime https://github.com/webpack/webpack-dev-middleware/blob/master/package.json#L20

[alexander-akait]

Anyway we can dd more check to avoid problem in future

[tannerlinsley]

Yeah, if webpack-dev-middleware is relying on mime@2.x, then we either need to update express.static.mime.types['wasm'] = '...' to express.static.mime._types['wasm'] = '...' or preferably just remove it (since mime clearly wants _types to be private, there is likely a better way to do this, or its probably not needed anymore)

[tannerlinsley]

After testing this in an isolated reproduction, it appears to be something to do with React-Static's configuration. Will reopen if needed. Thanks for being my rubber-duck!