无法将JS文件导入TSX文件

大家好，我是React的新手。我正在用打字稿构建我的应用程序，并希望添加Stripe进行在线支付。但是我找不到关于stripe的打字稿教程，所以我尝试使用javascript来编写stripe部分。但是当我触发条纹时。出现以下错误：

提到stackOverFlow上的其他解决方案，我使用了不同的导入方法，例如

import stripe from './stripe';
import * as stripe from './stripe';

但它们都不能解决我的问题。

我的代码有什么问题？

以下是代码：对于条带文件：

import React from 'react'
import { Element } from "@stripe/react-stripe-js"
import { loadStripe } from '@stripe/stripe-js'
import "./Stripe.css"
const PaymentForm = require ('./PaymentForm.js')


const PUBLIC_KEY = "pk_test_XXXXXXX"

const stripeTestPromise = loadStripe(PUBLIC_KEY)

export default function Stripe() {
    return (
        <Element stripe={stripeTestPromise}>
            <PaymentForm />
        </Element>
    )
}

付款方式：

import React, { useState } from 'react'
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import * as axios from 'axios'
import "./Stripe.css"

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "#c4f0ff",
            color:"fff",
            fontWeight: 500,
            fontSize: "16px",
            fontSmoothing:"antialiased",
        },
        invaild: {
            iconColor: "#ffc7ee",
            color: "ffc7ee"
        }
    }
}

export default function PaymentForm() {
    const [success, setSuccess] = useState(false)
    const stripe = useStripe()
    const elements = useElements()

    const handleSubmit = async (e) => {
        e.preventDefault()
        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardElement)
        })


        if (!error) {
            try {
                const { id } = paymentMethod
                const response = await axios.post('http://localhost:8080/checkout', {
                    amount: 500,
                    id
                })

                if (response.data.success) {
                    console.log('Successful payment')
                    setSuccess(true)
                }
            } catch (error) {
                console.log('Error', error)
            }
        } else {
            console.log(error.message)
        }
    }


    return (
        <div>
            {!success ?
                <form onSubmit={handleSubmit}>
                    <fieldset className="FormGroup">
                        <div className="FormRow">
                            <CardElement options={CARD_OPTIONS} />
                        </div>
                    </fieldset>
                    <button>Pay</button>
                </form >
                :
                <div>
                    <h2>You just bought a sweet saptula</h2>
                </div>
            }
        </div>
    )
}