Webpack пытается разобрать .ts файлы как .js, даже если .ts находится первым в списке resol.extensions

Question

Одна из моих зависимостей имеет файлы .ts и .js рядом с такими же именами, кроме расширений.Webpack получает ошибки синтаксического анализатора для файлов .ts, и эти ошибки всегда возникают, когда вводится специфическая для машинописного текста конструкция, поэтому я предполагаю, что это синтаксический анализатор javascript, который генерирует ошибки.Запуск npx tsc приведет к тому, что все будет хорошо скомпилировано, поэтому я знаю, что источник действителен.

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!");
}

И это мое сообщение об ошибке:

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

Токен в 42:40 - это двоеточие.

Я пробовал оба ts-loader и awesome-typescript-loader но они оба выдают одинаковые ошибки.

Если я удаляю

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

из webpack.config.js, то модули импортируются и компилируются успешно.Однако тогда import { bar } from './foo'; перестает работать.Ошибка:

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

Таким образом, «рабочее» решение состоит в том, чтобы весь мой исходный код был в main.ts.Это определенно не идеальное решение, хотя.Я хочу иметь возможность использовать модули машинописи и импортировать свои собственные файлы машинописи.

Answer 1

Оказывается, это потому, что я исключил папку / node_modules /:

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

Удаление этой строки позволило веб-пакету улучшить вывод ошибок и привести меня к решению проблемы.

Для полноты картины и для того, чтобы люди нашли этот вопрос в Google, в итоге я решил добавить его в мой webpack.config.js:

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

Запись в формате .js в качестве первоговажно, поскольку он не позволяет ts-loader попытаться проанализировать файлы .ts, находящиеся в модуле, что обычно не рекомендуется.