next-dev.js:89 TypeError: 无法读取 null 的属性“parentNode”答案

【问题标题】：next-dev.js:89 TypeError: Cannot read property 'parentNode' of nullnext-dev.js:89 TypeError: 无法读取 null 的属性“parentNode”
【发布时间】：2021-05-04 19:11:58
【问题描述】：

我在通过npm run build 构建并使用npm run start 启动它后遇到此错误

知道为什么会出现这个错误吗？

我的整个布局也错了，我猜是因为tailwindcss错误

这是我的 _app.tsx

import type { AppProps } from 'next/app'
import "tailwindcss/tailwind.css"
import "../styles/styles.scss"
import { Provider, useSelector } from 'react-redux'
import { Application } from 'react-rainbow-components'
import { ThemeStore } from '../config/redux/ThemeStore'
import { theme } from '../config/react-rainbow/react-rainbow-config'
import { ThemeState } from '../config/redux/ThemeReducer'
import Navigation from '../components/navigation/Navigation'

const Child: React.FC = ({ children }) => {

  const isDark = useSelector<ThemeState, ThemeState["isDark"]>(state => state.isDark)

  return <div className={`${isDark ? "dark blackThemeColor test" : "white whiteThemeColor"}` + " min-h-screen font-body pr-0"} style={{ height: '150vh' }}>{children}</div>;
}
const MyApp = ({ Component, pageProps }: AppProps) => {

  return (
    <Provider store={ThemeStore}>
      <Application theme={theme}>
        <Child>
         <Navigation />
          <Component {...pageProps} />
        </Child>
      </Application>
    </Provider>
  );
};
export default MyApp

感谢所有帮助

【问题讨论】：

您为什么要直接在您的_app 中导入"tailwindcss/tailwind.css"？你不应该这样做。

标签： reactjs next.js tailwind-css

【解决方案1】：

@juliomalves 指出我正在导入 tailwindcss/tailwind.css 而它并不需要。

这是因为在设置项目时，我在 docs 中看到了这个

直接在你的 JS 中导入 Tailwind 如果你不打算写项目中的任何自定义 CSS，包含 Tailwind 的最快方法是直接在 pages/_app.js 中导入：

重看后也有这个选项

在您的 CSS 中包含 Tailwind 打开 ./styles/globals.css 文件 Next.js 默认为您生成并使用 @tailwind 指令包括 Tailwind 的基础、组件和实用程序样式，替换原文件内容：

所以我删除了tailwindcss导入并在我的scss文件中导入了这样的tailwind：

@tailwind base;
@tailwind components;
@tailwind utilities;

现在当npm run build 和npm run start 布局正确并且错误消失了

【讨论】：