Freestyle09
Freestyle09

Reputation: 5508

Gatsby.js - Typography themes

I'm creating an application based on gatsby framework, but I have problem with initialize gatsby theme. From official documentation:

https://www.gatsbyjs.org/tutorial/part-three/

import Typography from 'typography';
import fairyGateTheme from 'typography-theme-github';

const typography = new Typography(fairyGateTheme);

export const { scale, rhythm, options } = typography;
export default typography;

But typography-theme-github import has dotted underline when I hovered mouse on it I have got this tip:

Could not find a declaration file for module 'typography-theme-github'. '/Users/jozefrzadkosz/Desktop/hello-world/node_modules/typography-theme-github/dist/index.js' implicitly has an 'any' type. Try npm install @types/typography-theme-github if it exists or add a new declaration (.d.ts) file containing declare module 'typography-theme-github';ts(7016)

When I run gatsby develop I'm getting this error:

Error: Unable to find plugin "undefined". Perhaps you nee d to install its package?

EDIT

I have looked on this file node_modules/typography-theme-github/dist/index.js and I found one similar issue:

var _grayPercentage = require("gray-percentage");

This require has exactly same tip as my theme import.

SECOND EDIT

Gatsby.config.js

module.exports = {
  plugins: [
    [`gatsby-plugin-sass`],
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`
      }
    }
  ]
};

Upvotes: 0

Views: 770

Answers (1)

Derek Nguyen
Derek Nguyen

Reputation: 11577

I notice you placed gatsby-plugin-sass in an array, which is why gatsby didn't recognize it:

module.exports = {
  plugins: [
-   [`gatsby-plugin-sass`], <-- error
+   `gatsby-plugin-sass`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`
      }
    }
  ]
};

This is probably not a problem with gatsby-plugin-typography.

Upvotes: 1

Related Questions