Reactjs Next.JS版本与本地开发版本的问题

错误描述 我正在与NextJS中brainhubeu的一个名为react carousel的库合作。即使在使用带有ssr:false的动态导入时，构建UI看起来也很奇怪，但是开发UI非常好

开发用户界面-

我也在Codesandbox中重新创建了它（这一个用于运行

npm run dev

的开发环境）-

但是，当我构建它，然后使用

npm run build

和&

npm run start

-

要在codesandbox中重新创建它-

在右下角单击+符号可获得新的终端

npm运行构建

npm run start（我已经在package.json文件中添加了“start”：“next start-p 8080”，因此将为沙箱创建一个新选项卡，并可以访问，其中8080表示端口号）

预期行为 UI应该与npm运行开发时看到的UI相同

问题

为什么我的开发UI工作得很好，但是当我构建和提供服务时，UI很奇怪。在NextJS的上下文中，npm-run-dev和npm-run-build&npm-run-start之间到底有什么区别

这个问题有什么解决办法吗

我的尝试

我一直在努力解决这个问题，并在关于NextJS的Github官方讨论中提出了这个问题。找不到任何答案

我甚至在react carousel的Github上创建了一个Github Bug问题，他们帮不了多少忙

---

谢谢你的帮助。

我解决了这个问题。在我的例子中，这是由于我设置（dev）的方式与下一次构建和下一次启动之间的差异。记下几件事来整理它-

如果您使用了外部库，很可能它不支持服务器端渲染。我正在使用Brainhubeu的react carousel，它有一些问题。通过导入库来解决此问题

另一个问题是，我正在使用/遵循过时的Tailwind和NextJS样板代码。因此，postss.config.js的配置方式很容易出错。这是问题的症结所在。至少对我来说-在开发过程中，一切正常，因为POSTSS没有清除我导入的任何第三方插件/库类，但是，当我执行npm运行build和npm运行start时，它们被清除了

现在让我们快速了解您如何解决这个问题-

使用TailwindCSS提供的内置清除选项。为此，。正如他们所提到的，为了控制生成的样式表的文件大小，本例使用Tailwind CSS的清除选项来删除未使用的CSS

或者，如果你不想重蹈覆辙，你也可以尝试修补这个问题。我只会建议这种方法，如果你几乎完成了这个项目，只是想让这个工作，因为这不是一个好的解决方案。你将不得不将一堆被清除的css文件列入白名单。这就是我所做的，但您可能也可以将丢失的更多CSS类列入白名单-

//postss.config.js
常量purgecss=[
“@fullhuman/postcss purgecss”，
{
内容：[
“/node_modules/@brainhubeu/react carousel/lib/style.css”，
“/node_modules/@brainhubeu/react carousel/lib/style.css.map”，
“/node_modules/react to astify/dist/*.css”，
“/components/***.js”，
“/pages/***.js”，
],
defaultExtractor:（内容）=>{
const broadMatches=content.match（/[^”`\s]*[^”`\s://g）| |[]；
const innerMatches=content.match（/[^“'`\s.（）]*[^”`\s.（）：]/g）| |[]；
返回broadMatches.concat（innerMatches）；
},
},
];
module.exports={
插件：[
“邮政编码导入”，
“tailwindcss”，
“自动刷新器”，
…（process.env.NODE_env===“生产”？[purgecss]：[]），
],
};

尽管如此，我还是建议您采用第一种方式，将您的代码从旧的repo复制到新的repo，使用SSR:false来使用讨厌SSR的客户端库，您应该很乐意这样做

---

如果您需要帮助，可以联系我的Twitter。

我已经解决了这个问题。在我的例子中，这是由于我设置（dev）的方式与下一次构建和下一次启动之间的差异。记下几件事来整理它-

如果您使用了外部库，很可能它不支持服务器端渲染。我正在使用Brainhubeu的react carousel，它有一些问题。通过导入库来解决此问题

另一个问题是，我正在使用/遵循过时的Tailwind和NextJS样板代码。因此，postss.config.js的配置方式很容易出错。这是问题的症结所在。至少对我来说-在开发过程中，一切正常，因为POSTSS没有清除我导入的任何第三方插件/库类，但是，当我执行npm运行build和npm运行start时，它们被清除了

现在让我们快速了解您如何解决这个问题-

使用TailwindCSS提供的内置清除选项。为此，。正如他们所提到的，为了控制生成的样式表的文件大小，本例使用Tailwind CSS的清除选项来删除未使用的CSS

或者，如果你不想重蹈覆辙，你也可以尝试修补这个问题。我只会建议这种方法，如果你几乎完成了这个项目，只是想让这个工作，因为这不是一个好的解决方案。你将不得不将一堆被清除的css文件列入白名单。这就是我所做的，但您可能也可以将丢失的更多CSS类列入白名单-

//postss.config.js
常量purgecss=[
“@fullhuman/postcss purgecss”，
{
内容：[
“/node_modules/@brainhubeu/react carousel/lib/style.css”，
“/node_modules/@brainhubeu/react carousel/lib/style.css.map”，
“/node_modules/react to astify/dist/*.css”，

// postcss.config.js 
  
const purgecss = [
  "@fullhuman/postcss-purgecss",
  {
    content: [
      "./node_modules/@brainhubeu/react-carousel/lib/style.css",
      "./node_modules/@brainhubeu/react-carousel/lib/style.css.map",
      "./node_modules/react-toastify/dist/*.css",
      "./components/**/*.js",
      "./pages/**/*.js",
    ],
    defaultExtractor: (content) => {
      const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];
      const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];
      return broadMatches.concat(innerMatches);
    },
  },
];
module.exports = {
  plugins: [
    "postcss-import",
    "tailwindcss",
    "autoprefixer",
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};