React import problem, 'Module not found: Can't resolve' while import package wechaty

[pinoudliu]

Then when I try to integrate "wechaty" with react, it failed to compile and report errors: Module not found: Can't resolve'

// Code in App.js

import { WechatyBuilder, ScanStatus, log} from "wechaty"
When I run npm start/yarn start, the error message appears

Failed to compile.

./src/App.js Module not found: Can't resolve 'wechaty' in 'D:\git\chat-client\src'

I guess it may be because there is no 'module' field in the package.json of 'wechaty', so I add that field.

`"module": "./dist/esm/src/mods/mod.js",

The problem do disappeared. But it still cannot resolve sub modules.

Failed to compile.

./node_modules/wechaty/dist/esm/src/mods/mod.js Module not found: Can't resolve 'wechaty-puppet/helpers' in 'D:\git\chat-client\node_modules\wechaty\dist\esm\src\mods' Compiling... Failed to compile.

Even worse is that 'wechaty' has many dependence packages, and all the dependence packages have the same problem.

For more detail description, please check at StackOverflow:

[huan]

Hi @pinoudliu ,

It's great to know that you want to integrate wechaty with react! Using Wechaty in a web project is a big plan that I want to support for a long time.

For your question, I do apologize for the missing module entrance in our package.json, and yes, after we have upgraded to the ESM, almost all module entrances have been removed from our Wechaty ecosystem NPM modules.

I do this is because according to the spec of the NPM package.json, there has no module at all, and after removing the module, all modules work without any problem with the Node.js 16 CJS & ESM.

I have searched the module in package.json and here's a StackOverflow discussion about it, and it looks mostly highly depends on your building tools.

I'm not very familiar with the web build tools, as far as I know, is that the current version of the package.json works with Node.js.

So could you please help me to provide some more articles to introduce about the module in package.json, to help me understand that:

1. Is there a way to make the current version of Wechaty work with the build tools without adding the module entrance? (because we have already put the export entrance in it)
2. If the export is not enough, why? what's the reason that the web build tool can not support it?
3. Can we use browser entrance to support the Web build tools? It seems the browser is the spec standard entrence.

I'd like to fix it for you after we have enough knowledge about it, and PR is welcome.

Resources

• Webpack and Rollup: the same but different

[dosubot]

Hi, @pinoudliu. I'm Dosu, and I'm helping the wechaty team manage their backlog. I wanted to let you know that we are marking this issue as stale.

From what I understand, you encountered an issue when trying to import the "wechaty" package in a React project. The error message "Module not found: Can't resolve" was reported. You suspected that the problem was due to a missing 'module' field in the package.json of 'wechaty'. The maintainer, huan, acknowledged the missing 'module' field and explained that it has been intentionally removed from the Wechaty ecosystem NPM modules. They asked for more information on how the web build tools work and suggested using the 'browser' entry point to support web build tools.

If this issue is still relevant to the latest version of the wechaty repository, please let us know by commenting on this issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days.

Thank you for your understanding and contribution to the wechaty community. Let us know if you have any further questions or concerns.