如何修复Next.js Vercel部署模块未找到错误

时间：2020-06-14 20:50:41

标签： reactjs npm next.js vercel

我的next.js应用程序可以在我的机器上运行，并且在Vercel上部署时可以运行，但是现在在Vercel上构建时失败，并出现以下错误：

我尝试删除node_modules并运行npm install几次，但都没有任何乐趣。

任何帮助将不胜感激。谢谢！

运行“ npm run build” 20：43：24.926
tdwcks@1.0.0构建/ vercel / 5ccaedc9 20：43：24.926
下一个版本 20：43：24.967
内部/模块/ cjs / loader.js：983 20：43：24.967
抛出错误 20：43：24.967
^ 20：43：24.967
错误：找不到模块“ ../build/output/log” 20：43：24.967
需要堆栈： 20：43：24.967
-/vercel/5ccaedc9/node_modules/.bin/next 20：43：24.967
在Function.Module._resolveFilename（内部/模块/cjs/loader.js:980:15） 20：43：24.967
在Function.Module._load（内部/模块/cjs/loader.js:862:27） 20：43：24.967
在Module.require（internal / modules / cjs / loader.js：1042：19） 20：43：24.967
在要求时（内部/模块/cjs/helpers.js:77:18） 20：43：24.967
在对象。 （/vercel/5ccaedc9/node_modules/.bin/next:2:46） 20：43：24.967
在Module._compile（内部/模块/cjs/loader.js:1156:30） 20：43：24.967
在Object.Module._extensions..js（内部/模块/cjs/loader.js:1176:10） 20：43：24.967
在Module.load（internal / modules / cjs / loader.js：1000：32） 20：43：24.967
在Function.Module._load（内部/模块/cjs/loader.js:899:14） 20：43：24.967
在Function.executeUserEntryPoint [作为runMain]（内部/模块/run_main.js:74:12）{ 20：43：24.967
代码：“ MODULE_NOT_FOUND”， 20：43：24.967
requireStack：['/vercel/5ccaedc9/node_modules/.bin/next'] 20：43：24.967
} 20：43：24.969
npm ERR！代码ELIFECYCLE 20：43：24.969
npm ERR！ errno 1 20：43：24.970
npm ERR！ tdwcks@1.0.0构建：next build 20：43：24.970
npm ERR！退出状态1 20：43：24.970
npm ERR！ 20：43：24.970
npm ERR！在tdwcks@1.0.0生成脚本处失败。 20：43：24.970
npm ERR！ npm可能不是问题。上面可能还有其他日志记录输出。 20：43：24.974
npm ERR！可以在以下位置找到此运行的完整日志： 20：43：24.974
npm ERR！ /vercel/.npm/_logs/2020-06-17T19_43_24_971Z-debug.log 20：43：24.979
错误：命令“ npm run build”退出为1 20：43：25.342
[dmesg]如下： 20：43：25.342
[962.449223] ECS桥：端口1（veth2a021300）进入禁用状态 20：43：25.342
[962.453655]设备veth2a021300进入混杂模式 20：43：25.342
[962.457686] ECS桥：端口1（veth2a021300）进入阻止状态 20：43：25.342
[962.462004] ECS桥：端口1（veth2a021300）进入转发状态 20：43：26.242
完成“ package.json”

这是我的Package.json 

{
  "name": "tdwcks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cjs": "0.0.11",
    "core-util-is": "^1.0.2",
    "framer-motion": "^1.11.0",
    "gray-matter": "^4.0.2",
    "next": "^9.4.4",
    "raw-loader": "^4.0.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-ga": "^3.0.0",
    "react-markdown": "^4.3.1",
    "react-player": "^2.2.0",
    "react-scripts": "^3.4.1"
  },
  "devDependencies": {
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^1.4.6"
  }
}

10 个答案:

答案 0 :(得分：5)

我遇到了同样的问题。我认为这可能是Vercel部署基础架构的内部问题。注意它失败的那一行：

Error: Cannot find module '../build/output/log' 20:43:24.967
Require stack: 20:43:24.967
- /vercel/5ccaedc9/node_modules/.bin/next 20:43:24.967

我的问题昨天开始了，非常出乎意料-即，提交非常简单。就我而言，以前成功的部署也会失败。同样，删除项目并重新开始也无济于事。我正在与Vercel支持人员联系，但他们尚未确认问题已经解决，也未提供任何解决方案。

答案 1 :(得分：5)

我必须编辑package.json才能使用next目录中附带的node_modules/next二进制文件：

"scripts": {
  "start": "node_modules/next/dist/bin/next start -p $PORT"
}

这不是最优雅的解决方案，但可以。

答案 2 :(得分：2)

如果您不小心将node_modules提交到项目的Git Repostiory，通常会发生此错误。

您可以尝试执行以下操作吗？

  1. 确保所有更改都已提交，并且目录干净。
  2. 运行rm -rf node_modules（或在Windows上删除文件夹）。
  3. 先运行git add -A，然后再运行git commit -m "Remove all module files"。
  4. 将node_modules添加到您的.gitignore文件中（并保存）。
  5. 先运行git add -A，然后再运行git commit -m "Update ignored files"。
  6. 通过git status验证您的目录是否完全干净。
  7. 然后，运行git push。此部署应可在Vercel上使用。
  8. 最后，根据您的软件包管理器重新运行npm i或yarn，以使本地副本正常工作。

