3.2.0 breaks WASM compilation

[diachedelic]

Version

3.2.0

Reproduction link

https://github.com/diachedelic/vue-cli-wasm-repro

Node and OS info

Node v8.12.0 / yarn 1.10.1 / MacOS 10.14.1

Steps to reproduce

git clone https://github.com/diachedelic/vue-cli-wasm-repro.git &&
  cd vue-cli-wasm-repro &&
  yarn install &&
  yarn build

To fix, downgrade @vue/cli-service:

yarn add '@vue/cli-service@3.1.4' && yarn build

What is expected?

Project builds without errors, like it did with @vue/cli-service@3.1.4.

What is actually happening?

Log from repro

 ERROR  Failed to compile with 1 errors                                                                    15:13:41

This dependency was not found:

* env in ./node_modules/multimath/lib/unsharp_mask/unsharp_mask.wasm

Log from my actual project

$ vue-cli-service build

 ERROR  ModuleNotFoundError: Module not found: Error: Can't resolve 'env' in '/Users/me/Code/proj/node_modules/multimath/lib/unsharp_mask'
ModuleNotFoundError: Module not found: Error: Can't resolve 'env' in '/Users/me/Code/proj/node_modules/multimath/lib/unsharp_mask'
    at factory.create (/Users/me/Code/proj/node_modules/webpack/lib/Compilation.js:821:10)
    at factory (/Users/me/Code/proj/node_modules/webpack/lib/NormalModuleFactory.js:397:22)
    at resolver (/Users/me/Code/proj/node_modules/webpack/lib/NormalModuleFactory.js:130:21)
    at asyncLib.parallel (/Users/me/Code/proj/node_modules/webpack/lib/NormalModuleFactory.js:224:22)
    at /Users/me/Code/proj/node_modules/neo-async/async.js:2825:7
    at /Users/me/Code/proj/node_modules/neo-async/async.js:6886:13
    at normalResolver.resolve (/Users/me/Code/proj/node_modules/webpack/lib/NormalModuleFactory.js:214:25)
    at doResolve (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/Resolver.js:184:12)
    at hook.callAsync (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/me/Code/proj/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at resolver.doResolve (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5)
    at hook.callAsync (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/me/Code/proj/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:15:1)
    at hook.callAsync (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/Resolver.js:238:5)
    at _fn0 (eval at create (/Users/me/Code/proj/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:12:1)
    at resolver.doResolve (/Users/me/Code/proj/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38)
error Command failed with exit code 1.

[diachedelic]

Changes to yarn.lock:

diff -r 7dccb1b3ad20 -r dcd6c7f55d03 yarn.lock
--- a/yarn.lock	Wed Nov 28 15:31:37 2018 +1100
+++ b/yarn.lock	Wed Nov 28 15:32:35 2018 +1100
@@ -969,7 +969,7 @@
     babel-plugin-transform-vue-jsx "^4.0.1"
     core-js "^2.5.7"
 
-"@vue/cli-overlay@^3.2.0":
+"@vue/cli-overlay@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-3.2.0.tgz#bb5d781914bb5af97d92410babbaa3720707b728"
   integrity sha512-RKMSfgTtRs4VOXQhmbrNZJaCCheshebji9NcPNGyXzukCMBtoAbu3cG9HxizCSUA//oFFAdPP5BGeHvv0cpu/A==
@@ -1003,18 +1003,18 @@
     "@vue/cli-shared-utils" "^3.2.0"
     workbox-webpack-plugin "^3.6.3"
 
-"@vue/cli-service@^3.1.2":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.2.0.tgz#96e8ee7b33a911ab71710c126ab55cd64c2a4c51"
-  integrity sha512-HTiaz1IBXV/JCfrmyhHJvDOYpPTBK0uQAekSVRTt5AddCeOV68ktdUqHbDe3VPDfrWFA5x3d3kIHlJd6WK31mA==
+"@vue/cli-service@3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@vue/cli-service/-/cli-service-3.1.4.tgz#04c84c1bb798db03e2c0fecc414d6a5f2954d602"
+  integrity sha512-dArLh5yd2B2an/jTD+cmkRmyRxKSE+5il9408vhciyqvZGVjkajTN95YjY5VLkBMQvrv/Z+goGSn+7wtnQSOFg==
   dependencies:
     "@intervolga/optimize-cssnano-plugin" "^1.0.5"
-    "@vue/cli-overlay" "^3.2.0"
-    "@vue/cli-shared-utils" "^3.2.0"
+    "@vue/cli-overlay" "^3.1.0"
+    "@vue/cli-shared-utils" "^3.1.1"
     "@vue/preload-webpack-plugin" "^1.1.0"
     "@vue/web-component-wrapper" "^1.2.0"
-    acorn "^6.0.4"
-    acorn-walk "^6.1.1"
+    acorn "^6.0.2"
+    acorn-walk "^6.1.0"
     address "^1.0.3"
     autoprefixer "^8.6.5"
     cache-loader "^1.2.5"
@@ -1029,7 +1029,7 @@
     escape-string-regexp "^1.0.5"
     file-loader "^2.0.0"
     friendly-errors-webpack-plugin "^1.7.0"
-    fs-extra "^7.0.1"
+    fs-extra "^7.0.0"
     globby "^8.0.1"
     hash-sum "^1.0.2"
     html-webpack-plugin "^3.2.0"
@@ -1037,7 +1037,7 @@
     lodash.defaultsdeep "^4.6.0"
     lodash.mapvalues "^4.6.0"
     lodash.transform "^4.6.0"
-    mini-css-extract-plugin "^0.4.5"
+    mini-css-extract-plugin "^0.4.4"
     minimist "^1.2.0"
     ora "^3.0.0"
     portfinder "^1.0.19"
@@ -1052,14 +1052,14 @@
     thread-loader "^1.2.0"
     url-loader "^1.1.2"
     vue-loader "^15.4.2"
-    webpack "^4.26.1"
+    webpack "^4.18.1"
     webpack-bundle-analyzer "^3.0.3"
     webpack-chain "^4.11.0"
     webpack-dev-server "^3.1.10"
     webpack-merge "^4.1.4"
     yorkie "^2.0.0"
 
-"@vue/cli-shared-utils@^3.0.5", "@vue/cli-shared-utils@^3.2.0":
+"@vue/cli-shared-utils@^3.0.5", "@vue/cli-shared-utils@^3.1.1", "@vue/cli-shared-utils@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@vue/cli-shared-utils/-/cli-shared-utils-3.2.0.tgz#504037063c2a4a346dc35c9652bd3863da4816e7"
   integrity sha512-FCX5ABFg5pWhomyXLpCaogJktMvjsS5d4Mn5BfvqcJxCvzOX6ze8ihFK3u//XMeM78dOFpHSjxnRSvHtkEwgsg==
@@ -1307,7 +1307,7 @@
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
   integrity sha512-HJ7CfNHrfJLlNTzIEUTj43LNWGkqpRLxm3YjAlcD0ACydk9XynzYsCBHxut+iqt+1aBXkx9UP/w/ZqMr13XIzg==
 
-acorn-walk@^6.1.1:
+acorn-walk@^6.1.0:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
   integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
@@ -1322,7 +1322,7 @@
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.2, acorn@^6.0.4:
+acorn@^6.0.2:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.4.tgz#77377e7353b72ec5104550aa2d2097a2fd40b754"
   integrity sha512-VY4i5EKSKkofY2I+6QLTbTTN/UvEQPCo6eiwzzSaSWfpaDhOmStMCMod6wmuPciNq+XS0faCglFu2lHZpdHUtg==
@@ -4506,7 +4506,7 @@
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^7.0.1:
+fs-extra@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
   integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
@@ -6307,7 +6307,7 @@
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
   integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
 
-mini-css-extract-plugin@^0.4.5:
+mini-css-extract-plugin@^0.4.4:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz#c99e9e78d54f3fa775633aee5933aeaa4e80719a"
   integrity sha512-dqBanNfktnp2hwL2YguV9Jh91PFX7gu7nRLs4TGsbAfAG6WOtlynFRYzwDwmmeSb5uIwHo9nx1ta0f7vAZVp2w==
@@ -10125,7 +10125,7 @@
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.26.1:
+webpack@^4.18.1:
   version "4.26.1"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.26.1.tgz#ff3a9283d363c07b3494dfa702d08f4f2ef6cb39"
   integrity sha512-i2oOvEvuvLLSuSCkdVrknaxAhtUZ9g+nLSoHCWV0gDzqGX2DXaCrMmMUpbRsTSSLrUqAI56PoEiyMUZIZ1msug==

[diachedelic]

So the issue appears to be in @vue/cli-service as no other package's version resolved differently after downgrading from v3.2.0 to v3.1.4

[haoqunjiang]

A temporary fix:

// vue.config.js
module.exports = {
  chainWebpack: config => config.resolve.extensions.delete('.wasm')
}

It is because in 3.2 we added .wasm extension to the resolve list (which is also default in webpack).
And in the library https://github.com/nodeca/multimath/blob/master/lib/unsharp_mask/index.js they put the .wasm file of the same name with the js file in the same directory and require the js file without extension…

[diachedelic]

It worked!