CODEWITHSUNDEEP
reactjsbabeljsgraphql
lorm
lorm

Reputation: 3361

NodeJS / Babel SyntaxError Unexpected token

I've been trying to pull in a lot of Babel functionality to a React / GraphQL project that I am mostly writing by hand. But I tried to use this build script to generate by schema.graphql file: 

  import fs from 'fs';
  import path from 'path';
  import { graphql } from 'graphql';
  import { introspectionQuery, printSchema } from 'graphql/utilities';

  import schema from '../server/schema';

  let file_schema_json = path.join(__dirname, '../graphql/schema.json');
  let file_schema_graphql = path.join(__dirname, '../graphql/schema.graphql');

  // Save JSON of full schema introspection for Babel Relay Plugin to use
  async function createJson( )
  {
    var result = await( graphql( schema, introspectionQuery ) );
    if( result.errors )
    {
      console.error( 'ERROR! ' );
      console.error( 'ERROR introspecting schema: ', JSON.stringify(result.errors, null, 2) );
    }
    else
    {
      fs.writeFileSync( file_schema_json, JSON.stringify(result, null, 2) );
      console.log( 'Written: ' + file_schema_json );
    }
  }

  // Save user readable type system shorthand of schema
  fs.writeFileSync( file_schema_graphql, printSchema( schema ) );
  console.log( 'Written: ' + file_schema_graphql );

  createJson( );

and then I ended up with: 

  /Users/lorm/projects/aggregated_centralized_api/node_modules/babel-core/lib/transformation/file/index.js:591
        throw err;
        ^

  SyntaxError: /Users/lorm/projects/aggregated_centralized_api/scripts/build-schema.js: Unexpected token (12:6)
    10 | 
    11 | // Save JSON of full schema introspection for Babel Relay Plugin to use
  > 12 | async function createJson( )
       |       ^
    13 | {
    14 |   var result = await( graphql( schema, introspectionQuery ) );
    15 |   if( result.errors )

But I copied all the dependencies that I could think of: 

"dependencies": {
"babel-cli": "^6.8.0",
"babel-core": "^6.8.0",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.4",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-async-to-generator": "^6.8.0",
"babel-polyfill": "^6.8.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-relay-plugin": "^0.8.1",
"babel-relay-plugin-loader": "^0.8.1",
"babel-runtime": "^6.6.1",
"body-parser": "1.15.1",
"dataloader": "1.1.0",
"dotenv": "2.0.0",
"express": "4.13.4",
"express-graphql": "^0.5.3",
"graphql": "0.4.18",
"graphql-relay": "0.3.6",
"mongodb": "2.0.39",
"q": "1.4.1"
},
"devDependencies": {
"babel": "^5.8.3",
"babel-core": "^5.8.3",
"babel-eslint": "^4.0.5",
"babelify": "^6.1.1",
"babel-cli": "^6.8.0",
"babel-jest": "^12.0.2",
"babel-plugin-transform-runtime": "^6.8.0",
"babel-polyfill": "^6.8.0",
"eslint": "^0.24.0",
"eslint-plugin-react": "^3.2.2",
"flow-bin": "^0.22.1"
},

Yet still, its as if Babel is not being triggered? Or doesn't know how to read this kind of Javascript? What would cause this error?

Upvotes: 0

Views: 1320

Answers (1)

ctrlplusb
ctrlplusb

Reputation: 13127

I think you don't have the plugin support required for the async syntax. I had a quick look at http://babeljs.io/docs/plugins/

You currently have the following presets and plugins installed:

  • babel-preset-es2015
  • babel-preset-react
  • babel-preset-stage-0

If you go to the link above and click them you will see which plugins are bundled in these presets. It looks like the async syntax is not included in those.

There is a helpful post here about getting it working: http://madole.xyz/async-await-es7/

With an update to the post here: http://madole.xyz/babel-plugin-transform-async-to-module-method-gotcha/

I guess your other option is to remove the async code and replace it with something else. Does the graphql api return promises? If so you could refactor it to use promises syntax instead. Or generators.

Oh, and here is a great ebook that covers promises and generators: https://github.com/getify/You-Dont-Know-JS/tree/master/async%20%26%20performance

And a blog on async/await: https://ponyfoo.com/articles/understanding-javascript-async-await

Upvotes: 2

Related Questions