TSX files in adjacent yarn workspace packages result in Module parse failed: Unexpected token. You need an appropriate TypeScript loader

Describe the bug

react-scripts cannot load tsx files that are in adjacent yarn workspace packages.

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type

Did you try recovering your dependencies?

Yes, yarn --version 1.22.4

Environment

Environment Info:

  current version of create-react-app: 3.4.1
  running from /home/ty/.nvm/versions/node/v10.20.1/lib/node_modules/create-react-app

  System:
    OS: Linux 5.6 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i5-8305G CPU @ 2.80GHz
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.20.1/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 3.4.1

Current behavior

react-scripts can load TypeScript files with ts or tsx extensions when those files are located in the same ‘home’ package as react-scripts (the web package in the demo). react-scripts can load ts files in packages outside of the home package so long as the baseUrl parameter is set to ./ in tsconfig.json. react-scripts cannot load tsx files outside of the home package even if the jsx parameter is set to react.

Steps to reproduce

1. Initialize a yarn monorepo
2. Create a react app as a package in that monorepo with the typescript template create-react-app web --template typescript
3. Create a package components alongside the previously created web package and add typescript and a tsconfig.json
4. Add the components package to web’s dependencies.
5. In src/components create an index.ts file with a default export function that logs something to the console (i.e. no JSX).
6. Import that function in web and log to the console at run time.
7. Experience no error.
8. Change the src/components/index.ts to src/components/index.tsx and make the function run some JSX.
9. Update web to render the exported JSX function.
10. Experience the error.

Expected behavior

CRA should be able to import and run JSX (i.e. tsx) code from adjacent packages.

Actual behavior

CRA is only able to import and run ts code and not tsx code.

../components/src/index.tsx 4:2
Module parse failed: Unexpected token (4:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const App = () => (
>   <div>Hello world</div>
| );
|

Attempted Troubleshooting

I tried adding ts-loader using react-app-rewired but that resulted in an error where Typescript was emitting nothing, a result of CRA automatically setting the noEmit flag to true at compile time. Ejecting is a rabbit hole I never want to go down.

Reproducible demo

A demo of the bug is available at woodpav/server-side-react-typescript-monorepo#bug. As described it is a yarn workspace monorepo with two packages: Web and Components. Web contains react-scripts and Components contains JSX components. Both packages have a tsconfig.json that extends tsconfig.base.json.

To run the demo:

1. git checkout bug
2. yarn install
3. cd packages/web
4. yarn start

.
├── package.json
├── packages
│   ├── components
│   │   ├── package.json
│   │   ├── src
│   │   │   └── index.tsx
│   │   └── tsconfig.json 
│   └── web
│       ├── node_modules
│       ├── package.json
│       ├── public
│       │   ├── favicon.ico
│       │   ├── index.html
│       │   ├── manifest.json
│       │   └── robots.txt
│       ├── README.md
│       ├── src
│       │   ├── index.tsx
│       │   └── react-app-env.d.ts
│       └── tsconfig.json
├── tsconfig.base.json
└── yarn.lock

7 directories, 15 files

[iansu]

Importing uncompiled code from other packages in a monorepo is not currently supported by Create React App.

[Chandu]

I am using craco and this is what worked for me:

// File craco.config.js
const CracoLessPlugin = require('craco-less');
const path = require('path');
module.exports = {
  plugins: [
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          const oneOfRule = webpackConfig.module.rules.find(
            (rule) => rule.oneOf,
          );
          if (oneOfRule) {
            const tsxRule = oneOfRule.oneOf.find(
              (rule) => rule.test && rule.test.toString().includes('tsx'),
            );

            const newIncludePaths = [
              // relative path to my yarn workspace library  
              path.resolve(__dirname, '../../libs/domain/'),
            ];
            if (tsxRule) {
              if (Array.isArray(tsxRule.include)) {
                tsxRule.include = [...tsxRule.include, ...newIncludePaths];
              } else {
                tsxRule.include = [tsxRule.include, ...newIncludePaths];
              }
            }
          }
          return webpackConfig;
        },
      },
    },
  ],
};