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

[bluenote10]

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 on 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.

[getspooky]

Hi @bluenote10
You can disable this feature but only after eject operation of create-react-app project or use react-app-rewired package this way you do not have to eject.

[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]

+1, typescript should be enabled for outside the src folder by default. Or at least there has to be a way to import typescript dependencies by relative path in package.json - which seems to be currently impossible to do, without ejecting and pretty much losing any benefit of cra.

  "dependencies": {
    "@mycore-ui": "file:./../mycore-ui"
   }

I'd think this should work even if the mycore dependency above is in written in typescript

[CodingDive]

I agree that code sharing should be encouraged and easier as long as the import does not leave the repository.
Also related to #1333 which has yet to receive any update from a CRA maintainer.

[xinghul]

+1, I would say this is one of the deal-breakers for us, we have lots of shared components and utility functions/classes, and sharing them across multiple CRA projects has been more than painful.

Ofc we can hack our way through this, using things like react-app-rewired or craco, but it's not an ideal solution, and I'm curious to know why is this not supported out of the box?

[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.