LukasMarx / angular-wasm

9 stars 2 forks source link

Module not found: Error: Can't resolve 'fs' in '/Users/temp/wasm/angular-wasm/wasm' #1

Open playground opened 5 years ago

playground commented 5 years ago

Not working in ng 8.

  "dependencies": {
    "@angular/animations": "^8.0.0-rc.5",
    "@angular/common": "^8.0.0-rc.5",
    "@angular/compiler": "^8.0.0-rc.5",
    "@angular/core": "^8.0.0-rc.5",
    "@angular/forms": "^8.0.0-rc.5",
    "@angular/platform-browser": "^8.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^8.0.0-rc.5",
    "@angular/platform-server": "^8.0.0-rc.5",
    "@angular/router": "^8.0.0-rc.5",
    "core-js": "^2.6.8",
    "rxjs": "^6.5.2",
    "terser": "^4.0.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0-rc.4",
    "@angular/cli": "^8.0.0-rc.4",
    "@angular/compiler-cli": "^8.0.0-rc.5",
    "@angular/language-service": "^8.0.0-rc.5",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "@types/webassembly-js-api": "^0.0.1",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.2",
    "ts-node": "^8.2.0",
    "tslint": "^5.16.0",
    "typescript": "^3.4.5"
  }
ERROR in ./wasm/fibonacci.js
Module not found: Error: Can't resolve 'fs' in '/Users/temp/wasm/angular-wasm/wasm'
ERROR in ./wasm/fibonacci.js
Module not found: Error: Can't resolve 'path' in '/Users/temp/wasm/angular-wasm/wasm'
ERROR in ./wasm/fibonacci.wasm (./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm)
Module parse failed: magic header not detected
You may need an appropriate loader to handle this file type.
Error: magic header not detected
    at new CompileError (/Users/temp/wasm/angular-wasm/node_modules/@webassemblyjs/helper-api-error/lib/index.js:40:109)
    at parseModuleHeader (/Users/temp/wasm/angular-wasm/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:287:13)
    at Object.decode (/Users/temp/wasm/angular-wasm/node_modules/@webassemblyjs/wasm-parser/lib/decoder.js:1681:3)
    at decode (/Users/temp/wasm/angular-wasm/node_modules/@webassemblyjs/wasm-parser/lib/index.js:248:21)
    at WebAssemblyParser.parse (/Users/temp/wasm/angular-wasm/node_modules/webpack/lib/wasm/WebAssemblyParser.js:74:19)
    at doBuild.err (/Users/temp/wasm/angular-wasm/node_modules/webpack/lib/NormalModule.js:460:32)
    at runLoaders (/Users/temp/wasm/angular-wasm/node_modules/webpack/lib/NormalModule.js:342:12)
    at /Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at VirtualFileSystemDecorator.readFile (/Users/temp/wasm/angular-wasm/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:42:13)
    at processResource (/Users/temp/wasm/angular-wasm/node_modules/loader-runner/lib/LoaderRunner.js:202:11)
ERROR in ./wasm/fibonacci.wasm (./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm)
WebAssembly module is included in initial chunk.
This is not allowed, because WebAssembly download and compilation must happen asynchronous.
Add an async splitpoint (i. e. import()) somewhere between your entrypoint and the WebAssembly module:
* multi (webpack)-dev-server/client?http://0.0.0.0:0/sockjs-node ./src/main.ts --> ./src/main.ts --> ./src/app/app.module.ts --> ./src/app/wasm.service.ts --> ./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm
* ... --> ./src/app/app.module.ts --> ./src/app/app.component.ts --> ./src/app/wasm.service.ts --> ./node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!./wasm/fibonacci.wasm
ERROR in chunk main [initial]
0a82e76cb3c2448ef8ce.module.wasm
/Users/temp/wasm/angular-wasm/node_modules/file-loader/dist/cjs.js?name=wasm/fibonacci.wasm!/Users/temp/wasm/angular-wasm/wasm/fibonacci.wasm
unexpected end
LukasMarx commented 5 years ago

Hi,

thanks for opening this issue! I would not have noticed otherwise...

I was able to reproduce the problem with angular 8.0.0 (official release). Unfortunately, we are not the only ones having this problem and there seems to be no clean fix yet: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-495038091

Seems like the problem is that webpack is trying to import 'fs' even though it is only used behind a ENVIRONMENT_IS_NODE flag in the actual code.

I have no idea how to fix this properly...