意外的令牌&lt；容器&gt；，反应，打印脚本 [英] Unexpected token <Container> , reactjs, typescript

问题描述

获取此TSX代码的意外令牌错误。

我无法修复此错误，我认为这是打字稿编译问题。我在下面分享了一些配置文件。我已尝试解决此问题，但找不到意外的任何字符。

[ error ] ./project/app.tsx

SyntaxError: C:Projectsprojectapp.tsx: Unexpected token (89:6)

  87 | 
  88 |     return (
> 89 |       <Container>

tsconfig.json文件，

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "jsx": "react",
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "./node_modules/@types"
    ]
  }
}

Package.json文件

{
  "name": "@project",
  "version": "1.0",
  "author": "Author",
  "description": "project",
  "repository": {
    "type": "git",
    "url": "[e-mail]:project.git"
  },
  "main": "index.js",
  "scripts": {
    "start": "SET NODE_ENV=production ./node_modules/.bin/node .next/production-server/server/index.js",
    "build": "next build && tsc --project tsconfig.server.json && cp services.manifest.json .next/production-server",
    "build:debug": "tsc -p ./tsconfig.debug.json --pretty",
    "assets:upload": "node scripts/upload_assets.js",
    "dev": "SET NODE_ENV=dev nodemon server/index.ts",
    "lint": "tslint -c tslint.json -p tsconfig.json",
    "test": "NODE_ENV=test jest",
    "test:ci": "NODE_ENV=test JEST_JUNIT_OUTPUT_DIR=./reports jest --ci --runInBand --reporters=default --reporters=jest-junit",
    "test:watch": "NODE_ENV=test jest --watch",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "@material-ui/core": "^4.7.2",
    "@material-ui/icons": "^4.5.1",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "console-polyfill": "^0.3.0",
    "core-js": "^3.4.8",
    "csv-string": "^3.1.7",
    "emotion": "^9.2.12",
    "emotion-server": "^9.2.12",
    "emotion-theming": "^9.2.9",
    "isomorphic-unfetch": "^3.0.0",
    "mixpanel-browser": "^2.31.0",
    "next": "^8.1.0",
    "next-routes": "^1.4.2",
    "node": "^10.17.0",
    "nookies": "^2.0.8",
    "query-string-for-all": "^6.9.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-emotion": "^9.2.12",
    "react-ga": "^2.7.0",
    "react-mixpanel": "^1.0.5",
    "react-select": "^3.0.8",
    "react-window": "^1.8.5",
    "readdirp": "^3.3.0",
    "s3-sync-aws": "^1.1.1",
    "slugify": "^1.3.6"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/plugin-transform-object-assign": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "@semantic-release/git": "^4.0.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@types/isomorphic-fetch": "0.0.35",
    "@types/jest": "^24.0.23",
    "@types/next": "^8.0.7",
    "@types/react": "^16.9.16",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-emotion": "^9.2.11",
    "eslint": "^6.7.2",
    "eslint-config-prettier": "^6.7.0",
    "eslint-plugin-jest": "^23.1.1",
    "jest": "^24.9.0",
    "jest-cli": "^24.9.0",
    "jest-runner-prettier": "^0.3.3",
    "jest-runner-tslint": "^1.0.7",
    "nodemon": "^2.0.1",
    "prettier": "^1.19.1",
    "semantic-release": "^15.13.31",
    "ts-node": "^8.5.4",
    "tslint-config-prettier": "^1.18.0",
    "tslint-loader": "^3.5.4",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^4.1.0",
    "typescript": "^3.7.3"
  }
}

nodemon.json

{
  "watch": [
    "server/*.[ts|js]"
  ],
  "execMap": {
    "ts": "ts-node"
  }
}

.babelrc

{
  "env": {
    "production": {
      "presets": ["@babel/preset-env", "next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        [
          "emotion",
          {
            "inline": true
          }
        ],
        "@babel/plugin-transform-object-assign"
      ]
    },
    "development": {
      "presets": ["@babel/preset-env", "next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        [
          "emotion",
          {
            "sourceMap": true,
            "autoLabel": true,
            "labelFormat": "-constName--[local]"
          }
        ],
        "@babel/plugin-transform-object-assign"
      ]
    },
    "test": {
      "presets": ["@babel/preset-env", "next/babel", "@zeit/next-typescript/babel"],
      "plugins": [
        [
          "emotion",
          {
            "inline": true
          }
        ],
        "@babel/plugin-transform-object-assign"
      ]
    }
  }
}

_app.tsx文件

import App, { Container } from "next/app"
import Head from "next/head"
import Router from "next/router"
import React from "react"
import mixpanel from "mixpanel-browser"
import { MixpanelProvider } from "react-mixpanel"

