Importing TypeScript types outside of src in React

Question

I have been working on a React + Express project lately which has a project file structure like this:

Repo
  |--ExpressApp
      |--src/..
  |--Common
      |--types.ts
  |--ReactApp
      |--src/..

So the express app lives within the ExpressApp folder, the react app lives within the ReactApp folder, and inside of Common are a set of Typescript types that are shared between the express and react applications.

The react application is a create-react-app project, and I have read issues associated with importing files that reside outside of the react apps src directory. However, in the React application, I seem to be able to import the types that are specified from the Common/types.ts into the React application without any problem.

/** Common/types.ts */

// This imports ok to React app even though its outside of the src directory
export type Person {
 id: string,
 name: string,
 role: string
};

// This does not import into React app, as it is outside of the source directory
export const smapleFunction = () => {
  ...
}

/** ReactpApp/src/app.ts */

// This is accepted by React
import { Person } from '../../common/types';

// This is not accepted by React
import { sampleFunction } from '../../common/types';

If I was to export a function from the Common/types.ts file and use it within the React application, then react throws the expected error that files must reside within the src directory - however, no issue is found when importing types, interfaces etc.

Could somebody please explain why this seems to be work for typescript types residing outside of src, but not for functions or other modules? I'm assuming it has something to do with how Typescript is handled within a CRA project, but I don't quite understand the process?

The code can reside outside src/ and still be imported/compiled. Path mapping supports it. Practical example: Crisp React. I'm the author. — winwiz1
– winwiz1, Commented Aug 26, 2020 at 8:52
@winwiz1 This seems to work, but the output of the /dist folder, mimics the folder structure of the monorepo instead of the the root project. If that makes sense, any ideas? — conor909
– conor909, Commented Dec 8, 2021 at 16:46

AdamExchange · Accepted Answer · 2020-08-26 02:00:16Z

1

Types and Interfaces are not compiled, so they are essentially removed as the first part of the build process, and the build can keep on going. But the rest of the build process depends on all the code existing in the src folder, and the common function code (which is compiled) does not exist in that directory.

answered Aug 26, 2020 at 2:00

AdamExchange

1,3091 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing TypeScript types outside of src in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related