I am currently facing a challenge with my React and JavaScript project as I attempt to integrate an npm module developed with TypeScript. The issue lies in configuring my project to compile the TypeScript code from this module, resulting in the error message:
Module parse failed: The keyword 'interface' is reserved (7:0)
File was processed with these loaders:
* ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ./node_modules/source-map-loader/dist/cjs.js
I believe that adding a loader to compile the TypeScript code would resolve this problem.
Despite having installed TypeScript and partially configured it for use with both TypeScript and JavaScript in my project, I have encountered difficulty in compiling the TypeScript code from the node_modules folder. Although copying the code from the module directly into my source folder worked successfully, I aim to find a more conventional solution.
Any suggestions or ideas would be greatly appreciated!
The dependencies in my project are as follows:
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.1.1",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"module-made-in-typescript": "module-made-in-typescript",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.1",
"ts-loader": "^9.4.2",
"typescript": "^4.9.5"
}
This is my current tsconfig.json file:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"jsx": "react",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["./src/**/*", "./node_modules/module-made-in-typescript/src/**/*"]
}
In addition, I lack a webpack configuration file and unsure about incorporating one into an existing React project. I strongly believe that defining one and configuring the necessary loader within can potentially solve this issue, but I'm seeking guidance on how to do so.
Your assistance and insights would be greatly valued! :D