Gatsby: Error: Cannot find module 'prismjs' after installing 'gatsby-remark-prismjs'

Created on 10 Sep 2018  路  3Comments  路  Source: gatsbyjs/gatsby

After installing 'gatsby-remark-prismjs' and including it inside of thegatsby-config.js file, Gatsby is throwing this error when trying to compile:

error Plugin gatsby-transformer-remark returned an error


  Error: Cannot find module 'prismjs'

  - v8-compile-cache.js:159 require
    [client]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - highlight-code.js:3 Object.<anonymous>
    [client]/[gatsby-remark-prismjs]/highlight-code.js:3:13

  - v8-compile-cache.js:178 Module._compile
    [client]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [client]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - index.js:6 Object.<anonymous>
    [client]/[gatsby-remark-prismjs]/index.js:6:21

  - v8-compile-cache.js:178 Module._compile
    [client]/[v8-compile-cache]/v8-compile-cache.js:178:30

  - v8-compile-cache.js:159 require
    [client]/[v8-compile-cache]/v8-compile-cache.js:159:20

  - extend-node-type.js:494
    [client]/[gatsby-transformer-remark]/extend-node-type.js:494:28

  - debuggability.js:313 Promise._execute
    [client]/[bluebird]/js/release/debuggability.js:313:9

I have uninstalled and reinstalled 'gatsby-remark-prismjs' to no avail. Here is a look inside my gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Maison Moa | Web Developer',
  },
  plugins: ['gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 192,
            },
          },
          'gatsby-remark-prismjs',
        ],
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages/blog_posts`,
        name: 'blog posts',
      },
    },
  ],
};

Here is my package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.277",
    "gatsby-link": "^1.6.46",
    "gatsby-plugin-react-helmet": "^2.0.11",
    "gatsby-plugin-sharp": "^1.6.48",
    "gatsby-plugin-styled-components": "^2.0.11",
    "gatsby-remark-images": "^1.5.67",
    "gatsby-remark-prismjs": "^2.0.5",
    "gatsby-source-filesystem": "^1.5.39",
    "gatsby-transformer-remark": "^1.7.44",
    "react": "^16.3.2",
    "react-animations": "^1.0.0",
    "react-helmet": "^5.2.0",
    "react-twitter-widgets": "^1.7.1",
    "styled-components": "^3.4.5"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.13.7"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

Here is gatsby info copied directly from my terminal:

  System:
    OS: macOS High Sierra 10.13.3
    CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 9.10.1 - /usr/local/bin/node
    npm: 5.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.0.3
  npmPackages:
    gatsby: ^1.9.277 => 1.9.277
    gatsby-link: ^1.6.46 => 1.6.46
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48
    gatsby-plugin-styled-components: ^2.0.11 => 2.0.11
    gatsby-remark-images: ^1.5.67 => 1.5.67
    gatsby-remark-prismjs: ^2.0.5 => 2.0.5
    gatsby-source-filesystem: ^1.5.39 => 1.5.39
    gatsby-transformer-remark: ^1.7.44 => 1.7.44
  npmGlobalPackages:
    gatsby-cli: 1.1.58

Most helpful comment

As per documentation, you'll need to manually install prismjs when using gatsby-remark-prismjs:

npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

All 3 comments

As per documentation, you'll need to manually install prismjs when using gatsby-remark-prismjs:

npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

Yup, that sounds like the problem.

Excellent. Thanks for pointing out my oversight.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jimfilippou picture jimfilippou  路  3Comments

timbrandin picture timbrandin  路  3Comments

rossPatton picture rossPatton  路  3Comments

KyleAMathews picture KyleAMathews  路  3Comments

3CordGuy picture 3CordGuy  路  3Comments