create-react-app --typescript How to import ts files outside of SRC files

[1111mp]

this is my tsconfig.json:

{
  "extends": "./paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src",
    "**/*.ts",
    "**/*.tsx"
  ]
}

config-overrides.js:

const { override, fixBabelImports, addWebpackAlias, removeModuleScopePlugin, setWebpackTarget } = require('customize-cra');
const path = require('path');
module.exports = override(
    removeModuleScopePlugin(),
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    }),
    addWebpackAlias({
        ["@"]: path.resolve(__dirname, "./src"),
        ["renderer"]: path.resolve(__dirname, "./renderer-process")
    }),
    setWebpackTarget('electron-renderer')
)

paths.json:

{
	"compilerOptions": {
		"baseUrl": ".",
		"paths": {
			"@/*": ["src/*"],
			"renderer/*": ["renderer-process/*"]
		}
	}
}

I can import js file from outside src, but not ts file. I need help, plz.

[DzmitryBiruk]

Hi I had the same problem with monorepo
Here is my solution

yarn add --dev react-app-rewired customize-cra

"scripts": {
    "start": "react-app-rewired start"
  },

config-overrides.js

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

module.exports = override(
  removeModuleScopePlugin(),
  babelInclude([path.resolve("src"), path.resolve("../packages/login-ui/src"), path.resolve("../packages/common/src")])
);

And I didn't change my tsconfig.json for this.

{
  "compilerOptions": {
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "rootDir": "src",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "alwaysStrict": false,
    "strictFunctionTypes": false,
    "strictPropertyInitialization": false,
    "lib": ["esnext", "dom"]
  },
  "include": ["src"]
}

---

Next issue i faced was two versions of React in one bundle.
I fixed by adding workspaces to package.json

"workspaces": [
    "../packages/login-ui",
    "../packages/common"
  ],

[heyimalex]

Closing this as we don't support react-app-rewired, but hopefully @BirukDmitry's solution works!