create-react-app: 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?

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 17
Comments: 15

Most upvoted comments

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

christiantakle on Jul 27, 2019

Any updates, workarounds are appreciated!

Soleksandr on May 28, 2019

update

[2019-07-01] improved file tree
[2019-07-02] I might have found a satisfactory solution – will post later if truly successful

Facing the same issue. I wanted a monorepo with https://www.typescriptlang.org/docs/handbook/project-references.html but create-react-app doesn’t like the raw typescript project and fails parsing.

I tried symlinking the project under the ./src of the project that wanted the dependency which gives me a similar error.

I did get something working where I output another package from typescript, using typescript project references and pnpm (https://pnpm.js.org/) :

.
├── package.json
├── packages
│   ├── A
│   │   ├── package.json
│   │   ├── tsconfig--reference.json
│   │   └── tsconfig.json
│   ├── A--build (.gitignore and inject `./<src-name>/package.json` with name changed to `<src-name>--build`)
│   └── B (depends on A--build)
│       ├── package.json
│       ├── tsconfig--reference.json
│       └── tsconfig.json (from `create-react-app`)
├── pnpm-workspace.yaml
└── tsconfig.json

However I gave up on the approach. Since I also have to inject a package.json file under the <package-name>--build folder which is an extra step and I lost many of the typing benefits of typescript such as editor support to edit the original source.

It would be nice to find a blessed solution to a typescript+react monorepo without ejecting from create-react-app.

christiantakle on Jul 2, 2019