cannot use .js file in a react tsx project

Question

So I have a typescript project (.tsx) this is actually a SharePoint Framework project (SPFx) but decided to post it here since this involves typescript in general.

My main file is a.tsx, and I have a component that is created in.JS (.js file extension). I want to import this component to my project, however, I am faced with an issue

Module parse failed: Unexpected token (30:4) File was processed with these loaders: ./node_modules/source-map-loader/index.js You may need an additional loader to handle the result of these loaders.

How can I import or use a.js component in my.tsx react project without converting the.js to tsx?

based on the error, it seems I need additional loaders, what should I do? thank you!

Here's my tsconfig

Answer 1

Update your tsconfig.json file with

...
  "compilerOptions": {
    "allowJs": true
...

so you basically add a allowJs property to compilerOptions object in your tsconfig.json file.