Import js in tsx files

Question

I want to include a JS file into my TSX file. I created this project using yo @microsoft/sharepoint

The js file

import * as React from "react";

export default class AutocompleteText extends React.Component {
  constructor(props){
    super(props);
    this.items = [
      "David",
      "Daniel",
      "Sarah",
      "Jane"
    ];

  }
   render (){
      return (
          <div>
              <input type="text" />
              <ul>
                 {this.items.map((items)=> <li>
                 {items}
                   </li>
                   )}
              </ul>

          </div>

        );
  }
}

The Tsx file

import * as React from 'react';
import styles from './A.module.scss';
import { IAProps } from './IAProps';
import { escape } from '@microsoft/sp-lodash-subset';
import AutocompleteText from './autocompletetext';
export default class A extends React.Component<IAProps, {}> {
  public render(): React.ReactElement<IAProps> {
    return (
      <div className={ styles.a }>
        <div className={ styles.container }>
          1234
         <AutocompleteText/>
        </div>
      </div>
    );
  }
}

my tsconfig.json

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-3.3/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "strictNullChecks": false,
    "noUnusedLocals": false,
    "allowJs": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]
  },
  "include": [
    "src/**/*.ts", "src/webparts/a/components/autocompletetext.js"
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

my tslint.json I added

  "jsRules": {
    "no-empty": true
  } 

I got error

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.
|    render (){
|       return (
>           <div >
|               <input type="text" />
|               <ul>

Answer 1

You can rewrite it as autocompletetext.tsx and it should work without needing to modify tsconfig:

import * as React from "react";

export default class AutocompleteText extends React.Component {
  private items = [
      "David",
      "Daniel",
      "Sarah",
      "Jane"
    ];
  constructor(props){
    super(props);
  }

   render (){
      return (
          <div>
              <input type="text" />
              <ul>
                 {this.items.map((items)=> <li>
                 {items}
                   </li>
                   )}
              </ul>

          </div>

        );
  }
}