未捕获的 SyntaxError：提供反应时出现意外的标记“<”

Question

我花了很多时间寻找解决方案，但没有找到合适的解决方案。

Uncaught SyntaxError: Unexpected token '

当我在 Netlify 上部署 React 时，它会正确渲染但是当我尝试 从我的本地计算机或在 Heroku 中运行客户端 给我同样的错误

My folder structure here

服务器端代码：

server.js

const express = require('express');
const app = require("./app")
const { ApolloServer, } = require('apollo-server-express');
const { createServer } = require('http')
const { makeExecutableSchema } = require('@graphql-tools/schema');
const jwt = require('jsonwebtoken');
const path = require('path');
const socket = require('./controllers/Socket.io');
const typeDefs = require('./Graphql/TypeDefs/app');
const resolvers = require('./Graphql/Resolvers/app');
const { ApolloServerPluginLandingPageDisabled } = require('apollo-server-core');


const PORT = process.env.PORT || 5000;

app.use(express.static(path.join(__dirname, '../client/build')))
app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build/index.html'))
})


const StartServer = async () => {
    try {
        const httpServer = createServer(app)

        const getUser = token => {
            try {
                if (token) {
                    return jwt.verify(token, process.env.JWT_SECRET_KEY)
                }
                return null
            } catch (err) {
                return null
            }
        }

        const schema = makeExecutableSchema({ typeDefs, resolvers, });

        const server = new ApolloServer({
            schema,
            context: ({ req, res }) => {
                const token = req.cookies.token || ""
                const user = getUser(token)
                return { req, res, user }
            },
            plugins: [
                ApolloServerPluginLandingPageDisabled(),
            ],
        })

        await server.start()
        server.applyMiddleware({
            app,

            cors: {
                origin: '/',
                credentials: true
            }
        })

        const getServer = httpServer.listen(PORT, () => console.log('server is running on port ', + PORT))

        socket(getServer)

    } catch (error) {
        throw new Error(error.message)
    }
}

StartServer()

app.js

const express = require("express");
const cors = require('cors');
const cookieParser = require('cookie-parser');
const mongoose = require('mongoose');

const app = express();

if (process.env.NODE_ENV !== "PRODUCTION") {
    require("dotenv").config();
}

mongoose.connect(process.env.MONGODB_DATABASE_URI).then(success => {
    console.log("Connected successfully....")
}).catch(err => {
    console.log(err.messege);
    console.log("Fail to connect....")
})


// use this on client 
app.use(cors({
    credentials: true,
}))

app.use(express.json({ limit: '50mb' }))
app.use(cookieParser());
app.use(express.urlencoded({ extended: true, limit: '50mb' }));



module.exports = app;

服务器的package.js：

{
  "name": "my-app",
  "version": "1.0.1",
  "description": "",
  "main": "backend/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node backend/server.js",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false && npm install --prefix client && npm run build --prefix client"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@graphql-tools/schema": "^8.3.1",
    "apollo-server-core": "^3.6.1",
    "apollo-server-express": "^3.5.0",
    "bcryptjs": "^2.4.3",
    "cloudinary": "^1.27.1",
    "cookie-parser": "^1.4.6",
    "cors": "^2.8.5",
    "crypto-js": "^4.1.1",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "graphql": "^16.1.0",
    "graphql-subscriptions": "^2.0.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.0.14",
    "nodemailer": "^6.7.2",
    "socket.io": "^4.4.0",
    "subscriptions-transport-ws": "^0.11.0"
  }
}

客户端的package.json：

{
  "name": "app",
  "version": "1.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.5.6",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@mui/icons-material": "^5.2.1",
    "@mui/material": "^5.2.3",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "graphql": "^16.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.1.1",
    "react-scripts": "4.0.3",
    "socket.io-client": "^4.4.0",
    "subscriptions-transport-ws": "^0.11.0",
    "validator": "^13.7.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

如何解决，求助

Answer 1

我也遇到了这种错误。在可能的情况下它在脚本标签内：

<script type='text/js' src='./something'>

</script>

删除 type 后它起作用了：

<script  src='./something'>

</script>