Error: Package path ./hooks is not exported from package react

[abaisero]

Hi!

I'm trying to use Shudan within a simple React app, using the info found in other issues, I figured I could use Shudan with React by aliasing preact/react, which I did, but I'm still encountering a problem. It seems like Vertex.js tries to import from preact/hooks, which doesn't seem to exist in React. I'm a bit of a noob, and I'm using this project idea both as a means to develop a cool utility and to learn about React itself, so I might be missing something simple.

Here's the error when I start the app:

> endgame-app@1.0.0 start
> webpack serve --config ./webpack.config.js --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.16.101.214:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/home/bais/Downloads/endgame-app/public' directory
asset bundle.js 1.4 MiB [emitted] (name: main)
runtime modules 27.4 KiB 13 modules
modules by path ./node_modules/ 1.26 MiB
  modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
  modules by path ./node_modules/@sabaki/shudan/src/*.js 25.7 KiB 9 modules
  modules by path ./node_modules/webpack/hot/*.js 4.59 KiB 4 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB 4 modules
  modules by path ./node_modules/react-dom/ 1000 KiB 3 modules
  modules by path ./node_modules/react/ 85.7 KiB 2 modules
  modules by path ./node_modules/scheduler/ 17.3 KiB 2 modules
  + 3 modules
modules by path ./src/ 913 bytes
  ./src/index.js 250 bytes [built] [code generated]
  ./src/components/App.jsx 663 bytes [built] [code generated]

ERROR in ./node_modules/@sabaki/shudan/src/Vertex.js 2:0-43
Module not found: Error: Package path ./hooks is not exported from package /home/bais/Downloads/endgame-app/node_modules/react (see exports field in /home/bais/Downloads/endgame-app/node_modules/react/package.json)
 @ ./node_modules/@sabaki/shudan/src/Goban.js 16:0-33 158:16-22
 @ ./node_modules/@sabaki/shudan/src/main.js 1:0-31 4:0-31
 @ ./src/components/App.jsx 6:16-41
 @ ./src/index.js 3:0-35 6:46-49

webpack 5.75.0 compiled with 1 error in 1903 ms

Thanks in advance for the assistance, Shudan is really cool!

[abaisero]

I'll add that I can understand that maybe there isn't really a strong will to maintain full compatibility with both React and Preact; so if that is the situation, I don't really have any strong qualms switching to using Preact myself to avoid the issue altogether.

[yishn]

You would need to add an alias to your webpack configuration to point preact/hooks to react instead

[abaisero]

Finally got back to trying this, and yes that works, thanks!

To be clear to anybody facing the same issue, I had to add an alias for both prect and preact/hooks pointing to react.

[jin-li]

Finally got back to trying this, and yes that works, thanks!

To be clear to anybody facing the same issue, I had to add an alias for both prect and preact/hooks pointing to react.

Can I ask how you added an alias for both preact and preact/hooks pointing to react? I added a configuration file named "webpack.config.js":

module.exports = {
    // ...
    resolve: {
        alias: {
        preact: "react",
        "preact/hooks": "react",
        },
    },
};

But I got following error:

> @sabaki/shudan@1.7.1 build-demo-react
> webpack --config ./webpack.config.js --entry ./demo/main.js -o ./demo --output-filename bundle.js --progress --mode production

[webpack-cli] Failed to load '/home/lijin/Documents/GitHub/Shudan/webpack.config.js' config
[webpack-cli] ReferenceError: module is not defined
    at file:///home/lijin/Documents/GitHub/Shudan/webpack.config.js:1:1
    at ModuleJob.run (internal/modules/esm/module_job.js:145:37)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
    at async WebpackCLI.tryRequireThenImport (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:213:26)
    at async loadConfigByPath (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1404:27)
    at async Promise.all (index 0)
    at async WebpackCLI.loadConfig (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1454:35)
    at async WebpackCLI.createCompiler (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1785:22)
    at async WebpackCLI.runWebpack (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1890:20)
    at async Command.<anonymous> (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:912:21)

I searched this error on Google and found a post on Stackoverflow https://stackoverflow.com/questions/68795696/webpack-cli-referenceerror-require-is-not-defined. It seems I should convert the webpack.config.js to common JS. So I changed it to:

export const resolve = {
    alias: {
        "preact": "react",
        "preact/hooks": "react",
    },
};

But it still didn't work, now I got another error:

> @sabaki/shudan@1.7.1 build-demo
> webpack --entry ./demo/main.js -o ./demo --output-filename bundle.js --progress --mode production

[webpack-cli] TypeError: Cannot read property 'then' of undefined
    at WebpackCLI.isPromise (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:26:29)
    at loadConfigByPath (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1433:26)
    at async WebpackCLI.loadConfig (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1510:38)
    at async WebpackCLI.createCompiler (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1785:22)
    at async WebpackCLI.runWebpack (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1890:20)
    at async Command.<anonymous> (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:912:21)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/home/lijin/Documents/GitHub/Shudan/node_modules/webpack-cli/lib/webpack-cli.js:1372:13)

I also tried to update the webpack-cli to latest, but it still didn't work.

I would very much appreciate it if you can tell me how you solved the issue. Thank you!