create-react-app should allow TypeScript imports outside `src`

Is your proposal related to a problem?

Code reuse is a good thing. It is not uncommon that a backend and a frontend can use the same code, and live in the same repository. The need for sharing code is particularly strong with TypeScript type definitions, because developers on the backend and the frontend want to make sure that they are building against a common types.

Describe the solution you’d like

I don’t know the CRA internals, but maybe one of the following:

• Allow baseUrl to point outside . to enable absolute imports like `import * as foo from 'common/foo``.
• Enable relative imports outside src like import * as foo from '../../common/foo'.

Describe alternatives you’ve considered

There are work-arounds using a combination of third-party cra-patching libraries. They are tedious to setup though (I worked 3 evenings on coming up with a solution), potentially fragile, and the use case seems so fundamental that I’m very surprised that it is not to supported out-of-the-box.

[bluenote10]

I know that it is possible, as I have documented in the link.

However the process to get there is out of proportion. The area of working against the CRA defaults is quite a mess for a newbie, and because the settings of CRA are hidden, documentation is poor. I worked on the solution for 3 evenings, roughly 3 hours each. Isn’t it crazy to be stuck for such a long time on a basic configuration problem, not doing anything productive? I thought the idea of CRA was to get people going quickly. After spending 9 hours on solving a problem that seems to be a basic requirement and facing limitations that have no clear motivation at all, I thought I report my experience.

[ttaranov]

just to document react-app-rewired/customize-cra workaround for anyone looking for a solution:

• add external typescript source dependencies into project’s package.json

  "dependencies": {
...
    "component-ui": "file:./../component-ui",
...
  },

• install react-app-rewired and customize-cra and replace script build/start/test eact-app-rewired build/start/test
• add config-overrides.js into cra project’s root with

const {removeModuleScopePlugin, override, babelInclude, addWebpackAlias} = require("customize-cra");
const path = require("path");

module.exports = override(
  removeModuleScopePlugin(),
  addWebpackAlias({
...
    ["component-ui"]: path.resolve(__dirname, "../component-ui")
..
  }),
  babelInclude([
    path.resolve("src"),
    path.resolve("../component-ui/src")
  ])
);

with these changes, CRA starts detecting and building typescript codebases outside of the project src tree.