Module parse failed: The keyword 'interface' is reserved (5:0) File was processed with these loaders

Question

It is my first time publishing package to NPM. I have published simple React + TypeScript component to NPM, but when I installed and tested it, I am getting the error below. I saw other Q&A but couldn't relate to my case. I watched Youtube videos, read articles about it but every tutorial is different. Is there any easy and common way to do it ?

Error

Module parse failed: The keyword 'interface' is reserved (5:0)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| import './styles/_index.scss'
| 
> interface Props {
|     children?: JSX.Element|JSX.Element[]
|     className?: string

package.json

"name": "react-burger-navimenu",
  "version": "0.1.0",
  "private": false,
  "main": "./src/components/Menu/Menu.tsx",
  "peerDependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.44",
    "@types/react-dom": "^17.0.15",
    "bootstrap": "^4.6.0",
    "react": "^18.0.0",
    "react-bootstrap": "^1.6.4",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "sass": "^1.50.0",
    "typescript": "^4.6.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npm run clean && tsc && cp package.json README.md ./dist",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "clean": "rm -rf dist"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "react-burger-navimenu": "^0.1.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "outDir": "./dist",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "declaration": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Answer 1

I had the same error when missing a react-typescript compiler in my bit.dev workspace where I created, built & uploaded the component.

Go to your source project root dir, do

 bit import bit.envs/compilers/react-typescript

After this, do the full round of compiling the source component and so on, publish it to bit.dev, and do

bit import

in the target workspace where you want to use the component. This should update your workspace compiler in the target project as well, then just update the component ('bit checkout ...'). After this you should be fine.