导入和导出可能只出现在顶层 - CRA React App with Typescript答案

【问题标题】：import & export may only appear at the top level - CRA React App with Typescript导入和导出可能只出现在顶层 - CRA React App with Typescript
【发布时间】：2019-11-15 22:41:53
【问题描述】：

以前有人问过这个问题，但我相信我的上下文不同。我正在运行一个使用 Create React App 配置的 React 应用程序，并使用 --typescript 标志运行。

我尝试配置 eslint、prettier 和 husky 来运行预编译脚本，结果开始出错。

我得到的错误是：'import' and 'export' may only appear at the top level，它与以下组件中的这一行有关： export default SignUp

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 }

我尝试从 package.json 中删除 eslint 条目，删除 yarn.lock，删除 node_modules 并重新安装 deps，但没有任何乐趣。

有没有人对从哪里开始调试有任何建议，我迷路了？

需要更多信息，请大声疾呼。非常感谢。

编辑还要注意的是，我最初用标准js编写了应用程序的auth部分，以学习JS，而这些问题发生在我将应用程序转换为Typescript文件的过程中，所以我混合了@987654328 @ 和 .tsx。我不确定这是否相关。

【问题讨论】：

标签： reactjs typescript eslint create-react-app

【解决方案1】：

我想我明白了，只是缺少一个右大括号。

大概在这里：

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

没有关闭。

【讨论】：

这很尴尬，这是从不同的组件粘贴在购买事故中。它甚至不属于那个文件:(非常感谢。

【解决方案2】：

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

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

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)

如果没有，您可以在文件末尾添加 module.exports，如下所示：

module.exports = {
 SignUpForm, SignUpLink
}

我建议你看看这个link。这肯定会有所帮助。

如果您使用的是 typescript，请务必添加 linting 规则，这将是很多次的救命稻草。

【讨论】：