意外的令牌 <Container> ，reactjs，打字稿
Posted
技术标签:
【中文标题】意外的令牌 <Container> ，reactjs，打字稿【英文标题】：Unexpected token <Container> , reactjs, typescript 【发布时间】：2021-11-10 08:48:16 【问题描述】：收到此 tsx 代码的意外令牌错误。
我无法修复这个错误，我认为这是一个打字稿编译问题。我在下面分享了一些配置文件。我已尝试解决此问题，但找不到任何意外字符。
[ error ] ./project/app.tsx
SyntaxError: C:\Projects\project\app.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": "git@github.com: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.tsx 这是解析器错误，请提供app.tsx的完整代码 @TR3，包含 _app.tsx 文件 尝试删除Container，只使用div或Fragment，看看是否也会引发错误。
我们能看到next.config.js吗？
【参考方案1】：
看到app.tsx，看起来，您正在使用next/app 之外的名为Container 的命名导入，它没有从包中导出。
下面的演示链接中解释了一个确切的场景：
https://codesandbox.io/s/next-js-forked-ucwb2?file=/index.js
【讨论】：
是的，react 包含在文件的顶部 能否提供app.tsx的完整代码 包含文件 你为什么使用我看到你在 App 和容器中导入后正在导入 React， 你能在上面导入 React 吗？ Next 在 React 之上运行。
此人的代码结构与您相似：
Receive new props in _app.js (nextjs)?
【讨论】：
以上是关于意外的令牌 <Container> ，reactjs，打字稿的主要内容，如果未能解决你的问题，请参考以下文章