- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
嗨,如果有人愿意帮助我,我想在我的 nextjs 应用程序上使用 @Decorators,但出现以下错误。
希望有人知道我做错了什么
错误信息:
Syntax error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled:
我正在尝试使用 typeorm/type-graphql 在应用程序子文件夹中生成我的后端。
import {
Field,
ID,
ObjectType,
} from 'type-graphql';
import {
BaseEntity,
ManyToOne,
Column,
CreateDateColumn,
Entity,
PrimaryGeneratedColumn,
UpdateDateColumn,
VersionColumn,
} from 'typeorm';
import { ArrayNotEmpty, ArrayMinSize, IsPositive, Min, IsNotEmpty, ValidateNested, MaxLength, Length, IsArray, IsNumber, Max, ArrayMaxSize, ArrayUnique, IsBase64, IsString } from "class-validator";
// import {User} from '@accounts/typeorm'
// extends interface User {
// documents: [Booking]
// };
// const entities = require('@accounts/typeorm').entities;
// const {User} = entities;
/**
* @export
* @class Booking
* @extends {BaseEntity}
*/
@Entity()
@ObjectType()
export default class Booking extends BaseEntity {
@Field(() => ID)
@PrimaryGeneratedColumn('uuid')
id: string;
@Field(() => String)
@Column()
title: string;
// @Field(() => User)
// @ManyToOne(type => User, user => user.documents)
// author: User;
// @Field(() => Object, { nullable: true })
// // @Column()
// author?: User;
@Field(() => Boolean)
@Column({ default: false })
isPublished: boolean;
@Field(() => ID)
@Column({default: ""})
authorId?: string;
@Field()
@Column()
@IsBase64()
contents: string;
@Field()
@Column({ default:'', nullable: true })
@IsBase64()
merged: string;
@IsArray()
@Max(300,{each: true})
@IsPositive({each: true})
@ArrayUnique()
@ArrayNotEmpty()
@ArrayMinSize(4)
@ArrayMaxSize(4)
@Column("integer", { default: [1, 2, 3, 4], array: true })
@Field(() => [Number!]!)
position: number[];
@Field()
@CreateDateColumn({ type: "timestamp" })
createdAt: Date;
@Field()
@UpdateDateColumn({ type: "timestamp" })
updatedAt: Date;
@Field()
@VersionColumn()
version: number;
@Field(() => String)
@Column({ default: '', nullable: true })
signature: string;
}
babelrc
{
"presets": [
[
"next/babel",
{
"plugin-proposal-decorators": {"legacy": true}
}
]
],
}
next.config.js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack, typescript }) => {
config.experiments = {
topLevelAwait: true,
};
return config
},
}
tsconfig.json
{
"compilerOptions": {
"target": "es2018",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"experimentalDecorators": true
},
"exclude": ["node_modules"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}
package.json
{
"name": "apollo-server-vercel-demo",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"type-check": "tsc"
},
"main": "pages/index.tsx",
"dependencies": {
"@accounts/graphql-api": "^0.29.0",
"@accounts/password": "^0.29.0",
"@accounts/server": "^0.29.0",
"@accounts/typeorm": "^0.29.0",
"@graphql-modules/core": "^0.7.17",
"@saeris/apollo-server-vercel": "0.3.0",
"@types/node": "14.0.27",
"@types/react": "16.9.46",
"@types/react-dom": "16.9.8",
"@zeit/next-css": "1.0.1",
"apollo-server-express": "^2.16.1",
"class-validator": "^0.12.2",
"express": "^4.17.1",
"graphql": "15.3.0",
"graphql-subscriptions": "^1.1.0",
"next": "9.5.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"type-graphql": "^1.0.0",
"typescript": "3.9.7"
},
"license": "ISC",
"keywords": [],
"description": "",
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-syntax-top-level-await": "^7.10.4",
"@babel/plugin-transform-typescript": "^7.11.0",
"@babel/preset-es2017": "^7.0.0-beta.53",
"@babel/preset-typescript": "^7.10.4",
"@zeit/next-typescript": "^1.1.1",
"babel-plugin-parameter-decorator": "^1.0.16",
"webpack": "^5.0.0-beta.28"
},
"resolutions": {
"webpack": "^5.0.0-beta.28"
}
}
Blockquote
最佳答案
这对我有用npm install --dev --save babel-plugin-transform-typescript-metadata && npm install --save-dev @babel/plugin-proposal-class-properties
创建 .bebelrc 并添加:
{
"presets": ["next/babel"],
"plugins": [
"babel-plugin-transform-typescript-metadata",
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
在您的 tsconfig 中添加:
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
关于babeljs - 如何在 next.config.js 或 babelrc 中启用@experimentalDecorators,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63650836/
我正在尝试使用 节点检查器 调试 节点JS 使用 运行的应用程序通天塔节点 . babel-node index.js --debug 节点检查器有效,但它在转译的 es5 而不是 es6 中显示源映
我看到我的 eslint 规则应用于 VSCode,但它们在 Babel 中不起作用。我认为我需要清除缓存,但我不知道该怎么做。 你能告诉我怎么做吗? 规则 "@typescript-eslint/c
我在项目的根目录下有一个.babelrc文件: { "presets": ["es2015"], "ignore": [ "src" ] } 当我使用babel src --out
我有一个来自我的 js/index.js 的服务人员: import '../scss/app.scss'; // Detect if service workers enabled if ('ser
我正在尝试为babel编写一个插件,并且需要正在解析的当前文件的文件名。我知道代码行已传入,但是我还没有找到对文件名的引用。有帮助吗? 例如给出此代码我该怎么办 export default func
我找到了much upvoted answer对于一个问题,代码如下: var condition = true; return ( ); 为什么需要...?如果我省略它,babel 就会向我提
我正在构建一个插件,该插件通过调用enterFunction()在每个现有函数调用的前面插入path.insertBefore。所以我的代码是从: myFunction(); 至: enterFunc
我已经安装了Babel,发现为了编译JSX,需要更改.babelrc文件吗?文件在哪里?我正在查看babel-preset,babel,babel-jsx文件夹等,但是找不到它吗?应该手动创建吗? 最
起初,如果 eslint,atom 会抛出这个错误。没有在 React 项目中保存为依赖项,它会以红色通知的形式弹出。 现在我在一个目录中工作 不是 一个 git repo,每当我尝试输入时,它都会不
我不明白黑白 babel 的区别 exclude对比 ignore即使在阅读了他们的文档后也可以选择。 我的理解是exclude不如 ignore 激进.和 exclude使当前配置对象处于非事件状态
我正在尝试获取 nyc ava和 babel到所有地方都很好。我遇到了 async/await 分支显示为未覆盖的问题,所以这是有效的,我在集成 babel-plugin-istanbul 时遇到问题
我正在安装 babel core 6.26.0 per this documentation ,一切顺利,除了出现以下错误: npm WARN optional Skipping failed opt
我已经搜索了 Babel 的文档,但似乎找不到答案,所以我转向了光荣的社区。 使用这样的目录结构: src/ folder1/ file1.js file2.j
给定以下示例目录结构: srcDir/file1.js srcDir/subDir1/file2.js srcDir/subDir2/file3.js 我想用 babel-cli 处理这些文件以便输出
我无法使用@compulated。如果我运行下面的代码,我会收到错误: Uncaught TypeError: An element descriptor's .kind property must
Babel 是如何实现尾递归的? 这是怎么做到的transpiled es5 code工作? 最佳答案 我想我会发布一个详细的解释,让那些从谷歌登陆这里的人希望能够更快地理解。 请注意,以下解释是我从
这个问题在这里已经有了答案: Extending built-in natives in ES6 with Babel (3 个答案) 关闭 7 年前。 我从 MDN 得到了这个示例代码(稍微修改以
问题是如何在调用super方法之前从构造函数内访问类静态属性? class A { constructor(input) { console.log('A', typeof n
这是配置文件: { "presets": [ "@babel/preset-env" ], "plugins": [ "@babel/plugi
Babel 正在用 void 0 替换 this 我该如何防止这种行为? 我有这个代码: ((parent)=>{ parent.something = {} })(this) 使用 babel
我是一名优秀的程序员,十分优秀!