当实际存在导出时，Page 无法识别 React 模块上的导出

Question

现在我正在练习 Three.js 库，但我在导出方面遇到了一些问题...... 这里是

App.jsx:

import styled from "styled-components"
import React from "react"

import { Contact } from "../components/Contact"
import { Hero } from "../components/Hero"
import { Works } from "../components/Works"
import { Who } from "../components/Who"

const Container = styled.div`
  height: 100vh;
 
  scroll-behavior: smooth;
  overflow-y: auto;
  scrollbar-width: none;
  color: white;
  background: url("./img/bg.jpeg");
  &::-webkit-scrollbar{
    display: none;
  };
  
`

function App() {

  return (
    <Container>
      <Hero/>
      <Who/>
      <Works/>
      <Contact/>
    </Container>
  )
}

export default App

这是

Works.jsx

组件本身

import React from 'react'
import styled from 'styled-components'

const Section = styled.div`
  height: 100vh;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  position: relative;
  color: black;
  font-size: 14px;
  font-weight: 300;
`;


export default  Works = () => {
  return (
    <Section> </Section>
  );
};

导航器控制台中显示的错误是：

当我将鼠标移到 App.jsx 中的导入上时，我也注意到了这一点：

这是

Works.jsx

导入

这是来自

Contacts.jsx

导入

的消息

我真的不知道这个错误是从哪里来的，我已经尝试了所有方法，但似乎没有任何效果，我正在使用 React、Vite、yarn 和 styled-components

当我从导入中删除 Works.js 组件时，一切似乎都工作正常。

Answer 1

更改：

export default Works = () => { return... }

致：

const Works = () => { return... }
export { Works }

或者：

export const Works = () => { return... }

您将“Works”导入为命名导出，但将其导出为默认导出。将导入更改为

import Works from "../components/works"

或按照上面的说明进行操作。

希望对您有所帮助！