Feedback: nextjs.org/docs/advanced-features/customizing-babel-config

[Timer]

hey, thanks for Next.. I love it. For the section about presets with custom config, I thought it was unclear. If I want to do something like use the decorators proposal plugin, and set an option on it, do I still set that on the next/babel preset?

To team: DM me for ideas on how we can improve this

[dgurns]

Just to follow up on this -- and happy to open a separate issue if that's easier -- I'm trying to use TypeORM and TypeGraphQL on Next API Routes, and running into an error with decorators:

error - ./api/resolvers/UserResolver.ts:4:1
Syntax error: Support for the experimental syntax 'decorators-legacy' isn't currently enabled:

  2 | import { User } from 'api/entities/User';
  3 | 
> 4 | @Resolver()

Here's my .babelrc (tried a ton of different variations on this):

{
  "presets": ["next/babel", "@babel/preset-typescript"],
  "plugins": [
    "babel-plugin-transform-typescript-metadata",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ]
}

And package.json:

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@apollo/client": "^3.3.6",
    "apollo-server-micro": "^2.19.1",
    "autoprefixer": "^10.1.0",
    "class-validator": "^0.12.2",
    "graphql": "^15.4.0",
    "graphql-depth-limit": "^1.1.0",
    "micro": "^9.3.4",
    "next": "10.0.4",
    "pg": "^8.5.1",
    "postcss": "^8.2.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "reflect-metadata": "^0.1.13",
    "tailwindcss": "^2.0.2",
    "type-graphql": "^1.1.1",
    "typeorm": "^0.2.29"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.12",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-typescript": "^7.12.7",
    "@types/graphql-depth-limit": "^1.1.2",
    "@types/node": "^14.14.16",
    "@types/react": "^17.0.0",
    "babel-plugin-parameter-decorator": "^1.0.16",
    "babel-plugin-transform-typescript-metadata": "^0.3.1",
    "typescript": "^4.1.3"
  }
}

And finally tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext", "esnext.asynciterable"],
    "allowJs": true,
    "baseUrl": ".",
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

I love NextJS and the idea of running an Apollo Server via API Routes, all within the same project and using TypeScript, is super exciting. This is the only real roadblock at the moment. Thank you!

[zfwf]

@dgurns If you are still stuck take a look here: #4707 (comment)

[alex-grover]

I'm also getting the Support for the experimental syntax 'decorators-legacy' isn't currently enabled (5:3) error when trying to use decorators.

The solutions in the linked thread work fine for next@10 but break for me when trying to upgrade to next@11.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.