CODEWITHSUNDEEP
typescriptwebpackapollo-serverbabel-loadertypegraphql
Athens Holloway
Athens Holloway

Reputation: 2203

TypeGraphQL @Arg decorator fails with parser error when transpiling with webpack and babel-loader

I am using typegraphql to produce a graphql resolvers from typescript classes decorated with the @Resolver annotation. I am able to transpile/bundle my source code with webpack and babel-loader as long as I do not add the @Arg decorator to define an argument for my resolver method.

Following is my webpack configuration (at least the section that me be relevant):

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

Following is my resolver with the @Arg decorator:

@Resolver()
export default class TimesheetResolver implements TimesheetQuery {
    @Query(() => [Timesheet])
    async findAllEmployeeTimesheets(@Arg("employeeId") employeeId: string): Promise<[Timesheet]> {
        ...
    }
}

Following is my tsconfig file:

{
    "compilerOptions": {
      /* Basic Options */
      "target": "es2016",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
      "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
      "lib": ["es2016", "esnext.asynciterable"],
      "declaration": true,                      /* Generates corresponding '.d.ts' file. */
      "outDir": "lib",                          /* Redirect output structure to the directory. */
      /* Strict Type-Checking Options */
      "strict": true,                           /* Enable all strict type-checking options. */
      "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
      "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
      /* Experimental Options */
      "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
      "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
    }
  }

Webpack error:

ERROR in ./src/api/timesheet/TimesheetQuery.ts 28:48
Module parse failed: Unexpected character '@' (28:48)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       var _findAllEmployeeTimesheets = _asyncToGenerator(
|       /*#__PURE__*/
>       _regeneratorRuntime.mark(function _callee(@Arg("employeeId")
|       employeeId) {
|         var timesheet, timeEntry, workBreak, clockIn, clockOut;
 @ ./src/graphql/server.ts 5:0-64 21:26-43
 @ ./src/index.ts
 @ multi ./src/index.ts

Is there a plugin or another loader that I need to include in my webpack configuration?

Upvotes: 2

Views: 957

Answers (1)

Athens Holloway
Athens Holloway

Reputation: 2203

I added babel-plugin-transform-typescript-metadata to my webpack.config.js file as suggested by the typegraphql author.

Adding the new plugin fixed my issue. Following is the updated webpack.config.js

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

Upvotes: 3

Related Questions