Typescript: Can't import ts-files from npm symbolic link folder. "Need appropriate loader" error.

Hi. I’m trying to reuse some scripts among client app (based on CRA) and server (NodeJS, Typescript, ts-node as a runner). So I desided to move them in separate repo and import as separate package.

package.json of this package:

{        
      "name": "@app/package",
      "main": "./src/index.ts",
      "module": "./src",
      "source": "./src",
      "types": "./src",
       ...
}

It works fine in server app.

server tsconfig.json

{
  "compilerOptions": {
      "module": "commonjs",
      "esModuleInterop": true,
      "target": "es2017",
      "noImplicitAny": true,
      "moduleResolution": "node",      
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "sourceMap": true,
      "outDir": ".dist",
      "baseUrl": ".",
      "paths": {
          "*": [
              "node_modules/*",
              "/"
          ]
      },
      "typeRoots" : ["./server.d.ts"],
      "types": [
        "@types/node",
        "@types/express",
        "@types/dotenv"
      ]
  },
  "include": [
    "./**/*"
  ]
}

But I can’t make it work in CRA. Compiling fails with “Need appropriate loader” error.

Failed to compile.

 ../package/src/index.ts 11:18
 Module parse failed: Unexpected token (11:18)
 You may need an appropriate loader to handle this file type.
 | import { createGriderUtils, GriderUtils } from './utils';
 |
 > export const utils: GriderUtils = createGriderUtils();
 |
 | const builder: ShapeBuilder = new ShapeBuilder(utils);

clienttsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "downlevelIteration": true,
    "isolatedModules": true
  },
  "include": [
    "src"
  ]
}

What am I doing wrong?

[christiantakle]

@Toub heres an example of what we use now typescript-monorepo-with-create-react-app. The best part is that we didn’t have to eject.

Issues so far is you cannot share .css nicely from lib-packages since you manually have to import it. We don’t mind it since we focus on codifying our styling with https://emotion.sh.

I haven’t gotten it to work nicely with https://expo.io/ so it have its own process where I still have to symlink packages and use typescript to emit code that is consumed by expo.

Hope you can find this helpful.

[Soleksandr]

Any updates, workarounds are appreciated!