Vite无法解析导出{默认为组件}

Question

我也有这样的问题。我安装了一个插件，它向 VS Code 添加了一个 React 组件，并执行默认操作，例如导入 React 等。

所以这个插件会生成一个包含组件和index.js的文件夹，其中公共导出如下所示：

export {default as  CreateArticlePage} from './CreateArticlePage';

一开始我以为这是某种奇怪的语法，但是谷歌搜索后我意识到这个东西是在互操作中的，应该在

中正常处理

但是在控制台和构建过程中，他在样式中写入了错误

同时，并非所有组件都以这种方式声明

我正在vite中的react模板上写

请帮我解决并了解问题所在。

配置：

vite.config.js

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

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

package.json

{
  "name": "social-network",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.3.4",
    "styled-components": "^6.1.8"
  },
  "devDependencies": {
    "@babel/plugin-proposal-export-default-from": "^7.24.1",
    "@babel/preset-react": "^7.24.1",
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^5.1.3",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "prettier": "^3.2.5",
    "vite": "^5.1.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "vitest"
    ]
  }
}

没有其他像 babel 这样的冲突

Answer 1

错误告诉您在 App.jsx 中您需要导入命名导出，因为不存在默认导出：

import { CreateArticlePage } from './pages/CreateArticlePage'

这个index.js文件：

export {default as  CreateArticlePage} from './CreateArticlePage';

不导出默认值。它将

CreateArticlePage

中的默认导出重新导出为命名导出 -

CreateArticlePage

Answer 2

您已将默认值导出为命名常量。 你只需要这样导入

import {CreateArticlePage} from '../pages/CreateArticlePage'