NextJS组件在开发模式下工作正常，但在生产模式下却不起作用。

Question

我在使用NextJS的开发模式和生产模式时，遇到了'react-highlight'组件的问题。

在开发模式下，该组件以格式化样式正确地渲染。然而，在生产模式下，它只显示纯文本，没有预期的格式。

我对NextJS相对陌生，所以不确定是什么原因导致了这种差异。您有任何关于可能原因的想法吗？非常感谢您的帮助。

Header.tsx

'use client'
import "./Header.scss";
import { CodeBlock } from '../CodeBlock/CodeBlock';
import { codeSnipetsHeader, codeSnipetsHeader2 } from "./data";
import { useEffect, useRef } from "react";
import { motion } from "framer-motion";
import { usePathname } from 'next/navigation';

export function Header(): JSX.Element {

    const pathname: string = usePathname();

    /*Using useRef and ++ to regenerate <Header/> and play the animation each time the pathname changes. **/
    const ref = useRef<number>(0);
    useEffect(() => {
        ref.current++;
    }, [pathname]);

    let codeSnipetstoShow = codeSnipetsHeader2;
    if (pathname.length < 2) { codeSnipetstoShow = codeSnipetsHeader; }

    return (
        <header>
            <motion.div key={ref.current} className="group" exit={{ opacity: 0 }} transition={{ duration: 1 }}>
                {codeSnipetstoShow.map((value, index): JSX.Element => (
                    <motion.div key={index}
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 - (index * 0.2) }}
                        transition={{ duration: index + 1 }}
                    >
                        <CodeBlock language="typescript" text={value.text} fontSize={value.fontSize} margin={value.margin} />
                    </motion.div>
                ))}
            </motion.div>
        </header>
    );
}

CodeBlock.tsx

import { CSSProperties } from "react";
import Highlight from 'react-highlight';
import { motion } from 'framer-motion';
import './CodeBlock.scss';

interface CodeBlockProps {
    text: string;
    margin?: string;
    fontSize: number;
    language: "typescript" | "javascript" | "java" | "php";
}

/**
* @param text The text to be displayed as a code block
* @param margin Margin as top | right | bottom | left (in pixels)
* @param fontSize Display the text with the requested font size (in pixels)
* @param language The format (language to be used) for formatting
* @returns A code block that displays lines of code with color and formatting
**/

export function CodeBlock(props: CodeBlockProps): JSX.Element {

    const marginStyle: CSSProperties = props.margin ? { margin: props.margin } : {};
    const finalStyle: CSSProperties = { ...marginStyle, fontSize: props.fontSize };

    return (
        <motion.div className='codeblock' style={finalStyle}>
            <Highlight language={props.language}>
                {props.text}
            </Highlight>
        </motion.div>
    );
}

看图片： 开发模式 生产模式 我尝试使用动态导入，但没有成功。 我尝试修改我的CSS并拆分，但也没有成功。

我猜这可能与静态渲染有关？不太确定。

- Jérôme MARICHEZ

Answer 1

我通过卸载 'react-highlight' 包并直接使用 Highlight 库来修复了它，代码如下：

CodeBlock.tsx

'use client'
import { CSSProperties, useEffect } from "react";
import { motion } from 'framer-motion';
import './CodeBlock.scss';
import hljs from './highlight.js_11.7.0.min.js';

interface CodeBlockProps {
    text: string;
    margin?: string;
    fontSize: number;
    language: "typescript" | "javascript" | "java" | "php";
}

/**
* @param text The text to be displayed as a code block
* @param margin Margin as top | right | bottom | left (in pixels)
* @param fontSize Display the text with the requested font size (in pixels)
* @param language The format (language to be used) for formatting
* @returns A code block that displays lines of code with color and formatting
**/

export function CodeBlock(props: CodeBlockProps): JSX.Element {

    const marginStyle: CSSProperties = props.margin ? { margin: props.margin } : {};
    const finalStyle: CSSProperties = { ...marginStyle, fontSize: props.fontSize };

    useEffect(() => {
        (async () => {
            // @ts-ignore
            await hljs.highlightAll();
        })();
    }, []);

    return (
        <motion.div className='codeblock' style={finalStyle}>
            <pre key={Math.floor(Math.random() * 4)}>
                <code>{props.text}</code>
            </pre>
        </motion.div >
    )

}

我目前没有更改 `Header.tsx` 文件。 我不知道如何给 `hljs.highlightAll();` 添加类型，所以我使用了 `// @ts-ignore`。

现在在生产模式下它也按预期工作。 我猜测 'react-highlight' 包中的某些功能可能不再起作用了。

- Jérôme MARICHEZ