Gatsby Netlify 构建错误：无法解析“/opt/build/repo/src/templates”中的“../components/GridTemplate/GridTemplate.js”

Question

在 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

Answer 1

找到了。事实证明，尽管出现大写，但我的 Mac OS 从未注意到我将组件文件夹的路径重命名为大写。在 Githubs 端，路径还是小写，这是错误的。使用此指南从 Github 端重命名。