部署Vite React应用失败：无法解析utils目录的generateID模块

部署应用时出现以下错误，但本地运行完全正常：

[15:57:46.416] Running build in Cleveland, USA (East) – cle1
[15:57:46.467] Cloning github.com/mdsharef/clean-you-tube-application (Branch: master, Commit: c752c73)
[15:57:46.713] Previous build cache not available
[15:57:46.869] Cloning completed: 401.785ms
[15:57:46.978] Running "vercel build"
[15:57:47.433] Vercel CLI 28.16.2
[15:57:48.011] Installing dependencies...
[15:57:48.322] yarn install v1.22.17
[15:57:48.372] [1/4] Resolving packages...
[15:57:48.505] [2/4] Fetching packages...
[15:57:57.372] [3/4] Linking dependencies...
[15:57:57.373] warning "@emotion/react > @emotion/babel-plugin@11.10.5" has unmet peer dependency "@babel/core@^7.0.0".
[15:57:57.373] warning "@emotion/react > @emotion/babel-plugin > @babel/plugin-syntax-jsx@7.18.6" has unmet peer dependency "@babel/core@^7.0.0-0".
[15:57:57.378] warning " > better-docs@2.7.2" has incorrect peer dependency "react@^17.0.2".
[15:57:57.378] warning " > better-docs@2.7.2" has incorrect peer dependency "react-dom@^17.0.2".
[15:57:57.378] warning "better-docs > react-ace@9.5.0" has incorrect peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0".
[15:57:57.378] warning "better-docs > react-ace@9.5.0" has incorrect peer dependency "react-dom@^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0".
[15:57:57.378] warning "better-docs > react-frame-component@5.2.6" has unmet peer dependency "prop-types@^15.5.9".
[15:58:03.193] [4/4] Building fresh packages...
[15:58:03.479] Done in 15.16s.
[15:58:03.504] Running "yarn run build"
[15:58:03.688] yarn run v1.22.17
[15:58:03.715] $ vite build
[15:58:04.189] [36mvite v4.0.4 [32mbuilding for production...[36m[39m
[15:58:04.226] transforming...
[15:58:05.024] [32m✓[39m 53 modules transformed.
[15:58:05.025] [31mCould not resolve "../../utils/generateID" from "src/store/reducerModel/notes.js"[39m
[15:58:05.025] file: [36m/vercel/path0/src/store/reducerModel/notes.js[39m
[15:58:05.027] [31merror during build:
[15:58:05.027] RollupError: Could not resolve "../../utils/generateID" from "src/store/reducerModel/notes.js"
[15:58:05.027]     at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:2088:30)
[15:58:05.028]     at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:23205:24)
[15:58:05.028]     at file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:23167:26[39m
[15:58:05.049] error Command failed with exit code 1.
[15:58:05.049] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[15:58:05.069] Error: Command "yarn run build" exited with 1
[15:58:05.203] 

错误提示显示无法从src/store/reducerModel/notes.js中解析"../../utils/generateID"，该模块是生成动态ID的工具函数，在其他JSX文件中导入正常，仅此处报错。

notes.js 文件内容 #

import { action, persist } from "easy-peasy";
import generateID from "../../utils/generateID";


const getID = generateID('notes');

const notesModel = persist({
    data: {},
    error: '',
    setError: action((state, payload) => {
        state.error = payload;
    }),
    vanishError: action((state, _payload) => {
        state.error = '';
    }),
    createNote: action((state, payload) => {
        let noteId = getID.next().value;
        state.data[`${payload.videoId}|${noteId}`] = {
            id: noteId,
            videoId: payload.videoId,
            text: payload.text,
            videoTime: payload.videoTime
        }
        state.error = '';
    })
}, {
    storage: 'localStorage',
    allow: ['data']
});

export default notesModel;

utils/generateId.js 文件内容 #

function * generateID(text='randomID') {
    const randomArr = ['aa', 'ab', 'ac', 'ad', 'ae', 'af', 'ag', 'ah', 'ai', 'aj', 'ak', 'al', 'am', 'an', 'ap', 'aq', 'ar', 'as', 'at', 'au', 'av', 'aw', 'ax', 'ay', 'az', 'bb', 'bc', 'dd', 'cc', 'ff', 'ef', 'gf', 'hh', 'uu', 'ui', 'qw', 'we', 'rt', 'ty', 'yu', 'iu', 'io', 'op', 'pl', 'pk', 'jk', 'jh', 'fg', 'df', 'fd', 'ss', 'rr', 'gg', 'tt', 'yy', 'uv', 'ii', 'bv', 'nm', 'mn', 'cm', 'cn', 'xc', 'xv', 'xn', 'xb', 'xm', 'zx', 'zc', 'zr', 'zt', 'za', 'zd', 'zf', 'zh', 'zj', 'zz', 'xx', 'vv']
    let index = 100;
    while(true) {
        yield `${text}-${(Math.floor(Math.random() * 1000)) + index++}-${randomArr[Math.floor(Math.random() * randomArr.length)]}`;
    }
}

export default generateID;

问题原因与解决方案 #

问题核心是文件名大小写不匹配：

• 你在notes.js中导入的是generateID（大写D）
• 实际文件名为generateId.js（小写d）

本地系统（如Windows/macOS默认不区分文件名大小写）可以正常识别，但部署服务器通常使用Linux系统，严格区分文件名大小写，导致解析失败。

解决方法二选一：

1. 修改notes.js中的导入语句，将../../utils/generateID改为../../utils/generateId，与实际文件名保持一致
2. 重命名utils/generateId.js为utils/generateID.js，确保文件名和导入语句完全匹配

内容的提问来源于stack exchange，提问作者Md Muaz Ahmed