Laravel 8中Laravel Mix与TypeScript的resources/js别名配置失效

错误信息 #

ERROR in ./resources/js/components/TestComponent/test.tsx 65:16-34
Module not found: Error: Can't resolve 'helpers' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in ./resources/js/components/TestComponent/test.tsx 66:30-72
Module not found: Error: Can't resolve 'components/TestComponent2/test2' in '/Users/codenathan/code/demo/resources/js/components/TestComponent'
Did you miss the leading dot in 'resolve.extensions'? Did you mean '[".*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]' instead of '["*",".wasm",".mjs",".js",".jsx",".json",".ts",".tsx"]'?

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 2:31-40
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(2,32)
      TS2307: Cannot find module 'helpers' or its corresponding type declarations.

ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx
./resources/js/components/TestComponent/test.tsx 3:27-60
[tsl] ERROR in /Users/codenathan/code/demo/resources/js/components/TestComponent/test.tsx(3,28)
      TS2307: Cannot find module 'components/TestComponent2/test2' or its corresponding type declarations.

当前配置文件 #

webpack.mix.js #

const mix = require('laravel-mix');
const path = require('path');

mix.alias({
        '@': path.resolve('resources/js'),
})

mix.js('resources/js/app.js', 'public/js')
    .ts('resources/js/components/TestComponent/test.tsx', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).react();

tsconfig.json #

{
    "compilerOptions": {
        "outDir": "lib",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "lib": [
            "dom",
            "dom.iterable"
        ],
        "downlevelIteration": true,
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "baseUrl": ".",
        "paths": {
           "*": ["resources/js"],
        }
    },
    "include": [
        "./resources/js/**/*.ts",
        "./resources/js/**/*.tsx",
    ]
}

项目资源结构 #

resources/js/
├── app.js
├── bootstrap.js
├── components
│   ├── TestComponent
│   │   └── test.tsx
│   └── TestComponent2
│       └── test2.tsx
└── helpers.ts

相关代码片段 #

TestComponent/test.tsx #

import React, { useState } from 'react';
import { incrementCount } from 'helpers';
import TestComponent2 from 'components/TestComponent2/test2';

interface TestComponentProps {
    initialCount: number;
}

const TestComponent: React.FC<TestComponentProps> = ({ initialCount }) => {
    const [count, setCount] = useState(initialCount);

    const handleButtonClick = () => {
        setCount(incrementCount(count));
    };

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={handleButtonClick}>Increment</button>
            <TestComponent2 message="Hello from TestComponent2" /> {/* Use TestComponent2 */}
        </div>
    );
};

export default TestComponent;

TestComponent2/test2.tsx #

import React from 'react';

interface TestComponent2Props {
    message: string;
}

const TestComponent2: React.FC<TestComponent2Props> = ({ message }) => {
    return (
        <div>
            <h2>{message}</h2>
        </div>
    );
};

export default TestComponent2;

helpers.ts #

export const incrementCount = (count: number): number => {
    return count + 1;
};

解决方案 #

1. 修正 tsconfig.json 配置 #

核心修复paths映射规则，同时调整baseUrl让TypeScript正确识别根路径：

{
    "compilerOptions": {
        "outDir": "lib",
        "sourceMap": true,
        "noImplicitAny": false,
        "module": "commonjs",
        "lib": [
            "dom",
            "dom.iterable"
        ],
        "downlevelIteration": true,
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "baseUrl": "./resources/js", // 将解析根目录设为resources/js
        "paths": {
            "@/*": ["*"] // 配置@别名映射到resources/js下的所有文件
        }
    },
    "include": [
        "./resources/js/**/*.ts",
        "./resources/js/**/*.tsx",
    ]
}

2. 修正 webpack.mix.js 配置 #

同步别名到webpack原生配置，同时修复resolve.extensions的扩展名解析问题：

const mix = require('laravel-mix');
const path = require('path');

mix.alias({
    '@': path.resolve(__dirname, 'resources/js'), // 使用__dirname确保绝对路径准确
})
// 扩展webpack配置，修复扩展名解析并同步别名
.webpackConfig({
    resolve: {
        extensions: ['.*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.ts', '.tsx'],
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        }
    }
})

mix.js('resources/js/app.js', 'public/js')
    .ts('resources/js/components/TestComponent/test.tsx', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .react();

3. 修正组件导入路径 #

使用@别名导入根目录下的文件：

// TestComponent/test.tsx 修改导入语句
import { incrementCount } from '@/helpers';
import TestComponent2 from '@/components/TestComponent2/test2';

4. 验证配置生效 #

• 重启VSCode的TypeScript服务器（按Ctrl+Shift+P，选择TypeScript: Restart TS Server），消除类型检查错误
• 执行npm run dev或yarn dev，检查webpack是否能正确解析模块

关键原因说明 #

• 原tsconfig.json的paths配置"*": ["resources/js"]错误，它会将所有模块请求映射到resources/js目录本身，而非其子文件，正确写法需用通配符匹配子路径
• webpack的resolve.extensions中"*"需改为".*"，否则无法正确识别不带扩展名的TypeScript文件导入
• Laravel Mix的alias配置需配合webpack原生resolve.alias，确保编译阶段别名生效

内容的提问来源于stack exchange，提问作者codenathan