Changing source folder in CRA project with TypeScript

[zane-programs]

I am currently working on a project with a repository that will house both my backend (Node.js) and frontend (React + TypeScript) codebases. To be clear, this is something I'll be running on a Raspberry Pi in my home, so for this project I was planning to put both in one repository, with my React code living in a folder called client and my Node.js code living in server.

Because it's not natively possible to rename the src folder to client with create-react-app, I decided to use react-app-rewired to change that. First, I changed the compilation folder in tsconfig.json to client. Next, I put the following configuration in config-overrides.js:

const path = require("path");

module.exports = {
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, "client/index.tsx");
    paths.appSrc = path.resolve(__dirname, "client");
    return paths;
  },
};

This appears to work until I run sudo npm start, at which point I am presented with this nasty output:

> christmas-v2@0.1.0 start /Users/zooza310/Documents/GitHub/christmas-v2
> react-app-rewired start

internal/fs/utils.js:298
    throw err;
    ^

Error: ENOENT: no such file or directory, open '/Users/zooza310/Documents/GitHub/christmas-v2/src/react-app-env.d.ts'
    at Object.openSync (fs.js:465:3)
    at Object.writeFileSync (fs.js:1416:35)
    at verifyTypeScriptSetup (/Users/zooza310/Documents/GitHub/christmas-v2/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js:293:8)
    at Object. (/Users/zooza310/Documents/GitHub/christmas-v2/node_modules/react-scripts/scripts/start.js:31:1)
    at Module._compile (internal/modules/cjs/loader.js:1201:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/zooza310/Documents/GitHub/christmas-v2/src/react-app-env.d.ts'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! christmas-v2@0.1.0 start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the christmas-v2@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/zooza310/.npm/_logs/2020-12-11T00_32_49_838Z-debug.log

Oh, no! react-scripts is still looking for the file react-app-env.d.ts in the nonexistent src folder. I found that a temporary solution for this problem solution was to create an empty folder called src in the root directory and copy react-app-env.d.ts from client. Unfortunately, in terms of repository organization, this could become quite confusing.

Is there a way to direct react-scripts to look in my new appSrc path for the react-app-env.d.ts file, or is this uncharted territory?

[dawnmist]

The paths are set up in https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/paths.js

It looks like the react-app-env.d.ts path is under the variable name appTypeDeclarations, so you should be able to get this working by setting that variable in the paths config as well:

const path = require("path");

module.exports = {
  paths: function(paths, env) {
    paths.appIndexJs = path.resolve(__dirname, "client/index.tsx");
    paths.appSrc = path.resolve(__dirname, "client");
    paths.appTypeDeclarations = path.resolve(__dirname, "client/react-app-env.d.ts");
    return paths;
  },
};

Looking at the react-scripts paths.js file, three other variables that you should probably also be setting as they directly reference the src directory are testsSetup, proxySetup and swSrc. :)

[zane-programs]

Ah, phew. Totally my bad on this one—I should have taken a closer look there. Thank you very much!