Documentation doesn't mention need to install prismjs alongside plugin

[skitterm]

I'm getting the following error when trying to compile my Next.js app, using this plugin:

Failed to compile.

./node_modules/next/dist/client/next.js
Error: Cannot find module 'babel-plugin-prismjs'
Require stack:
- \node_modules\next\dist\compiled\babel\bundle.js
- \node_modules\next\dist\compiled\babel\code-frame.js
- \node_modules\next\dist\build\webpack-config.js
- \node_modules\next\dist\build\index.js
- \node_modules\next\dist\cli\next-build.js
- \node_modules\next\dist\bin\next
    at loadPlugin.next (<anonymous>)
    at createDescriptor.next (<anonymous>)
    at Array.map (<anonymous>)
    at Generator.next (<anonymous>)

My .babelrc:

{

  "presets": ["next/babel"],
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["all"]
      }
    ]
  ]
}

My React component:

import React, { useEffect } from "react";
import Prism from "prismjs";

Prism.manual = true;
const PrismBlock = () => {
  useEffect(() => {
    Prism.highlightAll();
  }, []);

  return (
    <pre>
      <code className="language-jsx">{`
        ...

Dependencies in package.json:

"dependencies": {
    "next": "^11.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "babel-plugin-prismjs": "^2.1.0"
  }

I've scoured my setup but don't see anything awry. Any ideas?

[mAAdhaTTah]

Duplicate of #194. I need a reproducible test case to be able to investigate.

[skitterm]

Thanks for the speedy reply. Here's a repro case: https://github.com/skitterm/next-js-plugin-repro-case

I don't think this is a duplicate of #194, since that is a reference error and this is a compile error.

[mAAdhaTTah]

prismjs is a peerDependency, so you'll need to install that. I don't know why you don't get a warning though, but that's an npm thing. That said, I would welcome a doc update, maybe an "Install" section that mentions installing prismjs as well.

[skitterm]

I installed prismjs and re-ran the transpiler, but the same error still exists. I pushed up this change so the repro repo is still current.

[mAAdhaTTah]

"languages": ["all"] should be "languages": "all"

[skitterm]

I updated with that change, but am still seeing the error.

[mAAdhaTTah]

I'm not having any issues building & running the project:

 Jamess-iMac in ~/Code/JavaScript/next-js-plugin-repro-case
± |master ✓| → npm ci

added 280 packages, and audited 281 packages in 6s

found 0 vulnerabilities

 Jamess-iMac in ~/Code/JavaScript/next-js-plugin-repro-case
± |master ✓| → npm run build

> next-js-plugin-repro-case@1.0.0 build
> next build && next export

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                             Size     First Load JS
┌ ○ / (346 ms)                   199 kB          266 kB
└ ○ /404                         194 B          67.3 kB
+ First Load JS shared by all    67.1 kB
  ├ chunks/framework.3e4d63.js   42 kB
  ├ chunks/main.8d1561.js        23.3 kB
  ├ chunks/pages/_app.1a580d.js  979 B
  └ chunks/webpack.90a60b.js     838 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - using build directory: /Users/jamesdigioia/Code/JavaScript/next-js-plugin-repro-case/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "next.config.js". Generating map from "./pages"
info  - Launching 3 workers
info  - Exporting (2/2)
Export successful. Files written to /Users/jamesdigioia/Code/JavaScript/next-js-plugin-repro-case/out

 Jamess-iMac in ~/Code/JavaScript/next-js-plugin-repro-case
± |master ✓| → npm start

> next-js-plugin-repro-case@1.0.0 start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

The highlighting works but there's no theme configured, so there's no styles applied to the highlighting.