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
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.
Most helpful comment
As per documentation, you'll need to manually install
prismjswhen usinggatsby-remark-prismjs: