SyntaxError: Unexpected identifier

[akoskm]

I'm trying to import a .graphql file in a file called main.ts.

I set up the webpack loader according to the readme file https://github.com/apollographql/graphql-tag#webpack-loading-and-preprocessing

Here's how the file is imported:

import ProjectsQuery from '../graphql/query/ProjectsQuery.graphql';

and the error I'm getting:

/Users/akoskm/Projects/sprcalc-electron/src/graphql/query/ProjectsQuery.gql:1
query ProjectsQuery {
      ^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1066:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1140:10)
    at Object.require.extensions.<computed> [as .js] (/Users/akoskm/Projects/sprcalc-electron/node_modules/ts-node/src/index.ts:1361:43)
    at Module.load (node:internal/modules/cjs/loader:982:32)
    at Module._load (node:internal/modules/cjs/loader:823:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13331)
    at Module.require (node:internal/modules/cjs/loader:1006:19)
    at require (node:internal/modules/cjs/helpers:93:18)
ERROR in /Users/akoskm/Projects/sprcalc-electron/src/main/main.ts

The relevant part of my webpack configuration:

export default {
  externals: [...Object.keys(externals || {})],

  stats: 'errors-only',

  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: 'graphql-tag/loader',
      },
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
        },
      },
    ],
  },

  output: {
    path: webpackPaths.srcPath,
    // https://github.com/webpack/webpack/issues/1114
    library: {
      type: 'commonjs2',
    },
  },

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.graphql', '.gql'],
    modules: [webpackPaths.srcPath, 'node_modules'],
  },

  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
    }),

    new webpack.ProvidePlugin({
      $: 'jquery',
      'window.$': 'jquery',
      jquery: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      draw2d: 'draw2d',
    }),
  ],
};

and here's the query:

query ProjectsQuery {
  projects {
    id
    name
    description
    project_phases {
      id
      description
      start_date
      completion_date
    }
  }
}

[Isomorpheus]

@akoskm Were you able to solve this problem?

[akoskm]

@Isomorpheus no, I didn't work on this. This is still an open issue in our project.

I will update you once we have a solution.

[juancampuzano]

@akoskm Were you able to solve this problem?

[akoskm]

@juancampuzano see my comment above.

[BhavinPatel04]

I was facing the same issue and I solved it by using this library - https://github.com/evenchange4/graphql.macro

[jerelmiller]

Hey @akoskm 👋

Would you be able to create a minimal, runnable reproduction of this issue? The webpack loader typically works well, so it would be helpful to understand if this issue is related to the way you've set up your project, or if there is some other change we need to be aware of in the library itself. Thanks!

[HoseinGhanbari]

I'm facing this issue as well. If i put the .graphql file content directly inside the template literal tag gql there will be no problem. But as soon as I put them in a separate .graphql file the error SyntaxError: Unexpected identifier will be shown.

[HoseinGhanbari]

I was facing the same issue and I solved it by using this library - https://github.com/evenchange4/graphql.macro

Could you explain how were you able to solve the problem by using graphql.macro ?

@BhavinPatel04

[HoseinGhanbari]

Fortunately, a solution found by using graphql-import-node

https://github.com/ardatan/graphql-import-node

1. this is how api-extensions.graphql.ts look like where you are importing .graphql

import gql from 'graphql-tag';
import 'graphql-import-node';

import q1 from "./q1-customizations.graphql";

export const commonApiExtensions = gql`
  ${q1}
`;

2. this is how dev mode npm script can be write

ts-node -r graphql-import-node/register ./src/index.ts

OR

node-dev -r graphql-import-node/register ./src/index.ts