reactjs Vite预览在Vite React应用程序中无法正常工作

bweufnob  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(259)

使用Vite创建了一个React应用程序,然后运行npm run buildnpm run preview,但它不工作。我得到了一个完全空白的页面和一个错误,说:
TypeError: e is nullUncaught TypeError: e is null

我的vite.config.js文件:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
});

我的package.json文件(如果有问题):

{
  "name": "homepage",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

编辑:解决了!我的项目中的react组件有一些错误,这些错误在npm run dev创建的网页中没有显示出来,但它们是导致错误的原因。其中一些错误是组件文件名与组件函数名不相同(得到export default function ed的那个)并以两个名称导入同一个文件。总而言之,一些组件有错误,没有"t显示在开发窗口中,并在构建中做了。检查您的组件是否有错误。

wydwbb8l

wydwbb8l1#

您已经安装了@types。您正在使用全局typescript吗?尚未安装。
另外,您的tsconfig.node.json看起来像什么?一个有效的例子是:

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

确保您的tsconfig.json链接到节点tsconfig:

"references": [{ "path": "./tsconfig.node.json" }]

你展示的其余代码看起来很好。我希望这能有所帮助!

**编辑****另外,请看一下这个与您的示例非常相似的工作示例,它可能会帮助您跟踪问题。此沙箱中有一个成功的buildpreview

https://codesandbox.io/p/sandbox/zen-sammet-imfzl5

相关问题