prismjs - Using Prism.js line-highlight plugin with Next.js app causes "Text content did not match" error

Question

I have basic Prism.js functionality working with my Next.js site by doing the following things:

package.json

  "dependencies": {
   ...
    "next": "9.5.3",
    "react": "16.13.1",
    "typescript": "3.9.4",
    "prismjs": "1.22.0"
  },
  "devDependencies": {
    ...
    "@types/prismjs": "1.16.2"
  }

pages/_app.tsx

...
import "prismjs/themes/prism-tomorrow.css";
...

pages/blog-article.tsx

...
import Prism from "prismjs";
import "prismjs/components/prism-hcl";
import "prismjs/plugins/line-highlight/prism-line-highlight";
...

export default function BlogArticle(){
  useEffect(() => {
    if (typeof window !== 'undefined') {
      Prism.highlightAll();
    }
  }, []);

  return <div>
    <pre className="language-hcl" style={{marginTop: "1em"}}>
      <code>{`xxx`}</code>
   </pre>
 </div>
}

That all works fine and source code is hightlighted properly - the problem comes when I try to use the line-highlight plugin for Prism.

When I add the data-line attribute to the HTML, as following.

pages/blog-article.tsx

...
    <pre className="language-hcl" style={{marginTop: "1em"}} data-line={1}>
      <code>{`xxx`}</code>
   </pre>
...

I get the following error:

Warning: Text content did not match. Server: "xxx 
" Client: "xxx"

So, if I'm understanding right: this is an error from Next.js, telling me that my server-rendered and client-rendered content are different?

Looking at the error message, it looks like the plugin is adding a newline at the end of the content, but only during the server-render, not the client-render.

Note that other Prism plugins seem to work; I tried out the line-numbers plugin and it didn't cause this problem.

Is this a bug with Prism.js, the line-highlight plugin or am I doing something wrong?

Is there a workaround I can do to get it going?

Answer 1

等待大神答复