こんにちは、私はブログを書いています。投稿インデックスにすべての投稿をリストしたいと思います。各投稿には表紙があります。
以下は私のコードです：
{posts.map(post => {
return <li key={post.node.fields.slug}>
<Link to={post.node.fields.slug}>
<img className="news-img" src={require(`../${post.node.frontmatter.cover.relativePath}`)} />
<h3 className="news-titles">{post.node.frontmatter.title}</h3>
<p className="news-desc"> {post.node.excerpt}</p>
</Link>
</li>
}
)}
しかし、私は警告を受けました：
warning in ./src/pages/md/new4/new4.md
Module parse failed: /Users/magicly/development/blog/gatsby-starter-blog/src/pages/md/new4/new4.md Assigning to rvalue (1:2)
You may need an appropriate loader to handle this file type.
SyntaxError: Assigning to rvalue (1:2)
at Parser.pp$4.raise (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:2221:15)
at Parser.pp$2.checkLVal (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1509:12)
at Parser.pp$3.parseMaybeUnary (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1685:24)
at Parser.pp$3.parseExprOps (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1637:21)
at Parser.pp$3.parseMaybeConditional (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1620:21)
at Parser.pp$3.parseMaybeAssign (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1597:21)
at Parser.pp$3.parseExpression (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:1573:21)
at Parser.pp$1.parseStatement (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:727:47)
at Parser.pp$1.parseTopLevel (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:638:25)
at Parser.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:516:17)
at Object.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/acorn/dist/acorn.js:3098:39)
at Parser.parse (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/lib/Parser.js:902:15)
at NormalModule.<anonymous> (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/lib/NormalModule.js:104:16)
at NormalModule.onModuleBuild (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
at nextLoader (/Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
at /Users/magicly/development/blog/gatsby-starter-blog/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
@ ./src/pages ^\.\/.*$
警告にもかかわらず、ページは問題ないようですが、ページを作成してデプロイすると、エラーが発生します。
Uncaught TypeError: Cannot read property 'call' of undefined
at t (bootstrap 29073ca…:52)
at Object../src/components/Footer/footer.css (footer.css:1)
at t (bootstrap 29073ca…:52)
at Object.<anonymous> (index.jsx:5)
at Object../src/components/Footer/index.jsx (layout-component---index-adc8f24….js:153)
at t (bootstrap 29073ca…:52)
at Object.<anonymous> (index.jsx:3)
at Object../node_modules/babel-loader/lib/index.js?{"plugins":["/Users/magicly/development/blog/gatsby-starter-blog/node_modules/gatsby/dist/utils/babel-plugin-extract-graphql.js","add-module-exports","add-module-exports","add-module-exports","transform-object-assign",["transform-react-jsx",{"pragma":"Glamor.createElement"}],"babel-plugin-glamor"],"presets":["/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-react/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-es2015/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-stage-1/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-env/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-stage-0/lib/index.js","/Users/magicly/development/blog/gatsby-starter-blog/node_modules/babel-preset-react/lib/index.js"],"cacheDirectory":true}!./src/layouts/index.jsx (layout-component---index-adc8f24….js:757)
at t (bootstrap 29073ca…:52)
at index.jsx?8a0a:11
次に、コードを次のように変更します。
{posts.map(post => {
const path = `../${post.node.frontmatter.cover.relativePath}`;
return <li key={post.node.fields.slug}>
<Link to={post.node.fields.slug}>
<img className="news-img" src={require(path)} />
<h3 className="news-titles">{post.node.frontmatter.title}</h3>
<p className="news-desc"> {post.node.excerpt}</p>
</Link>
</li>
}
)}
コンソールに警告が表示されました。
```警告1つの警告でコンパイル10:31:08
./src/pages/news/index.jsxの警告
重要な依存関係：
103：74-87依存関係の要求は式です
@ ./src/pages/news/index.jsx 103：74-87
and the error on web page:
エラー：モジュール'../md/new4/cover4.png'が見つかりません。
http：// localhost ：8000 / commons.js：55706：42
webpackContextResolve（webpack：/ src / pages / news
^。/。 $：11webpackContext（webpack：/ src / pages / news^。/。 $：8
http：// localhost ：8000 / commons.js：7945：98
Array.map
（ネイティブ）
Index.render
webpack：/// src / pages / news/index。 jsx：21
Index.render
webpack：///~/react-proxy/modules/createPrototypeProxy.js:44
http：// localhost ：8000 / commons.js：30838：22
measureLifeCyclePerf
webpack：///~/react-dom/lib/ReactCompositeComponent.js:75
ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext
webpack：///~/react-dom/lib/ReactCompositeComponent.js：794
I am sure the path '../md/new4/cover4.png' is right, because if I change code to:
{posts.map（post => {
戻る
})
{post.node.frontmatter.title}
{post.node.excerpt}
}
）}
`` `
その後、すべてが大丈夫です。 私の環境は次のとおりです。
ノード：v8.1.2
npm：v5.0.3
ギャツビー：1.2.0
OSX 10.11.5
ありがとう〜
magicly
全てのコメント3件
私はグーグル
the request of a dependency is an expression
そして最後にこのhttps://webpack.github.io/docs/context.htmlを見つけました。 これは、動的に必要なwebpackの問題のようです。
コードをに変更した後
{posts.map(post => {
let path = `${post.node.frontmatter.cover.relativePath}`;
path = path.slice(0, path.lastIndexOf('.'))
return <li key={post.node.fields.slug}>
<Link to={post.node.fields.slug}>
<img className="news-img" src={require('../' + path + '.png')} />
<h3 className="news-titles">{post.node.frontmatter.title}</h3>
<p className="news-desc"> {post.node.excerpt}</p>
</Link>
</li>
}
)}
そして今はすべて大丈夫です。
magicly
2017年07月17日
この修正を作成してくれた@magiclyに感謝します。Gatsbyv0.xからv1.xに移行しているときに、この問題が本当に発生しました。 これに遭遇した他の人のために、私は同じことを望んでいましたが、ファイル拡張子を動的にしたいとも思っていました。
私の場合も、@ magiclyの場合も、見た目から見て、Markdownのフロントマターからのパスを使用して、個々の記事のカバー画像を作成しています。 Gatsbyのデフォルトのスターターブログのようなプロジェクトのコンテキストでは、おそらく次のようなものがあります。
---
title: The title of the post
featured_image: ./teaser.jpg
---
次に、すべての記事を一覧表示するインデックスページのGraphQLクエリに、 featured_image （ @magiclyがcoverと呼んでいたもの）を含めます。
frontmatter {
title
featured_image {
name
ext
relativePath
}
}
ここで、おそらくすべての投稿を繰り返して、インデックスページにタイトルと注目の画像を表示したいと思うでしょう。 Reactコンポーネント内で、次のようなことを行うことができます。
// …
// Create a new require context for Webpack
const requireFeatureImage = require.context(
`./../pages/portfolio/`, // Don’t make this a variable
true, // Whether or not to check subdirectories
/^.*\.(svg|png|gif|jpg|jpeg|webp|)$/ // Rough regex for extensions, maybe change this for your use case?
)
return (
<ol>
{pages.map(function(page, i) {
let path = page.node.frontmatter.featured_image.relativePath
let imgPath = `./${path.split('portfolio/')[1]}`
return (
<li key={`Item_${page.node.fields.slug}`}>
<Link to={page.node.fields.slug}>
<img src={requireFeatureImage(imgPath)} />
<h2>
{page.node.frontmatter.title}
</h2>
</Link>
</li>
)
})}
</ol>
)
Webpack2を使用したrequire.contextのドキュメントでは、設定について詳しく説明していますが、このようなユースケースは実際には示されていないと思います。 とにかく、それはWebpackについての少し特定の知識を必要とする（申し訳ありませんが）かなり一般的なパターンほどギャツビーの問題ではないようです。
@KyleAMathewsこれは、私がドキュメントのために拡張することに興味があるかもしれませんか？ それとも、私が見逃したこの種のことの例/より良いアプローチはありますか？ ありがとう！
kennethormandy
2017年08月23日
チュートリアルのパート5でこれについて説明しますが、それまでの間、wwwとgatsbygramをチェックアウトしてください。例： https ：//github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209
https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/をインストールすると、frontmatter内のリンクされた画像がgraphqlを介してクエリ可能になります。
KyleAMathews
2017年08月23日
関連する問題
brandonmp
·
3コメント
benstr
·
3コメント
ghost
·
3コメント
timbrandin
·
3コメント
mikestopcontinues
·
3コメント
最も参考になるコメント
私はグーグル
そして最後にこのhttps://webpack.github.io/docs/context.htmlを見つけました。 これは、動的に必要なwebpackの問題のようです。
コードをに変更した後
そして今はすべて大丈夫です。