preact-cli uses incorrect config for aliasing react and react-dom

[karltaylor]

What is the current behaviour? A clear and concise description of what the bug is.

It seems as if the preact-cli is using the wrong config.resolve.alias for react and react-dom.

Following this guide, it said compat has moved to core, and that you must now use preact/compat instead of preact-compat, it also said "If you're using preact-cli than this step is already done for you 🎉".

However this does not seem to be the case.

Steps to Reproduce Steps to reproduce the behavior:

I have created a minimum reproducible example with the error and how I got around it. It is a simple preact-cli create repo with a react npm module react-intersection-observer.

1. Clone this repo karltaylor/preact-cli-mre
2. yarn dev to get it running, an error occurs stating that react-intersection-obvserver cannot find react:

Build failed!
✖ ERROR ../node_modules/react-intersection-observer/react-intersection-observer.m.js
Module not found: Error: Can't resolve 'react' in './node_modules/react-intersection-observer'
 @ ../node_modules/react-intersection-observer/react-intersection-observer.m.js 1:0-31 2:0-34 345:24-43 351:2-17 397:18-30 399:24-38 405:15-32 443:2-11
 @ ./components/header/index.js
 @ ./components/app.js
 @ ./index.js
 @ ../node_modules/preact-cli/lib/lib/entry.js

3. I ran $ touch preact.config.js and to check the current config:

export default (config, env, helpers) => {
  console.log(config);
};

// console.log(config)
// config.resolve.alias

    alias: {
      style: '/Users/karltaylor/code/studio206/preact-cli-mre/src/style',
      'preact-cli-entrypoint': '/Users/karltaylor/code/studio206/preact-cli-mre/src/index',
      url: '/Users/karltaylor/code/studio206/preact-cli-mre/node_modules/native-url',
      react: 'preact-compat',                     <------------- ⚠️ Here
      'react-dom': 'preact-compat',          <------------- ⚠️ and here 
      'preact-compat': 'preact-compat', 
      'react-addons-css-transition-group': 'preact-css-transition-group',
      'preact-cli/async-component': '/Users/karltaylor/code/studio206/preact-cli-mre/node_modules/@preact/async-loader/async.js'
    },

5. Updated preact.config.js to be:

export default (config, env, helpers) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    react: "preact/compat",
    "react-dom": "preact/compat",
  };

  console.log(config);
};

6. ran yarn dev and the project was able to compile

What is the expected behaviour?

The config to be correct / not error when using preact-cli create

Additional Info

What I found on my debugging journey (This happened deploying to vercel and they only let you use major versions of node (12.x and 14.x. But I discovered that it it works on node v12.16.3 (npm v6.14.9), and the config is this:

      react: '/Users/karltaylor/code/studio206/preact-cli-mre/node_modules/preact/compat',
      'react-dom': '/Users/karltaylor/code/studio206/preact-cli-mre/node_modules/preact/compat',
      'preact-compat': '/Users/karltaylor/code/studio206/preact-cli-mre/node_modules/preact/compat',
      'react-addons-css-transition-group': 'preact-css-transition-group',

However, using node v14.18.1 (npm v6.14.15), this config is the erroneous one:

      react: 'preact-compat',
      'react-dom': 'preact-compat',
      'preact-compat': 'preact-compat',

Please paste the results of npx preact-cli info here.

Environment Info:
  System:
    OS: macOS 12.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Safari: 15.1
  npmPackages:
    preact: ^10.3.2 => 10.6.1
    preact-cli: ^3.0.0 => 3.3.2
    preact-render-to-string: ^5.1.4 => 5.1.19
    preact-router: ^3.2.1 => 3.2.1

[developit]

This was likely a result of this change: https://github.com/preactjs/preact/pull/3320/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L70

... which made require.resolve('preact/compat/package.json') throw instead of resolving.

[rschristian]

@karltaylor Preact 10.6.2 has been released which will correct this issue.

[karltaylor]

@rschristian woop woop. That's awesome. Thank you so much, super quick fix!