Aliasing react as preact throws Cannot find module: 'react/jsx-runtime'

Dont use the guide I linked, it is old- use the one in the answer instead

I am attempting to switch from react to preact by following their guide. I change webpack.config.js alias to add:

  alias: {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    .....

However when I run npm run build I keep getting:

Failed to compile.

.\src\index.tsx
Cannot find module: 'react/jsx-runtime'. Make sure this package is installed.

I have tried:

• changing the tsconfig as suggested here: create-react-app typescript won't run npm start. Didnt seem to help. I eventually left it as the original: "jsx": "react-jsx"

• confirming my dependencies are the latest ones:

  "@types/node": "^14.14.35",

  "@types/react": "^17.0.3",

  "@types/react-dom": "^17.0.3",

  "typescript": "^4.2.3",

• removing and reinstalling node_modules

• converting index.js to index.tsx

• adding preact exports to package.json like this github suggested: https://github.com/babel/babel/issues/12210#issuecomment-712043796

When I comment out the alias changes in the preact guide everything works fine. Happy to include more info, I'm not sure whats relevant however.

Heres the verbose error log from npm run build:

13 verbose stack Error: website@0.2.5 build: `node scripts/build.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)