Je viens de créer un nouveau projet Gatsby et j'ai créé quelques petits composants qui sont affichés sur une page d'index après avoir été importés comme ceci:

import Nav from "../components/Nav"
import Intro from "../components/Intro"
import About from "../components/About"
import Experience from "../components/Experience"
import Projects from "../components/Projects"
import Contact from "../components/Contact"
import Footer from "../components/Footer"

Voulant ranger cela un peu, j'ai découvert que vous pouviez définir des alias avec webpack et installé le gatsby-plugin-alias-importations pour y parvenir. Après avoir installé le plugin avec yarn add gatsby-plugin-alias-imports et ajouté la configuration nécessaire, mon gatsby-config.js ressemble à ceci:

const path = require('path')

module.exports = {
  siteMetadata: {
    title: "Site Title",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-alias-imports",
      options: {
        alias: {
          '@components': path.resolve(__dirname, 'src/components'),
          '@pages': path.resolve(__dirname, 'src/pages'),
        },
        extensions: [
          "js",
        ],
      }
    },
    ...
    ...

Mon projet est structuré comme suit:

.
├── README.md
├── gatsby-config.js
├── package.json
├── src
│   ├── components
│   │   ├── about.js
│   │   ├── contact.js
│   │   ├── experience.js
│   │   ├── footer.js
│   │   ├── intro.js
│   │   ├── nav.js
│   │   └── projects.js
│   ├── pages
│   │   ├── 404.js
│   │   └── index.js
│   └── scss
│       └── main.scss
├── static
│   └── static
│       └── icons
│           ├── github.svg
│           ├── instagram.svg
│           └── linkedin-in.svg
└── yarn.lock

Pourtant, chaque fois que j'essaye d'utiliser la syntaxe @components dans une importation:

import { Nav, Intro, About, Experience, Projects, Contact, Footer } from "@components"

yarn run develop signale que l'alias @components ne peut pas être résolu:

 ERROR #98124  WEBPACK

Generating development SSR bundle failed

Can't resolve '@components' in '/Users/James/Projects/personal-site/src/pages'

If you're trying to use a package make sure that '@components' is installed. If you're trying to use a
local file make sure that the path is correct.

File: src/pages/index.js:2:0

Est-ce que je rate quelque chose d'évident? J'ai lu la documentation du plugin et je ne pense pas avoir omis quoi que ce soit. J'ai bombardé node_modules et yarn.lock pour faire bonne mesure mais sans succès.

Est-ce que quelqu'un a des suggestions?

1
James Neill 12 mars 2021 à 20:18

1 réponse

Meilleure réponse

Un ami m'a fait remarquer qu'il me manquait une page index.js dans le répertoire src/components/.

Si je comprends bien, chaque fois que vous configurez un alias qui pointe vers un répertoire, il référencera en fait le fichier index.js contenu dans le répertoire spécifié.

Après avoir créé le fichier et réexporté les composants qu'il contient, webpack n'avait plus de problèmes.

Contenu de mon src/components/index.js:

export { default as Nav } from './nav';
export { default as Footer } from './footer';

export { default as About } from './about';
export { default as Contact } from './contact';
export { default as Experience } from './experience';
export { default as Intro } from './intro';
export { default as Projects } from './projects';
0
James Neill 13 mars 2021 à 00:43