mAAdhaTTah / babel-plugin-prismjs

A babel plugin to use PrismJS with standard bundlers.
157 stars 9 forks source link

Reference Error with Next.js #194

Open shuent opened 3 years ago

shuent commented 3 years ago

Without configuration with this plugin, and with prismjs and css file downloaded from official page does work correctly.

But using this causes error:

ReferenceError: Prism is not defined
    at Object.<anonymous> (/Users/myname/Development/mysite.github.io/node_modules/prismjs/components/prism-clike.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1121:10)
    at Module.load (node:internal/modules/cjs/loader:972:32)
    at Function.Module._load (node:internal/modules/cjs/loader:813:14)
    at Module.require (node:internal/modules/cjs/loader:996:19)
    at require (node:internal/modules/cjs/helpers:92:18)
    at eval (webpack-internal:///prismjs/components/prism-clike:1:18)
    at Object.prismjs/components/prism-clike (/Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:511:1)
    at __webpack_require__ (/Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:23:31)
    at eval (webpack-internal:///./src/pages/blog/[slug].tsx:12:88)
    at Module../src/pages/blog/[slug].tsx (/Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:444:1)
    at __webpack_require__ (/Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:23:31)
    at /Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:91:18
    at Object.<anonymous> (/Users/myname/Development/mysite.github.io/.next/server/pages/blog/[slug].js:94:10)
    at Module._compile (node:internal/modules/cjs/loader:1092:14)

in the code

import { useEffect } from 'react'
import Prism from 'prismjs'

import '/'

const Post = ({ mdContent, ...data }) => {
  useEffect(() => {
    Prism.highlightAll()
  }, [])

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.date}</p>
      <MdTransformer mdText={mdContent} />
    </div>
  )

.babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    [
      "prismjs",
      {
        "languages": ["javascript", "css", "markup"],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
      }
    ]
  ]
}
mAAdhaTTah commented 3 years ago

It's not clear to me what import '/' does, and the stack trace suggests it could be a reentrancy problem. Could you provide a reproducible example?

michalpolkowski commented 3 years ago

Removing .next folder and running the build again helped me.