Reactjs 进口及；导出只能出现在顶层-CRA React应用程序和Typescript

以前有人问过这个问题，但我相信我的背景是不同的。我正在运行配置了

Create React app

的React app，并使用

--typescript

标志运行

我试图配置eslint、prettier和husky来运行预编译脚本，但事情开始出错

我得到的错误是：

“导入”和“导出”可能只出现在顶层，它与以下组件中的此行相关：
导出默认注册

import React from 'react'
import { Link, withRouter } from 'react-router-dom'
import { compose } from 'recompose'

import { withFirebase } from '../Firebase'
import * as ROUTES from '../../constants/routes'

const SignUp = () => (
  <div>
    <h1>SignUp</h1>
    <SignUpForm />
  </div>
)

interface Props {
  firebase: any
}

const Admin = ({ firebase }: Props) => {

const SignUpFormData = ({ firebase, ...props }: Props) => {
  const initialState = {
    username: '',
    email: '',
    password: '',
    repeatPassword: '',
  }

  const stateReducer = (state, update) => ({ ...state, ...update })
  const [state, dispatch] = React.useReducer(stateReducer, initialState)
  const [error, setError] = React.useState({})

  const formIsInvalid =
    state.password !== state.repeatPassword ||
    state.password === '' ||
    state.username === '' ||
    state.email === ''

  const onSubmit = event => {
    event.preventDefault()
    const { username, email, password } = state

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then(res => {
        return firebase
          .database()
          .ref(`users/${res.user.uid}`)
          .set({
            username,
            email,
          })
      })
      .then(() => {
        dispatch(initialState)
        props.history.push(ROUTES.HOME)
      })
      .catch(error => setError(error))
  }

  const handleChange = ({ currentTarget: { name, value } }) => {
    dispatch({ [name]: value })
  }

  return (
    <form onSubmit={onSubmit}>
      <input
        name="username"
        value={state.username}
        onChange={handleChange}
        placeholder="Full name"
      />
      <input
        name="email"
        value={state.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        name="password"
        type="password"
        value={state.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <input
        name="repeatPassword"
        type="password"
        value={state.repeatPassword}
        onChange={handleChange}
        placeholder="Repeat password"
      />
      <button disabled={formIsInvalid} type="submit">
        Sign Up
      </button>
      {error && <p>{error.message}</p>}
    </form>
  )
}

const SignUpLink = () => (
  <p>
    Don't have an account yet? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
  </p>
)

const SignUpForm = compose(
  withRouter,
  withFirebase,
)(SignUpFormData)

export default SignUp

export { SignUpForm, SignUpLink }

从“React”导入React
从“react router dom”导入{Link，withRouter}
从“重新组合”导入{compose}
从“../Firebase”导入{withFirebase}
从“../../constants/ROUTES”导入*作为路由
常量注册=（）=>(
报名
)
界面道具{
火基：有吗
}
const Admin=（{firebase}:Props）=>{
const SignUpFormData=（{firebase，…props}:props）=>{
常量初始状态={
用户名：“”，
电子邮件：“”，
密码：“”，
重复密码：“”，
}
const stateReducer=（state，update）=>（{…state，…update}）
const[state，dispatch]=React.useReducer（stateReducer，initialState）
const[error，setError]=React.useState（{}）
常数formIsInvalid=
state.password！==state.repeatPassword||
state.password===''||
state.username==''||
state.email==''
const onSubmit=事件=>{
event.preventDefault（）
const{username，email，password}=state
火基
.auth（）
.createUserWithEmailAndPassword（电子邮件，密码）
。然后（res=>{
返回火基
.数据库（）
.ref（`users/${res.user.uid}`）
.设置({
用户名，
电子邮件，
})
})
.然后（（）=>{
调度（初始状态）
道具。历史。推送（路线。主页）
})
.catch（错误=>setError（错误））
}
const handleChange=（{currentTarget:{name，value}}}）=>{
分派（{[name]：value}）
}
返回(
注册
{error&{error.message}
}
)
}
常量符号上行链路=（）=>(

还没有帐户吗？注册吧

)
const SignUpForm=compose(
用路由器，
使用Firebase，
)（SignUpFormData）
导出默认注册
导出{SignUpForm，SignUpLink}

我尝试从中删除eslint条目，删除
warn.lock
，删除节点模块并重新安装deps，但没有成功

我迷路了，有人对从哪里开始调试有什么建议吗

如需更多信息，请大声呼叫。
非常感谢

编辑
另外要注意的是，我最初是用标准js编写应用程序的auth部分的，目的是学习js，这些问题发生在我将应用程序转换为Typescript文件的过程中，因此我混合了
.js
和
.tsx
。我不确定这是否相关。
我想我知道了，只是缺少一个结束的花括号基特

可能在这里：

const Admin = ({ firebase }: Props) => {

未关闭。
有多种方法可以将方法从一个文件导出到另一个文件

您可以直接添加导出关键字，如下所示：

export const SignUpLink = () => (
  <p>
    Don't have an account yet? <Link to={ROUTES.SIGN_UP}>Sign Up</Link>
  </p>
)

export const SignUpForm = compose(
  withRouter,
  withFirebase,
)(SignUpFormData)

我建议你看看这个，它肯定会有帮助的

如果您使用的是typescript，请务必添加linting规则，这将多次起到救命作用。
这很尴尬，这是从另一个组件粘贴到buy Confect中的。它甚至不属于该文件：（非常感谢）。
module.exports = {
 SignUpForm, SignUpLink
}