Gatsby Netlify build error: Can't resolve '../components/GridTemplate/GridTemplate.js' in '/opt/build/repo/src/templates'

Question

在 Netlify 构建上调试看似无关的错误时突然发生这种情况。我在本地没有这个问题。我已经清除了我的缓存，删除了我的包锁和节点模块文件夹并更新了所有内容，以及运行在 Netlify 上没有缓存的构建。我还检查了 file/folder 名称是否区分大小写。可能是什么？

组件使用的模板之一：

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

更改导入类型后再次尝试部署到 netlify-

来自

import GridTemplate from '../components/GridTemplate/GridTemplate.js'

至

import GridTemplate from '../components/GridTemplate/GridTemplate'

Answer 2

找到了。事实证明，我的 Mac OS 从未注意到我将组件文件夹的路径重命名为大写，尽管出现了大写。在 Githubs 端，路径仍然是小写的，这是错误的。用过这个gude to rename from Githubs end.

Answer 3

我在尝试部署到 Netlify 时遇到了同样的问题：

can't resolve '../components/search/index' in '/opt/build/repo/src/pages'

我原来的台词是：

import Search from "../components/search/index";

请注意目录名称 search 的小写字母。出于某种原因，我不得不将文件夹重命名为大写 Search，即：

import Search from "../components/Search/index";

Netlify 将成功构建。

Gatsby Netlify build error: Can't resolve '../components/GridTemplate/GridTemplate.js' in '/opt/build/repo/src/templates'

Gatsby Netlify build error: Can't resolve '../components/GridTemplate/GridTemplate.js' in '/opt/build/repo/src/templates'

reactjs

gatsby

netlify