Gatsby: La dynamique ne peut-elle pas exiger img?

Créé le 17 juil. 2017 · 3Commentaires · Source: gatsbyjs/gatsby

bonjour, j'écris un blog et dans l'index des articles je veux lister tous mes articles et chaque article a une couverture.
ci-dessous mon code :

 {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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

mais j'ai eu l'avertissement:

 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 ^\.\/.*$

malgré l'avertissement, la page semble correcte, mais lorsque je crée les pages et que je les déploie, j'obtiens les erreurs :

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

Ensuite, je change mon code en ceci:

 {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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

et j'ai eu l'avertissement sur la console,
``` AVERTISSEMENT Compilé avec 1 avertissements 10:31:08

avertissement dans ./src/pages/news/index.jsx

Dépendances critiques :
103:74-87 la demande d'une dépendance est une expression

@ ./src/pages/news/index.jsx 103:74-87

and the error on web page:

Erreur : Impossible de trouver le module '../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
(originaire de)
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 => {
retourner

{post.node.frontmatter.title}

{post.node.extrait}

}
)}
```
alors tout va bien. mon environnement est :
nœud : v8.1.2
npm : v5.0.3
gatsby : 1.2.0
OSX 10.11.5

merci ~

Source

magicly

Commentaire le plus utile

je google

the request of a dependency is an expression

et finalement trouvé ce https://webpack.github.io/docs/context.html. cela semble un problème de webpack dynamique oblige.
après avoir changé mon code en

 {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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

et tout est ok maintenant.

magicly le 17 juil. 2017

👍6

Tous les 3 commentaires

je google

the request of a dependency is an expression

et finalement trouvé ce https://webpack.github.io/docs/context.html. cela semble un problème de webpack dynamique oblige.
après avoir changé mon code en

 {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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{post.node.excerpt}</p>
              </Link>
            </li>
          }
          )}

et tout est ok maintenant.

magicly le 17 juil. 2017

👍6

Merci @magicly d'avoir écrit ce correctif, ce problème m'a vraiment fait trébucher pendant que je migrais de Gatsbyv 0.x vers v1.x. Pour tous ceux qui tombent dessus, je voulais la même chose, mais je voulais aussi que l'extension de fichier soit dynamique.

Dans mon cas, et dans le cas de @magicly, d'après l'apparence des choses, nous créons une image de couverture pour un article individuel, avec le chemin provenant du frontmatter de Markdown. Avec le contexte d'un projet qui ressemble à quelque chose comme le blog de démarrage par défaut de Gatsby, vous en avez probablement quelques-uns comme celui-ci :

---
title: The title of the post
featured_image: ./teaser.jpg
---

Ensuite, dans vos requêtes GraphQL sur la page d'index qui répertorie tous vos articles, vous allez vouloir inclure le featured_image (ce que @magicly appelait cover ).

frontmatter {
  title
  featured_image {
    name
    ext
    relativePath
  }
}

Maintenant, vous voulez probablement parcourir tous les articles et afficher le titre et l'image en vedette sur la page d'index. Dans votre composant React, vous pouvez faire quelque chose comme :

// …

// 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>
)

Les docs pour require.context avec Webpack 2 expliquent les paramètres plus en détail, mais ne montrent pas vraiment un cas d'utilisation comme celui-ci, je ne pense pas. Quoi qu'il en soit, cela ne semble pas être tant un problème de Gatsby qu'un modèle assez courant qui nécessite (désolé) des connaissances un peu assez spécifiques sur Webpack.

@KyleAMathews Est-ce quelque chose qui pourrait vous intéresser que je développe pour les docs ? Ou y a-t-il un exemple / une meilleure approche pour ce genre de chose que j'ai raté ? Merci!

kennethormandy le 23 août 2017

👍3

La partie 5 du didacticiel va aborder ce sujet, mais en attendant, consultez www et gatsbygram, par exemple https://github.com/gatsbyjs/gatsby/blob/66e86d4b45dad70bfcf78861002e0108863f7985/www/src/pages/index.js#L209

Si vous installez https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/ , les images liées dans frontmatter sont alors interrogeables via graphql.