4

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?

RichaS
  • 219
  • 3
  • 14
  • Same issue here. I've been unable to solve with `webpack.config.js` or the solution below. (Not sure whether it has anything to do with lerna or not.) Any updates on this? – Sasgorilla Jul 10 '21 at 17:47
  • Specifically, I get this parsing error when trying to include a file like `foo.interface.ts`, containing a Typescript `Foo` interface. – Sasgorilla Jul 10 '21 at 17:53
  • Maybe this link will help you to resolve your issue: https://github.com/babel/babel-loader/issues/173 – Sanket Shah Jul 17 '21 at 17:50

2 Answers2

1

It seems that it is related to tsconfig file.

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

enter image description here

Hamid
  • 679
  • 1
  • 7
  • 22
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"
  }
Joshua Torres
  • 11
  • 2
  • Just adding here that this answer solved my problem. I use a monorepo without Lerna and added craco only to the react package. – Roy Prins Nov 30 '22 at 15:58