Next.js+TypeScript+RTK Query Linux构建报错：导出成员找不到

问题情况 #

本地开发、构建都正常，一部署到Linux服务器执行构建就报类型错误：

./components/common/Admin/ProductAccordion/ProductBox.ts:3:10
Type error: Module '@state/apis' has no exported member 'useGetProductByCategoryQuery'
import { Box } from '@mui/material'; import React, { Fragment } from 'react'
import { useGetProductByCategoryQuery } from '@state/apis';
import { useGetCategorywithProductCountQuery } from '@state/apis';
import ProductCard from './ProductCard'

相关代码与目录 #

导出成员的productCategoryApi.ts #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const ProductApi = createApi({
    baseQuery: fetchBaseQuery({ baseUrl: apiAddress }),
    tagTypes: ['Product', 'ProductById', 'Plant'],
    endpoints: (builder) => ({
        getProductByCategory: builder.query<
            ProductInter,
            { id: string; search: string | any; plant: string }
        >({
            query: ({ id, search, plant }) => ({
                url: `all-products/${id}`,
                params: {
                    search: search,
                    plant: plant,
                },
            }),
            transformResponse: (response: ProductInter, meta, arg) => response,
            transformErrorResponse: (
                response: { status: string | number },
                meta,
                arg
            ) => response.status,
            providesTags: ['Product'],
        }),
    }),
});

export const {
    useGetProductByCategoryQuery,
} = ProductApi;

项目目录结构 #

根目录
└── state
    └── apis
        └── productCategoryApi.ts

当前tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "components/*"
      ],
      "@assets/*":[
        "assets/*"
      ],
      "@state/*":[
        "state/*"
      ]
    },
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx","."],
  "exclude": ["node_modules"]
}

已试过的方案 #

• 把相对导入改成路径导入
• 加了桶导出并更新了导入语句
• 修改tsconfig里paths的state路径为./state/*

可行解决思路 #

1. 检查服务器文件大小写 #

Linux是大小写敏感系统，本地（比如Windows/macOS默认不区分）可能文件名和导入时的大小写对不上：

• 确认state/apis/下的文件名是不是和代码里写的一致，比如有没有把productCategoryApi.ts写成ProductCategoryApi.ts
• 检查导入的@state/apis有没有拼写错误，比如apis写成api

2. 确保桶导出配置正确（如果用了的话） #

要是用桶导出，得在state/apis下建index.ts统一导出：

// state/apis/index.ts
export { useGetProductByCategoryQuery } from './productCategoryApi';
export { useGetCategorywithProductCountQuery } from './对应的文件名'; // 记得补另一个导出的来源文件

然后导入语句保持不变，同时要确认服务器上这个index.ts确实存在且内容没错。

3. 清理服务器构建缓存 #

Next.js构建会留缓存，旧缓存可能导致类型识别出问题：

• 执行rm -rf .next删除构建缓存
• 删除node_modules和package-lock.json/yarn.lock，重新执行npm install或yarn install
• 再重新运行构建命令

4. 给Next.js添加webpack路径别名 #

tsconfig的paths在生产构建时需要webpack对应的别名配置，不然可能解析失败。在next.config.js里添加：

const path = require('path');

module.exports = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@components': path.resolve(__dirname, 'components'),
      '@assets': path.resolve(__dirname, 'assets'),
      '@state': path.resolve(__dirname, 'state'),
    };
    return config;
  },
};

5. 统一服务器和本地的TypeScript版本 #

不同TS版本可能导致类型解析差异：

• 本地执行tsc -v查看版本
• 服务器上也执行这个命令，版本不一致的话就用npm install typescript@对应版本统一

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