wip

my-react-app/package.json

@@ -13,7 +13,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "typescript": "^4.0.2",
-    "react-scripts": "*"
+    "react-scripts": "*",
+    "will-work-on-ts-side-but-not-cra-side": "*"
   },
   "scripts": {
     "start": "react-scripts start",

my-react-app/src/App.tsx

@@ -5,13 +5,23 @@ import './App.css';
 // Works but requires a separate build step
 import { greeting } from './libs/my-lib/helloWorld';
 import { Foo } from './libs/my-react-lib/Some';
-// import { greeting as jsgreeting  } from './libs/my-lib/jshelloWorld';
 
-// Fails with: Module parse failed: Unexpected token (4:26) / You may need an additional loader to handle the result of these loaders.
-// import { greeting } from '../../my-lib/src/helloWorld'
+/**
+ On this import, typescript figure out package.json.main -> dist/index.js -> src/index.ts
+ This is not standard node resolution, but very a powerful feature  
+ So webpack can't resolve it
 
-// Fails because path aliases are ignored (?)
-// import { greeting } from '@my-lib/helloWorld'
+ So if you try to use `will_work_on_ts_side_but_not_cra_side` symbol in the code, it will fail
+*/
+import { will_work_on_ts_side_but_not_cra_side } from 'will-work-on-ts-side-but-not-cra-side';
+
+/**
+ On this import we help webpack & typescript to get the file directly, and both typescript & webpack can resolve it,
+ BUT CRA won't pass files outside of the app's root dir in babel-loader
+
+ So if you try to use `will_work_on_ts_side_but_not_cra_side` symbol in the code, it will fail
+*/
+import { will_work_on_ts_side_but_not_cra_side as alsoThisWillNotWork } from 'will-work-on-ts-side-but-not-cra-side/src/index';
 
 // Parameter 'imwillerror' implicitly has an 'any' type.ts(7006)
 // export function implicitAnyWillErrorHere(imwillerror) {
@@ -22,6 +32,10 @@ function App() {
   return (
     <div className="App">
       <header className="App-header">
+        {/* un-commenting the line below will break cra build: Can't resolve 'will-work-on-ts-side-but-not-cra-side'  */}
+        {/* <p>{will_work_on_ts_side_but_not_cra_side()}</p> */}
+        {/* un-commenting the line below will break cra build: Can't resolve 'Module parse failed: Unexpected token'  */}
+        {/* <p>{alsoThisWillNotWork()}</p> */}
         <p>{greeting(34563456)}</p>
         <p>
           <Foo />

my-react-app/tsconfig.json

@@ -25,6 +25,9 @@
     },
     {
       "path": "src/libs/my-react-lib"
+    },
+    {
+      "path": "../packages/will-work-on-ts-side-but-not-cra-side"
     }
   ]
 }

packages/will-work-on-ts-side-but-not-cra-side/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "will-work-on-ts-side-but-not-cra-side",
+  "version": "1.0.0",
+  "private": true,
+  "main": "dist/index.js",
+  "author": "Bnaya Peretz",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^4.0.3"
+  }
+}

packages/will-work-on-ts-side-but-not-cra-side/src/index.ts

@@ -0,0 +1,3 @@
+export function will_work_on_ts_side_but_not_cra_side(): string {
+  return 'will_work_on_ts_side_but_not_cra_side';
+}

packages/will-work-on-ts-side-but-not-cra-side/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "lib": ["ESNext"],
+    "emitDeclarationOnly": true,
+    "composite": true,
+    "isolatedModules": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "rootDir": "src",
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}