意外的令牌<Container>，反应，打字稿

Question

这个tsx代码出现了意外的令牌错误。

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

[ 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,
}),
)

提前谢谢你。

Answer 1

看到app.tsx，看起来，您正在使用名为Container的命名导入next/app，它没有导出到包中。

下面的演示链接解释了一个确切的场景:

https://codesandbox.io/s/next-js-forked-ucwb2?file=/index.js

Answer 2

我看到你在导入应用程序和容器后导入React，你能在上面导入React吗?Next运行在React之上。

这个人的代码结构与你相似:

接收新的道具在_app.js (nextjs)?