时间戳

首页 > 解决方案 > SyntaxError：React 项目中的令牌无效或意外

reactjs - SyntaxError：React 项目中的令牌无效或意外

问题描述

我尝试运行一个反应应用程序，它给出了以下错误：

yarn run v1.19.1
$ react-scripts start
C:\Users\Rahul\yantra-front\yantraksh-app\node_modules\ajv-errors\index.js:1

index.js：

SyntaxError: Invalid or unexpected token
    at Module._compile (internal/modules/cjs/loader.js:892:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:\Users\Rahul\yantra-front\yantraksh-app\node_modules\schema-utils\src\validateOptions.js:12:16)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

我是 React 的初学者。我该如何解决这个问题？

应用程序.js：

import React, {Component} from 'react';

import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import {BrowserRouter as Router} from "react-router-dom";
import thunk from 'redux-thunk';

import rootReducer from './reducers';
import Main from "./main";

import './scss/App.scss';
import 'react-toastify/dist/ReactToastify.min.css';
// import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

import {ToastContainer} from "react-toastify";


export const store = createStore(
    rootReducer,
    compose(
        applyMiddleware(thunk),
        // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
);

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <Main/>
                </Router>
                <ToastContainer />
            </Provider>
        );
    }
}

export default App;

为了便于理解，我更新了 App.js 和 index.js。

我在 pycharm 中打开了它，上面写着

ESLint：SyntaxError：无效或意外的令牌

标签： reactjs

解决方案

我在 create-react-app 版本 3.4.1、node v12.19.0、npx 6.14.8 和 yarn 1.22.5 中遇到了这个错误。

此错误存在于 terser-webpack-plugin 文件夹中，它与 ajv 文件损坏有关。通过复制和粘贴解决。

复制：

`node_modules\ajv\lib`

至：

`node_modules\terser-webpack-plugin\node_modules\ajv\`

此副本之前的错误：

> react-scripts start

\workspace\Documents\Test\front\node_modules\terser-webpack-plugin\node_modules\ajv\lib\ajv.js:1

SyntaxError: Invalid or unexpected token
    at wrapSafe (internal/modules/cjs/loader.js:931:16)
    at Module._compile (internal/modules/cjs/loader.js:979:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (\workspace\Documents\Test\front\node_modules\terser-webpack-
plugin\node_modules\schema-utils\dist\validate.js:15:13)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)

在打开的 js 文件中terser-webpack-plugin\node_modules\ajv，编辑器无法打开文件类型。

推荐阅读