Gatsby.js - Typography.js

после установки typography.js я получаю эту ошибку:

error There was an error compiling the html.js component for the development server.

  14 |   // Create family + styles string
  15 |   var fontsStr = '';
> 16 |   if (props.typography.options.googleFonts) {
     | ^
  17 |     var fonts = props.typography.options.googleFonts.map(function (font) {
  18 |       var str = '';
  19 |       str += font.name.split(' ').join('+');

  WebpackError: Cannot read property 'googleFonts' of undefined

  - GoogleFont.js:16 GoogleFont
    ~/react-typography/dist/GoogleFont.js:16:1
...

Я не уверен, что это значит и как это исправить. Я использую стартовый пакет Gatsby.js по умолчанию

typography.js так:

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.45,
  headerFontFamily: [
    "Avenir Next",
    "Helvetica Neue",
    "Segoe UI",
    "Helvetica",
    "Arial",
    "sans-serif",
  ],
  bodyFontFamily: ["Georgia", "serif"],
});

и gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-typography`, 
      options: {
        pathToConfigModule: 'src/utilities/typography.js'
      },
    },
  ]
};
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
0
0
1 034
1

Ответы 1

У меня была такая же ошибка, и я смог исправить ее, добавив экспорт внизу следующим образом:

export default typography;

Спасибо octalmage on the reactiflux discord за помощь мне в этом. Теперь отлично работает. Надеюсь, это поможет!

Спасибо, Алекс! Работает отлично. Действительно полезно. Для других: как предположил Алекс, export default typography идет в самый конец файла typography.js.

Blix 29.07.2018 09:40

Другие вопросы по теме