React.js跨文件夹导入失败：找不到server/services/storagequeue模块

以下是针对性的解决方案：

1. 改用正确的相对路径导入 #

如果你的thunk.queuepolling.ts位于项目子目录中，绝对路径无法直接识别，需要根据文件层级使用相对路径：
假设thunk.queuepolling.ts在src/app/features/queue/，而server/services/storagequeue.ts在src/server/services/，导入语句应调整为：

import { readQueueMessage } from '../../../../server/services/storagequeue';

根据实际文件夹层级增减../的数量，确保路径指向目标文件。

2. 配置绝对路径别名（推荐长期使用） #

想保留server/xxx这类简洁的绝对路径导入，需要在项目配置中添加路径别名：

• TypeScript 基础配置：修改tsconfig.json，添加baseUrl和paths：

{
  "compilerOptions": {
    "baseUrl": "./src", // 以src为根目录
    "paths": {
      "server/*": ["server/*"] // 映射server/开头的路径到src/server/下
    }
  }
}

• Vite 项目额外配置：在vite.config.ts中补充别名解析：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      'server': path.resolve(__dirname, './src/server')
    }
  }
});

• Webpack 项目额外配置：在webpack.config.js中添加：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      'server': path.resolve(__dirname, './src/server')
    }
  }
};

3. 检查文件导出与扩展名 #

• 确认storagequeue.ts中确实用export const readQueueMessage = /* 函数内容 */正确导出了目标函数，没有拼写错误。
• 部分严格的模块解析环境可能需要显式添加文件扩展名，尝试：

import { readQueueMessage } from '../../../../server/services/storagequeue.ts';

内容的提问来源于stack exchange，提问作者T S Nandakumar