Search code examples
javascriptreactjspreactcraco

`craco start` not compiling, `craco build` does

Context

I've recently switched my CRA dictionary application to Preact using craco. I've made this work using webpack aliases, which replace references to react packages with preact packages (e.g. preact/compat).

What happens when I run...

craco build

I get no errors and the build successfully completes, and you can see the folder here:

folder structure showing build folder

Everything fine here.

craco start

It starts the predeployment checks (I think), and hits a snag very quickly. It can't find the react module.

$ yarn start
yarn run v1.22.17
$ craco start
craco:  *** Cannot find ESLint loader (eslint-loader). ***
E:\_Programming\js\Personal\dictionary-app\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: Cannot find module 'react'
Require stack:
- E:\_Programming\js\Personal\dictionary-app\node_modules\react-scripts\scripts\start.js
- E:\_Programming\js\Personal\dictionary-app\node_modules\@craco\craco\lib\cra.js
- E:\_Programming\js\Personal\dictionary-app\node_modules\@craco\craco\scripts\start.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at Object.<anonymous> (E:\_Programming\js\Personal\dictionary-app\node_modules\react-scripts\scripts\start.js:52:31)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at start (E:\_Programming\js\Personal\dictionary-app\node_modules\@craco\craco\lib\cra.js:202:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\_Programming\\js\\Personal\\dictionary-app\\node_modules\\react-scripts\\scripts\\start.js',
    'E:\\_Programming\\js\\Personal\\dictionary-app\\node_modules\\@craco\\craco\\lib\\cra.js',
    'E:\\_Programming\\js\\Personal\\dictionary-app\\node_modules\\@craco\\craco\\scripts\\start.js'
  ]
}
error Command failed with exit code 1.

Now of course, that shouldn't happen. I've

  1. defined in my tsconfig.json "skipLibCheck": true, which should stop the checking for libraries, and
  2. added webpack aliases to my craco.config.js file
module.exports = {
    webpack: {
        alias: {
            react: 'preact/compat',
            'react-dom/test-utils': 'preact/test-utils',
            'react-dom': 'preact/compat',
            'react/jsx-runtime': 'preact/jsx-runtime',
        },
    },
};

I have no idea why these aliases are working for the build command but not the start command. Any help would be appreciated.

Code and deployment

Github repo

Vercel deployment

Solution

  • You need to keep react installed, unfortunately. It's required by react-scripts for starting the dev server and is unavoidable without forking the package.

    If you're concerned about the alias working with React still being installed, you can comment out your config and compare build sizes. You should see a sizable difference, confirming your alias works as intended.