在新的反应项目中运行 npm start 命令时出现控制台错误

Question

我希望你帮我修复我遇到的一个错误，就是每次我创建一个新项目时，都会使用命令 npx create-react-app app-name 做出反应，然后是 cd 到目录和 npm start，我说一切都是正确的： 编译成功！

You can now view cacas in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.27.248.214:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

enter image description here

然后我转到浏览器，然后按 f12 启动检查器，然后遇到以下错误：

第一个错误

Error handling response: SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at chrome-extension://bmjmipppabdlpjccanalncobmbacckjn/js/content/content.js:60:21

根据错误在这一行

data = JSON.parse(data.cs_template);

显示完整代码

document.addEventListener('DOMContentLoaded', function () {

    for (var i = 0; i < blacklist.length; i++) {
        if (location.href.search(blacklist[i]) > 0)
            return;
    }

    cStyle = document.createElement('style');
    cStyle.id = 'cs_cursor_css_no_hd';
    document.head.appendChild(cStyle);

    if (!document.getElementById('elem_ext')) {
        elem_ext = document.createElement('div');
        elem_ext.id = 'elem_ext';
        elem_ext.style.display = 'none';
        document.documentElement.appendChild(elem_ext);
    }

    chrome.storage.local.get('storage_data', function (data) {
        if (localStorage.hasOwnProperty('storage_data'))
            localStorage.removeItem('storage_data');
        localStorage.setItem('storage_data', data.storage_data);
        document.documentElement.dataset.csCursorMode = hd_mode;
        insert_cs_script();
    })


    chrome.storage.local.get('cs_template', function (data) {
        data = JSON.parse(data.cs_template);
        js = document.createElement('script');
        js.id = 'cs_cursor_template';
        js.innerHTML = data.template;
        document.head.appendChild(js);
    });



})

图片展示了我上面已经写过的内容 enter image description here

第二个错误

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at main.js:97

错误将我发送到这部分代码

var storage_data = (localStorage.hasOwnProperty('storage_data')) ? JSON.parse(localStorage.getItem('storage_data')) : {};

enter image description here

第三个错误

Uncaught ReferenceError: showCsCursorNonHD is not defined
    at <anonymous>:1:35

第三个错误告诉我这个

 cs_hd_mode = false;               showCsCursorNonHD();               hideCsCursor();   

     

enter image description here

这是一个新项目，没有任何变化

enter image description here

目录

enter image description here

enter image description here

我使用 WSL2 已经一年多了，大约一个月前，在 react 中创建新项目时开始出现这些错误

Answer 1

我认为问题在于您试图在已经是 JS 对象的东西上调用 JSON.parse(...)。您对chrome.storage.local.get('cs_template',...) 的回调中的data 已经是一个JS 对象。我不确定您的数据结构是什么，但数据应该是实际的cs_template 对象，可以像回调函数中的data.cs_template 一样访问。