reactjs - CRA 在 netlify 上构建失败但不是在本地，找不到本地方法的模块？
问题描述
尝试部署我的站点时，我遇到了 netlify 问题。它似乎无法找到本地模块。
这是日志：
12:54:43 AM: Build ready to start
12:54:45 AM: build-image version: 09c2cdcdf242cf2f57c9ee0fcad9d298fad9ad41
12:54:45 AM: build-image tag: v3.5.0
12:54:45 AM: buildbot version: 8df8a50b1177b0b57364d20e0ea150448924cebf
12:54:45 AM: Fetching cached dependencies
12:54:45 AM: Starting to download cache of 5.2MB
12:54:45 AM: Finished downloading cache in 180.688403ms
12:54:45 AM: Starting to extract cache
12:54:45 AM: Finished extracting cache in 118.246837ms
12:54:45 AM: Finished fetching cache in 304.995388ms
12:54:45 AM: Starting to prepare the repo for build
12:54:46 AM: Preparing Git Reference refs/heads/main
12:54:47 AM: Different build dir detected, going to use the one specified in the Netlify configuration file: 'client' versus '/client' in the Netlify UI
12:54:47 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'client/build' versus 'build' in the Netlify UI
12:54:47 AM: Starting build script
12:54:47 AM: Installing dependencies
12:54:47 AM: Python version set to 2.7
12:54:49 AM: v12.18.0 is already installed.
12:54:50 AM: Now using node v12.18.0 (npm v6.14.4)
12:54:50 AM: Started restoring cached build plugins
12:54:50 AM: Finished restoring cached build plugins
12:54:50 AM: Attempting ruby version 2.7.1, read from environment
12:54:52 AM: Using ruby version 2.7.1
12:54:52 AM: Using PHP version 5.6
12:54:52 AM: Started restoring cached node modules
12:54:52 AM: Finished restoring cached node modules
12:54:52 AM: Started restoring cached yarn cache
12:54:52 AM: Finished restoring cached yarn cache
12:54:52 AM: Installing yarn at version 1.22.4
12:54:52 AM: Installing Yarn!
12:54:52 AM: > Downloading tarball...
12:54:52 AM: [1/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz --> /tmp/yarn.tar.gz.SCC7CjcRQU
12:54:52 AM: % Total % Received % Xferd Average Speed Time Time Time Current
12:54:52 AM: Dload Upload Total Spent Left Speed
12:54:52 AM: 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
12:54:53 AM: 0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0
12:54:53 AM: 100 80 100 80 0 0 257 0 --:--:-- --:--:-- --:--:-- 257
12:54:53 AM: 100 93 100 93 0 0 141 0 --:--:-- --:--:-- --:--:-- 141
12:54:53 AM: 0 0 0 0 0 0 0 0 --:--:-- 0:00:01 --:--:-- 0
12:54:53 AM: 100 643 100 643 0 0 608 0 0:00:01 0:00:01 --:--:-- 627k
12:54:54 AM: 100 1215k 100 1215k 0 0 804k 0 0:00:01 0:00:01 --:--:-- 804k
12:54:54 AM: [2/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz.asc --> /tmp/yarn.tar.gz.SCC7CjcRQU.asc
12:54:54 AM: 100 84 100 84 0 0 3026 0 --:--:-- --:--:-- --:--:-- 3026
12:54:54 AM: 100 97 100 97 0 0 1749 0 --:--:-- --:--:-- --:--:-- 1749
12:54:54 AM: 100 647 100 647 0 0 3586 0 --:--:-- --:--:-- --:--:-- 3586
12:54:54 AM: 100 1028 100 1028 0 0 4598 0 --:--:-- --:--:-- --:--:-- 4598
12:54:54 AM: > Verifying integrity...
12:54:54 AM: gpg: Signature made Mon 09 Mar 2020 03:52:13 PM UTC using RSA key ID 69475BAA
12:54:54 AM: gpg: Good signature from "Yarn Packaging <yarn@dan.cx>"
12:54:54 AM: gpg: WARNING: This key is not certified with a trusted signature!
12:54:54 AM: gpg: There is no indication that the signature belongs to the owner.
12:54:54 AM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907 BBB7 1646 B01B 86E5 0310
12:54:54 AM: Subkey fingerprint: 6D98 490C 6F1A CDDD 448E 4595 4F77 6793 6947 5BAA
12:54:54 AM: > GPG signature looks good
12:54:54 AM: > Extracting to ~/.yarn...
12:54:54 AM: > Adding to $PATH...
12:54:55 AM: > Successfully installed Yarn 1.22.4! Please open another terminal where the `yarn` command will now be available.
12:54:55 AM: Installing NPM modules using Yarn version 1.22.4
12:54:56 AM: yarn install v1.22.4
12:54:56 AM: [1/4] Resolving packages...
12:54:57 AM: [2/4] Fetching packages...
12:55:28 AM: info fsevents@2.1.3: The platform "linux" is incompatible with this module.
12:55:28 AM: info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
12:55:28 AM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
12:55:28 AM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
12:55:28 AM: [3/4] Linking dependencies...
12:55:28 AM: warning " > @testing-library/user-event@12.1.10" has unmet peer dependency "@testing-library/dom@>=7.21.4".
12:55:28 AM: warning " > react-masonry-component@6.2.1" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0".
12:55:28 AM: warning " > react-pdf@5.0.0" has incorrect peer dependency "react@^16.3.0".
12:55:28 AM: warning " > react-pdf@5.0.0" has incorrect peer dependency "react-dom@^16.3.0".
12:55:28 AM: warning "react-pdf > worker-loader@3.0.5" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
12:55:28 AM: warning " > react-slick@0.27.12" has incorrect peer dependency "react@^0.14.0 || ^15.0.1 || ^16.0.0".
12:55:28 AM: warning " > react-slick@0.27.12" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0".
12:55:28 AM: warning " > semantic-ui-react@2.0.1" has incorrect peer dependency "react@^16.8.0".
12:55:28 AM: warning " > semantic-ui-react@2.0.1" has incorrect peer dependency "react-dom@^16.8.0".
12:55:28 AM: warning "semantic-ui-react > @fluentui/react-component-event-listener@0.51.2" has incorrect peer dependency "react@^16.8.0".
12:55:28 AM: warning "semantic-ui-react > @fluentui/react-component-event-listener@0.51.2" has incorrect peer dependency "react-dom@^16.8.0".
12:55:28 AM: warning "semantic-ui-react > @fluentui/react-component-ref@0.51.2" has incorrect peer dependency "react@^16.8.0".
12:55:28 AM: warning "semantic-ui-react > @fluentui/react-component-ref@0.51.2" has incorrect peer dependency "react-dom@^16.8.0".
12:55:28 AM: warning "semantic-ui-react > @semantic-ui-react/event-stack@3.1.1" has incorrect peer dependency "react@^16.0.0".
12:55:28 AM: warning "semantic-ui-react > @semantic-ui-react/event-stack@3.1.1" has incorrect peer dependency "react-dom@^16.0.0".
12:55:28 AM: warning "semantic-ui-react > react-popper@2.2.3" has incorrect peer dependency "react@^16.8.0".
12:55:28 AM: warning " > slick-carousel@1.8.1" has unmet peer dependency "jquery@>=1.8.0".
12:55:45 AM: [4/4] Building fresh packages...
12:55:49 AM: Done in 52.82s.
12:55:49 AM: NPM modules installed using Yarn
12:55:49 AM: Started restoring cached go cache
12:55:49 AM: Finished restoring cached go cache
12:55:49 AM: go version go1.14.4 linux/amd64
12:55:49 AM: go version go1.14.4 linux/amd64
12:55:49 AM: Installing missing commands
12:55:49 AM: Verify run directory
12:55:51 AM:
12:55:51 AM: ────────────────────────────────────────────────────────────────
12:55:51 AM: Netlify Build
12:55:51 AM: ────────────────────────────────────────────────────────────────
12:55:51 AM:
12:55:51 AM: ❯ Version
12:55:51 AM: @netlify/build 5.3.3
12:55:51 AM:
12:55:51 AM: ❯ Flags
12:55:51 AM: deployId: 5fc202431c76591b2b498486
12:55:51 AM: mode: buildbot
12:55:51 AM:
12:55:51 AM: ❯ Current directory
12:55:51 AM: /opt/build/repo/client
12:55:51 AM:
12:55:51 AM: ❯ Config file
12:55:51 AM: No config file was defined: using default values.
12:55:51 AM:
12:55:51 AM: ❯ Context
12:55:51 AM: production
12:55:51 AM:
12:55:51 AM: ────────────────────────────────────────────────────────────────
12:55:51 AM: 1. Build command from Netlify app
12:55:51 AM: ────────────────────────────────────────────────────────────────
12:55:51 AM:
12:55:51 AM: $ yarn build
12:55:52 AM: yarn run v1.22.4
12:55:52 AM: $ react-scripts build
12:55:54 AM: Creating an optimized production build...
12:56:14 AM: Failed to compile.
12:56:14 AM:
12:56:14 AM: ./src/containers/home/HomeTitle.tsx
12:56:14 AM: Cannot find module: 'utils/userInfoFill'. Make sure this package is installed.
12:56:14 AM: You can install this package by running: yarn add utils/userInfoFill.
12:56:14 AM: error Command failed with exit code 1.
12:56:14 AM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
12:56:14 AM:
12:56:14 AM: ────────────────────────────────────────────────────────────────
12:56:14 AM: "build.command" failed
12:56:14 AM: ────────────────────────────────────────────────────────────────
12:56:14 AM:
12:56:14 AM: Error message
12:56:14 AM: Command failed with exit code 1: yarn build
12:56:14 AM:
12:56:14 AM: Error location
12:56:14 AM: In Build command from Netlify app:
12:56:14 AM: yarn build
12:56:14 AM:
12:56:14 AM: Resolved config
12:56:14 AM: build:
12:56:14 AM: base: /opt/build/repo/client
12:56:14 AM: command: yarn build
12:56:14 AM: commandOrigin: ui
12:56:14 AM: publish: /opt/build/repo/client/build
12:56:14 AM: Caching artifacts
12:56:14 AM: Started saving node modules
12:56:14 AM: Finished saving node modules
12:56:14 AM: Started saving build plugins
12:56:14 AM: Finished saving build plugins
12:56:14 AM: Started saving yarn cache
12:56:14 AM: Finished saving yarn cache
12:56:14 AM: Started saving pip cache
12:56:14 AM: Finished saving pip cache
12:56:14 AM: Started saving emacs cask dependencies
12:56:14 AM: Finished saving emacs cask dependencies
12:56:14 AM: Started saving maven dependencies
12:56:14 AM: Finished saving maven dependencies
12:56:14 AM: Started saving boot dependencies
12:56:14 AM: Finished saving boot dependencies
12:56:14 AM: Started saving go dependencies
12:56:14 AM: Finished saving go dependencies
12:56:17 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
12:56:17 AM: Failing build: Failed to build site
12:56:17 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
12:56:17 AM: Finished processing build request in 1m32.457785673s
utils/userInfoFill是我在下面创建的一个函数./src/utils/userInfoFill.ts，它看起来像：
import {userinfo} from 'data/userinfo'
export const userInfoFill = (str: string, repl_string?: string) => {
if (repl_string) {
const re = new RegExp("%userinfo%", "g");
return str.replace(re, repl_string);
} else {
const re = new RegExp("%userinfo%", "g");
return str.replace(re, userinfo.title_name);
}
};
我在 HomeTitle.tsx 中导入它，import { userInfoFill } from "utils/userInfoFill";我想知道 netlify 是否有使用绝对路径的问题，但我不太确定。
我的 tsconfig.json 看起来像：
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react",
"baseUrl": "src"
},
"include": [
"src"
]
}
"baseUrl": "src"从这个帖子中添加的地方。允许绝对 url 引用
项目的文件结构为：
/
┣ client
┃ ┣ node_modules
┃ ┣ public
┃ ┣ src
┃ ┃ ┣ assets
┃ ┃ ┃ ┗ ...
┃ ┃ ┣ components
┃ ┃ ┃ ┗ ...
┃ ┃ ┣ containers
┃ ┃ ┃ ┣ home
┃ ┃ ┃ ┃ ┣ HomeTitle.tsx
┃ ┃ ┃ ┃ ┗ ...
┃ ┃ ┃ ┗ ...
┃ ┃ ┣ data
┃ ┃ ┃ ┣ temp
┃ ┃ ┃ ┃ ┗ ...
┃ ┃ ┃ ┣ userinfo.ts
┃ ┃ ┃ ┗ ...
┃ ┃ ┣ pages
┃ ┃ ┃ ┣ Home.tsx
┃ ┃ ┃ ┗ ...
┃ ┃ ┣ utils
┃ ┃ ┃ ┣ userInfoFill.ts
┃ ┃ ┃ ┣ userInfoFill.unit.test.ts
┃ ┃ ┃ ┗...
┃ ┃ ┣ App.tsx
┃ ┃ ┗ ...
┃ ┣ .eslintrc
┃ ┣ .tsconfig.json
┃ ┣ package.json
┃ ┗ ...
┣ server
┗ ...
我可以很好地在本地构建和托管服务器，所以我不确定是否需要一些 netlify 设置？
这也是我当前的构建设置：
解决方案
我找到了答案。事实证明 windows 正在显示userInfoFill.ts，但 git 将文件保存为UserInfoFill.ts. 我不完全确定为什么会发生这种情况，但我通过重命名 git 上的文件解决了这个问题，现在 netlify 部署了。
推荐阅读
- sql-server - 工具箱中的项目是灰色的 - 如何启用它们？
- python - 如何在嵌套列表中做多个向量点积？
- javascript - Django - 从 JSON 对象中选择多个条目以显示在下一页上
- css - 如何删除 PrimeNG 下拉图标？
- sql - SQL搜索以获取具有相同用户ID的每个唯一单个/组条目中的最后一个值？条目可以出现在数据集中的不同位置
- mysql - ERROR 1140 (42000) groupby 聚合查询？
- python - 检查 pandas 中的重复数据
- github - Github 页面未显示加载的 Angular 应用程序
- python-3.x - 如何通过 kivy android 应用程序在我的 android 文件管理器中创建文件夹
- javascript - Fire window.open 从警报弹出窗口