Webpack tries to parse .ts files as .js even when .ts is first in in the resolve.extensions list

Question

One of my dependencies has .ts files and .js files side by side with the same names, other than the extensions. Webpack is getting parser errors for the .ts files, and the errors are always where a typescript specific construct is introduced, so I assume it's the javascript parser that's emitting the errors. Running npx tsc will cause everything to compile just fine, so I know the source is all valid.

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    mode: 'development',
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'output management'
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    node: {
        fs: 'empty'
    }
};

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "es6",
    "allowJs": false,
    "sourceMap": true,
    "outDir": "./dist/",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

package.json:

{
  "name": "kalaio",
  "version": "1.0.0",
  "description": "Kalaio Web App",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "author": "MrZoraman",
  "license": "Zlib",
  "dependencies": {
    "imgui-js": "git+https://github.com/MrZoraman/imgui-js.git"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "three": "^0.104.0",
    "ts-loader": "^6.0.0",
    "typescript": "^3.4.5",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

index.ts:

import './main.ts';

main.ts:

import { WebGLRenderer } from 'three/src/Three';

import * as ImGui from "imgui-js";
// import * as ImGui_Impl from 'imgui-js/example/imgui_impl';

import { bar } from './foo';

main().catch(err => console.log(err));

async function main() : Promise<void> {
    bar();

    await ImGui.default();
    var renderer = new WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    //   ImGui_Impl.Init(renderer.domElement);
}

foo.ts:

export function bar() {
    console.log("Test!");
}

And this is my error message:

ERROR in ./node_modules/imgui-js/imconfig.ts 42:40
Module parse failed: Unexpected token (42:40)
You may need an appropriate loader to handle this file type.
| //---- Pack colors to BGRA8 instead of RGBA8 (if you needed to convert from one to another anyway)
| //#define IMGUI_USE_BGRA_PACKED_COLOR
> export const IMGUI_USE_BGRA_PACKED_COLOR: boolean = false;
| 
| //---- Implement STB libraries in a namespace to avoid linkage conflicts (defaults to global namespace)
@ ./node_modules/imgui-js/imgui.js 146:0-37 889:32-66 891:32-66
@ ./src/main.ts
@ ./src/index.ts

The token at 42:40 is the colon.

I've tried both ts-loader and awesome-typescript-loader but they both give the same errors.

If I remove the

resolve: {
    extensions: ['.tsx', '.ts', '.js']
},

from webpack.config.js, then the modules are imported and compiled successfully. However, then import { bar } from './foo'; stops working. The error:

ERROR in ./src/main.ts
Module not found: Error: Can't resolve './foo' in 'C:\Users\Hiiro\Development\KalaioThree\src'
@ ./src/main.ts 12:0-28 16:8-11
@ ./src/index.ts

Thus, a "working" solution is to have all of my source code in main.ts. This is definitely not an ideal solution though. I want to be able to use typescript modules and import my own typescript files.

Answer 1

It turns out it was because I was excluding the /node_modules/ folder:

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/
        }
    ]
}

Removing that line allowed webpack to give me better error output and lead me towards resolving the problem.

For the sake of completeness and people finding this question from google, my solution ended up being to add this to my webpack.config.js:

resolve: {
    extensions: ['.js', '.tsx', '.ts']
},

Having the .js entry as the first one is important, as it prevents the ts-loader from trying to parse the .ts files that are in the module, which is generally not recommended.