Module not found: Can't resolve 'perf_hooks' & 'module'

[GiustiRo]

Hi MLC team,

I've cloned and run your examples locally and they are working OK!

However, when I'm using your npm package inside a TS framework (Angular for instance), this error is showing up..

Error: Module not found: Error: Can't resolve 'perf_hooks'
Error: Module not found: Error: Can't resolve 'module'

What I've tried:
-Giving TS path aliasses.
-Updating your index.js file to remove this imports (not getting why, but the error persists.)
-Using different Builders (angular-devkit / custom-webpack)
-Installing @types/node devDependency as the perf_hook is used by node.

Do you know why this happens? It's a conflict because you've built in on top of parcel or rollup?..

Steps to reproduce:
Create a blank Angular project, install the library, import it and try to use it.

Thank you!

[GiustiRo]

Here are some reproductions in Stackblitz:
Angular
React
Typescript

[GiustiRo]

Solved adding the following to package.json

"browser": {
    "fs": false,
    "path": false,
    "perf_hooks": false,
    "stream": false,
    "stream-browserify": false,
    "constants": false,
    "module": false,
    "os": false,
    "process": false,
    "util": false,
    "assert": false
  }

https://bobbyhadz.com/blog/module-not-found-cant-resolve-fs
https://thecodersblog.com/polyfill-node-core-modules-webpack-5

[DavidGOrtega]

@GiustiRo unfortunately your solution is not working for me. Tried react, expo and vanilla webpack

[DavidGOrtega]

I was able to make it work changing webpack.config.js

const path = require("path");

module.exports = {
  entry: "./index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "Q.js",
    library: "Q",
    libraryTarget: "var",
  },
  mode: "production",

  resolve: {
    fallback: {
      fs: false,
      path: false,
      os: false,
      perf_hooks: false,
    }
  }
};

[tqchen]

cc @CharlieFRuan @sudeepag . Maybe we should include some of these comments in the webllm documents.

[DavidGOrtega]

I think that the real fix should be not use perf_hooks in TVMjs or generate two versions, one node and one for the browser.
There are so many build pipelines that are going to suffer a lot with this. Im suffering right now with metro.
Nothing works 😞
@tqchen @CharlieFRuan

[tqchen]

We can indeed remove the perf_hooks part, by doing the following thing

• https://github.com/apache/tvm/blob/main/web/src/compact.ts#L29
• https://github.com/apache/tvm/blob/main/web/src/compact.ts#L43

Change these two if branches as direct throw Error stating that we are in nodejs env and as of now these compact features are not enabled. They should be fine since the two features are not used in local nodejs testing.

I am not too sure about the emscripten generated polyfill however, since the modules like fs, path, os, are part of emscripten polyfill and likely it is harder to remove those. @DavidGOrtega if you can try and manually get rid of the perf_hooks and ws only and see if it works. If so, maybe we could try to proceed with the motion

[DavidGOrtega]

I think its just suffices checking if we are in nodejs, let me try it

[CharlieFRuan]

Thanks for all the discussion and contribution. This should be addressed in npm 0.2.36. The following code snippet in https://jsfiddle.net/ should work with no setups:

// See https://www.npmjs.com/package/@mlc-ai/web-llm documentation.
import * as webllm from 'https://esm.run/@mlc-ai/web-llm';

async function main() {
  const initProgressCallback = (report) => {
    console.log(report.text);
  };
  const selectedModel = "TinyLlama-1.1B-Chat-v0.4-q4f16_1-1k";
  const engine = await webllm.CreateEngine(
    selectedModel,
    {
      initProgressCallback: initProgressCallback
    }
  );

  const reply0 = await engine.chat.completions.create({
    messages: [{
      "role": "user",
      "content": "Tell me about Pittsburgh."
    }]
  });
  console.log(reply0);
  console.log(await engine.runtimeStatsText());
}

main();