The keyword 'interface' is reserved when using lerna

Question

I had a react project created using create-react-app which I am now trying to convert to a monorepo architecture. I moved all the independent code in one package, package1 and the rest of the code (along with App.tsx and index.tsx) in another, package2. Also I have added the dependency of package1 in package2.

However, when I try to do yarn start in the second package, I get this error:

Module parse failed: The keyword 'interface' is reserved (11:0) 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

What is it that I am doing wrong in the setup which is causing me this error?

Answer 1

run yarn add -W craco within lerna project and add this to your craco.config.js file within package2

const path = require('path');
const { getLoader, loaderByName } = require('@craco/craco');

const packages = [
  path.join(__dirname, '../package1')
];

module.exports = {
  webpack: {
    configure: (webpackConfig, arg) => {
      const { isFound, match } = getLoader(
        webpackConfig,
        loaderByName('babel-loader')
      );
      if (isFound) {
        const include = Array.isArray(match.loader.include)
          ? match.loader.include
          : [match.loader.include];

        match.loader.include = include.concat(packages);
      }
      return webpackConfig;
    }
  }
};

and change your package.json file

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }

Answer 2

It seems that it is related to tsconfig file.

so change jsx option in tsconfig.json from "preserve" to "react".