React Typescript项目中运行npm start时出现JSON中位置0处的意外标记。

Question

每当我尝试运行“npm start”命令时，就会出现这个奇怪的错误。几个小时前它还能正常工作，现在它就是无法启动。我尝试重新安装了TypeScript但没有起作用。

这是我从终端获得的信息： 控制台日志 这是我一直在Dashboard.tsx上工作的代码：

import React from 'react'
import PieChart from '../components/PieChart/PieChart'
import ColumnChart from '../components/ColumnChart/ColumnChart'
import NavItem from '../components/NavItem/NavItem'

import '../styles/DashBoard.scss'
import dashboardIcon from '../assets/images/dashboard.svg'
import exitIcon from '../assets/images/exitIcon.svg'
import footerStrip from '../assets/images/footerStrip.svg'
import headerStrip from '../assets/images/headerStrip.svg'

const DashBoard = () => {
return (
    <>
    <aside>
        <header>
            <img src={headerStrip} alt="Top header green strip" />
        </header>
        <nav>
            <section id="mainNavigation">
                <ul>
                    <li>
                        <NavItem 
                            alt='Dashboard menu item'
                            path='/dashboard'
                            src={dashboardIcon}
                            >Dashboard</NavItem>
                    </li>
                </ul>
            </section>

            <section id="programmer">
                <header>
                    <span>PROGRAMADOR</span>
                </header>
                <p>Edgar Marques</p>
                <ul>
                    <li>
                        <NavItem
                            alt='Exit platform icon'
                            src={exitIcon}
                            path='/'
                            >Sair</NavItem>
                    </li>
                </ul>
            </section>
        </nav>

        <footer>
            <img src={footerStrip} alt="Bottom navigation green strip" />
            <div>Uma plataforma <p>NEW WAVE</p></div>
        </footer>
    </aside>

    <main>

    </main>
    </>
)

}

export default DashBoard

这里是NavItem.tsx。我使用静态数据先实现前端，代码中没有调用JSON.parse。

import style from './NavItem.module.scss'

type NavItemData = {
    children: any
    src: any 
    path: string 
    alt: string 
}

const NavItem = (props: NavItemData) => {
    return (
        <div className={style.navWrapper}>
            <a href={props.path} className={style.navLink}>
                <img src={props.src} alt={props.alt}/>
                {props.children}
            </a>
        </div>
    )
}

export default NavItem

- Gentil Alyson

---

仅凭错误消息我们无法做太多事情。你在某个地方调用了JSON.parse并提供了一个无效的JSON字符串。你需要展示一些代码以便我们提供帮助。 - about14sheep

我已经更新了帖子。 - Gentil Alyson

Answer 1

我通过删除node_modules文件夹并运行npm install来解决了这个错误。

- MichalPr

Answer 2

尝试在每个后面加上逗号：

type NavItemData = {
    children: any,
    src: any,
    path: string,
    alt: string 
}

- Dave

---

谢谢，但我没有在这里工作 :( - Gentil Alyson

Answer 3

我通过创建一个新的文件夹，并从我的存储库中拉取项目来解决了这个问题。不知何故，这起作用了。

- Gentil Alyson

Answer 4

删除 node_modules 文件夹并执行 npm install 命令可解决该问题。

- Nnaji Chimuanya