Non-Typescripts imports failing when trying to incrementally convert to Typescript

Question

So, we have decided to start converting our react app to Typescript. The plan is to do this gradually. From what I read online this shouldn't be an issue but, I have come across a problem when trying to convert over my "leaf-level" classes. So, here's my problem. My classes look like this:

ModelClassA.ts

export default class ModelClassA{ }

ModelClassAFactory.js

import {ProdTour}  from './ProdTour';

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "jsx": "preserve",
    "allowJs": false,
    "moduleResolution": "node",
    "lib": [
      "dom", 
      "es7"
    ]},
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

webpack.js

module.exports = {
    entry: {
        'app': ["./scripts/EntryPoint.jsx", './Content/main.scss']
    },
    resolve: {
        extensions: [".js", ".jsx", ".tsx", "ts"]
    },
    output: {
        path: __dirname + "/Scripts",
        filename: "[name].js"
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
    module: {

        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{ loader: 'css-loader', options: {sourceMap: true, minimize: process.env.NODE_ENV === 'production' } }, 'sass-loader']
                })
            },
            {
                test: /\.jsx?$/,
                use: [{
                    loader: "babel-loader"
                }],
                exclude: /node_modules/
            },
            {
                test: /\.tsx?$/,
                use: [
                    {
                        loader: "babel-loader"
                    },
                    {
                        loader: "ts-loader",
                    }
                ]
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '../Content/main.css',
            allChunks: true
        })
    ]
};

I get this error when running webpack:

ERROR in ./scripts/Models/ModelClassAFactory.js Module not found: Error: Can't resolve './ModelClassA' in 'C:\Source\scripts\Models\' @ ./scripts/Models/ModelClassAFactory.js 8:16-37 @ ./scripts/Components/SomeComponent/SomeReducer.js @ ./scripts/EntryPoint.jsx @ multi ./scripts/EntryPoint.jsx ./Content/main.scss

The error makes sense. The import on ModelClassAFactory file is looking for ModelClassA.js which has to be compiled from the .ts file. Any help would be appreciated!

EDIT: As per the code review by @TylerSebastian it was pointed out I was missing the "." on the "ts" in the extensions list [".js", ".jsx", ".tsx", "ts"].

Answer 1

you're missing a . in your extensions webpack config extensions: [".js", ".jsx", ".tsx", "ts"]. ts should be .ts