Javascript typescript绝对路径不适用于js或jsx文件

编译react项目时，typescript文件无法解析任何具有js或jsx扩展名的文件，除非在使用绝对路径时显式指定了扩展名

文件夹结构：

• src
  • 常数
    • index.js
    • sample.js
  • 页数
    • component.tsx

TSConfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "alwaysStrict": true,
    "baseUrl": ".",
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": ["dom", "es2017"],
    "module": "esNext",
    "moduleResolution": "node",
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": false,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "paths": {
      "@pages/*": ["src/pages/*"],
      "@common/*": ["src/common/*"],
      "@components/*": ["src/components/*"]
    },
    "pretty": true,
    "strictNullChecks": true,
    "target": "es2015",
    "typeRoots": ["./node_modules/@types"]
  },
  "include": ["src/**/*"]
}

webpack.config.js

resolve: {
        modules: [
            path.join(directory.src, 'node_modules')
        ],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.css', '.scss'],
        plugins: [new TsConfigPathsPlugin({ configFile: path.resolve(directory.src, 'tsconfig.json') })]
    },

module: {
        rules: [
            {
                test: /\.(jsx|js)$/,
                enforce: 'pre',
                loader: 'source-map-loader',
                exclude: /node_modules/
            },
            {
                test: /\.(jsx|js|ts|tsx)?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.ts(x?)$/,
                include: path.resolve(directory.src, './src'),
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'thread-loader'
                    },
                    {
                        loader: 'babel-loader'
                    },
                    {
                        loader: 'ts-loader',
                        options: {
                            happyPackMode: true,
                            transpileOnly: true,
                            experimentalWatchApi: true,
                            configFile: currentTSConfig
                        }
                    }
                ]
            },
            //other modules

---

我不确定这里缺少什么，但是typescript似乎无法识别任何js或jsx文件，除非指定了扩展名。这似乎只有在使用绝对路径时才会出现问题。

您必须查看您首先使用的加载程序，因为它是由

ts加载程序

+

babel加载程序

组合而成的。babel加载程序本应使用其中一个来确定错误来自

balel

或

tsc

如果使用typescript，是否会出现错误只是为了检查你的项目？像

tsc--noEmit--project tsconfig路径

一样，更新了配置以只使用ts加载器。错误仍然会弹出。尝试使用以下步骤：我相信这可能会对您有所帮助。您必须先查看您使用的加载程序，因为它是由

ts加载程序

+

babel加载程序

组合而成的，应该使用其中一个来确定错误来自

balel

或

tsc

的位置。如果您使用了这些加载程序，是否会出现错误使用typescript只是为了检查你的项目？像

tsc--noEmit--project tsconfig路径

一样，更新了配置以只使用ts加载器。错误仍然会弹出。尝试使用以下步骤：我相信它可能会帮助您。

import { ElementIds } from '@common/constants'; // Doesnt work
import { ElementIds } from '@common/constants/index'; // Doesnt work
import { ElementIds } from '@common/constants/index.js'; // Works