答案 3 :(得分：1)

似乎我遇到了同样的错误。

奇怪的是，我整个周末都在Vercel上进行构建，没有任何问题，并且只是在我将Tailwind CSS添加到项目中之后才开始失败。

成功添加了Tailwind CSS的第一个版本成功，但是未加载样式。

您仍然可以在https://rolfmadsen.now.sh/上查看结果。

使用“ vercel dev”的本地版本仍然可以完美运行。

请参见https://github.com/rolfmadsen/search

中的存储库

构建日志中的错误：

22:28:35.104  
Running "npm run build"
22:28:35.287  
> search@0.1.0 build /vercel/6ddf29b8
22:28:35.287  
> next build
22:28:35.328  
internal/modules/cjs/loader.js:983
22:28:35.329  
  throw err;
22:28:35.329  
  ^
22:28:35.329  
Error: Cannot find module '../build/output/log'
22:28:35.329  
Require stack:
22:28:35.329  
- /vercel/6ddf29b8/node_modules/.bin/next
22:28:35.329  
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
22:28:35.329  
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
22:28:35.329  
    at Module.require (internal/modules/cjs/loader.js:1042:19)
22:28:35.329  
    at require (internal/modules/cjs/helpers.js:77:18)
22:28:35.329  
    at Object.<anonymous> (/vercel/6ddf29b8/node_modules/.bin/next:2:46)
22:28:35.329  
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
22:28:35.329  
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
22:28:35.329  
    at Module.load (internal/modules/cjs/loader.js:1000:32)
22:28:35.329  
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
22:28:35.329  
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12) {
22:28:35.329  
  code: 'MODULE_NOT_FOUND',
22:28:35.329  
  requireStack: [ '/vercel/6ddf29b8/node_modules/.bin/next' ]
22:28:35.329  
}
22:28:35.331  
npm ERR! code ELIFECYCLE
22:28:35.331  
npm ERR! errno 1
22:28:35.332  
npm ERR! search@0.1.0 build: `next build`
22:28:35.332  
npm ERR! Exit status 1
22:28:35.332  
npm ERR! 
22:28:35.332  
npm ERR! Failed at the search@0.1.0 build script.
22:28:35.332  
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
22:28:35.336  
npm ERR! A complete log of this run can be found in:
22:28:35.336  
npm ERR!     /vercel/.npm/_logs/2020-06-21T20_28_35_332Z-debug.log
22:28:35.342  
Error: Command "npm run build" exited with 1

答案 4 :(得分：1)

我有同样的问题。在我的github桌面上，我注意到在编辑器中大写的文件不在github桌面上。修复了拼写，使其与github上显示的内容和项目成功建立相匹配。

答案 5 :(得分：1)

在我的情况下，这似乎与yarn和下一个依赖项有关，即node_modules/next/dist/bin/next内部与某物的信息冲突。

从来没有完全理解为什么在使用next并将代码构建到生产环境后，我们仍然不得不依赖（相对）繁重的模块next。

假定进行构建的整个概念是使它独立于构建工具。

答案 6 :(得分：0)

如何创建一个.gitignore文件，并向其中添加 .next 文件夹？

答案 7 :(得分：0)

我如何解决Vercel上缺少的模块错误。

  1. 显式安装该软件包，以便它出现在您的function App() { const [showOneTimeScreen, setShowOneTimeScreen] = useState(false); const [loading, setLoading] = useState(true); useEffect(() => { /* Check from localstorage or from somewhere should you show "OneTimeScreen" and setShowOneTimeScreen to needed value , and setLoading to true */ }, []); if (loading) { return <LoadingScreen /> } return ( <NavigationContainer> <Stack.Navigator> {showOneTimeScreen && ( <Stack.Screen name="OneTimeScreen" component={OneTimeScreen} /> )} <Stack.Screen name="Second" component={secondScreen} options={{ headerShown: false, }} /> </Stack.Navigator> </NavigationContainer> ); } function OneTimeScreen() { useEffect(() => { /* Set to localstorage or somewhere you want that "OneTimeScreen" has been shown */ }, []); .... }
    2. 中
  2. 然后将应该缺少的模块导入应用程序并使用它。

例如（只是一个场景） // //假设package.json被认为是缺少的模块，

1确保它存在于您的package.json中

lodash

2导入并在您的应用程序中使用它（通常，我只是在非生产环境中使用console.log导入。）

"dependencies": {
    // some dependencies ...
    "lodash": "^4.17.20",
    // some other dependencies ...
},

答案 8 :(得分：0)

我以小写形式创建了文件夹，然后将其重命名为大写，更新了所有导入，但是由于某种原因，当我推送更改时，Github 没有更新文件夹名称。我需要用不同的名字重命名。成功了。

答案 9 :(得分：0)

这个答案对我有用：https://stackoverflow.com/a/55541435/3051080

TL;博士;更新git cache：

git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master
相关问题
最新问题