作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当在 Netlify 构建上调试一个看似无关的错误时,这突然开始发生。我在本地没有这个问题。我已经清除了我的缓存,删除了我的包锁和节点模块文件夹并更新了所有内容,并在 Netlify 上运行了一个没有缓存的构建。我还检查了文件/文件夹名称是否区分大小写。会是什么?
组件使用的模板之一:
import React, { Component } from 'react'
import GridTemplate from '../components/GridTemplate/GridTemplate.js'
import { graphql } from 'gatsby'
...
class Mediums extends Component {
render() {
let allTitles = []
this.props.data.allMarkdownRemark.edges.forEach( post => {
allTitles.push(post.node.frontmatter.title)
})
return (
<div style={{position: "absolute", width: "100%", height: "100%", overflow: "hidden", overflowY: "scroll"}}>
<HeaderMeta subTitle={this.props.pageContext.medium} itemGroup={this.props.data.allMarkdownRemark}/>
<GridTemplate
data={this.props.data.allMarkdownRemark.edges}
title={this.props.pageContext.medium}
pastUrl={this.props.location.pathname}
/>
</div>
)
}
}
export default Mediums
GridTemplate 组件:
import React, { Component } from 'react';
import S from './imageGrid.module.sass'
import ArtImage from '../ArtImgae/ArtImage.js'
import Link from 'gatsby-link'
import { arrowSvg } from '../../img/svg-index.js'
import InlineSVG from 'svg-inline-react'
import Header from '../Header/Header.js'
import 'typeface-alegreya-sans-sc'
import 'typeface-cinzel-decorative'
import 'typeface-cinzel'
class GridTemplate extends Component {
render() {
const postLinks = this.props.data.map( post => {
const frontmatter = post.node.frontmatter
return (
<div key={post.node.fields.slug} className={S.imageItem}>
<Link
to={post.node.fields.slug}
//pass prop of cat / med paths for back button on art item
state={{pastUrl: this.props.pastUrl || null}}
>
<h2>{frontmatter.title}</h2>
<ArtImage
fluid={frontmatter.featuredImage.childImageSharp.fluid}
imageData={frontmatter}
/>
</Link>
</div>
)
})
//from context
const title = this.props.title
//const totalCount = this.props.data.allMarkdownRemark.totalCount not used
return (
<section id={S.GridTemplate}>
<div className={S.headerHolder}>
<Header to={["home", "archive"]} white={true} />
</div>
<div className={S.titleHolder}>
<Link to = "/store" className={S.storeLink} >
<InlineSVG src={arrowSvg} />
</Link>
<h1 id={S.mediumTitle}>{title}</h1>
</div>
<div className={S.imageGrid}>
{postLinks}
</div>
</section>
)
}
}
export default GridTemplate
文件结构:
组件 GridTemplate.js
被 categorys.js
和 mediums.js
使用
最佳答案
找到了。原来我将组件文件夹的路径重命名为大写,但我的 Mac OS 从未注意到,尽管出现了大写。在 Githubs 端,路径仍然是小写的,这是错误的。用过这个gude to rename from Githubs end.
关于reactjs - Gatsby Netlify 构建错误 : Can't resolve '../components/GridTemplate/GridTemplate.js' in '/opt/build/repo/src/templates' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63965739/
当在 Netlify 构建上调试一个看似无关的错误时,这突然开始发生。我在本地没有这个问题。我已经清除了我的缓存,删除了我的包锁和节点模块文件夹并更新了所有内容,并在 Netlify 上运行了一个没有
我是一名优秀的程序员,十分优秀!