import { manifest as mixpanelConfig } from "../lib/utils/manifest" 
import Locale from "../lib/clients/locale"
import { initGA, logPageView } from "../lib/analytics"
import ProjectPath from "../lib/path"
import ProfileDetails from "../lib/clients/profile-details"
import { PageType } from "../lib/page-type"

// tslint:disable-next-line: no-var-requires
require("console-polyfill") // IE
mixpanel.init(mixpanelConfig.aws.mixpanel.token)

const DEFAULT_SEO = {
  title: "Title",
  description: "description", 
  twitter: {
    handle: "@acom",
    cardType: "summary",
  },
}
export default class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    await Locale.buildIndexes()
    await ProjectPath.indexTopics()

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

  async componentDidMount() {
    if (this.props.pageProps.context) {
      const trackingIDs = [
        "ADA-DA4334",
      ]
      const { publishAsRole } = this.props.pageProps.context
      switch (publishAsRole) {
        case PageType.INSIGHT_STORY:
          // rendering
          const { story } = this.props.pageProps
          if (story.teamTokens && story.teamTokens && story.teamTokens.googleAnalytics) {
            trackingIDs.push(...story.teamTokens.googleAnalytics.map(_ => _.trim()))
          }
          break
        default:
          // We're rendering some content
          const { organizationSlug } = this.props.pageProps.context.path
          const organizationsObject = await ProfileDetails.getProfiles()
          const organization = organizationsObject[organizationSlug]
          if (organization && organization.teamTokens && Array.isArray(organization.teamTokens.googleAnalytics)) {
            trackingIDs.push(...organization.teamTokens.googleAnalytics.map(_ => _.trim()))
          }
      }
      initGA(trackingIDs)
      logPageView()
      Router.router.events.on("routeChangeComplete", logPageView)

      // On the client, we want to make sure the locale index is built before
      // user clicks to navigate away from page, as this takes a bit of time.
      await Locale.buildIndexes()
    }
  }

  render() {
    const { Component, pageProps } = this.props

    return (
      <Container>
        <Head>
          <meta key="twitter:card" name="twitter:card" content={DEFAULT_SEO.twitter.cardType} />
          <meta key="twitter:site" name="twitter:site" content={DEFAULT_SEO.twitter.handle} />
          <meta key="twitter:creator" name="twitter:creator" content={DEFAULT_SEO.twitter.handle} />
          <meta key="twitter:title" name="twitter:title" content={DEFAULT_SEO.title} />
          <meta key="twitter:description" name="twitter:description" content={DEFAULT_SEO.description} />
          <meta key="og:url" property="og:url" content={DEFAULT_SEO.openGraph.url} />
          <meta key="og:type" property="og:type" content={DEFAULT_SEO.openGraph.type} />
          <meta key="og:title" property="og:title" content={DEFAULT_SEO.openGraph.title} />
          <meta key="og:description" property="og:description" content={DEFAULT_SEO.openGraph.description} />
          <meta key="og:image" property="og:image" content={DEFAULT_SEO.openGraph.image} />
          <meta key="og:locale" property="og:locale" content={DEFAULT_SEO.openGraph.locale} />
        </Head>
        <MixpanelProvider mixpanel={mixpanel}>
          <Component {...pageProps} />
        </MixpanelProvider>
      </Container>
    )
  }
}

next.config.js

const deployEnv = process.env.DEPLOY_ENV || "production"

const isProd = ["production", "staging"].includes(deployEnv) || (process.ENV === "production")
const withTypescript = require("@zeit/next-typescript")
const withCSS = require("@zeit/next-css")

module.exports = withTypescript(
  withCSS({
    webpack: cfg => {
      const originalEntry = cfg.entry
      cfg.entry = async () => {
        const entries = await originalEntry()

        if (entries["main.js"] && !entries["main.js"].includes("./client/polyfills.js")) {
          entries["main.js"].unshift("./client/polyfills.js")
        }

        return entries
      }

      cfg.module.rules.push({
        test: /.[jt]sx?$/,
        use: [
          {
            loader: "tslint-loader",
            options: {
              isServer: false,
            },
          },
        ],
        exclude: /node_modules/,
      })

      return cfg
    },
    cssLoaderOptions: {
      url: false,
    },
    // all inside env will be available on compile time in process.env
    env: {
      deploy: deployEnv
    },
    assetPrefix: isProd ? `https://assets.project.com/pro/${deployEnv}` : "",
    poweredByHeader: false,
  }),
)

提前感谢您。

推荐答案

我看到您是在APP和容器导入后导入Reaction， 你能把Reaction放在上面吗？"下一步"在"反应"之上运行。

此人的代码结构与您相似：

Receive new props in _app.js (nextjs)?

这篇关于意外的令牌&lt；容器&gt；，反应，打印脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！