Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reference Error with Next.js #194

Open
shuent opened this issue Apr 14, 2021 · 2 comments
Open

Reference Error with Next.js #194

shuent opened this issue Apr 14, 2021 · 2 comments

Comments

@shuent
Copy link

shuent commented Apr 14, 2021

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
Copy link
Owner

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants