graphql-js: [Bug] (Create React App) Issues with resolving an .mjs file instead of an .js file leading to test failures

Broken here, as well.

  ● Test suite failed to run

    /Users/steven/project/node_modules/graphql/language/parser.mjs:10
    import { Source } from './source';
    ^^^^^^

    SyntaxError: Unexpected token import

Having a similar issue with this version on my Jest test setup. Previous version 0.13.0 is fine.

FAIL  src/app.test.js
  ● Test suite failed to run

    /home/circleci/project/frontend/node_modules/graphql/language/printer.mjs:8
    import { visit } from './visitor';
    ^^^^^^
    
    SyntaxError: Unexpected token import
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
      at Object.<anonymous>.Object.setPrototypeOf.__proto__ (node_modules/apollo-link/lib/bundle.umd.js:2:138)
      at Object.<anonymous> (node_modules/apollo-link/lib/bundle.umd.js:5:2)

Yes, I’m using Jest (technically, Create React App, which comes with Jest built-in) and react-apollo.

If your project is built with Create React App and not ejected, react-scripts@1.1.2 should fix this. Here is how to upgrade:

https://github.com/facebook/create-react-app/releases/tag/v1.1.2

Otherwise you can apply a similar fix yourself in your project config. Cheers!

Also, I can confirm that forcing graphql back to version 0.13.0 resolves the issue. ie. in the repo above add "graphql": "0.13.0", to package.json under dependecies and re-install.

Just an update:

Sorry to keep everyone waiting on this issue. I’ve confirmed that an issue in the default Jest configuration for create-react-app is the root issue and still have https://github.com/facebook/create-react-app/pull/4085 open to attempt to fix it. Please visit that issue if you’re having issues with GraphQL and CRA together.

As a mitigation strategy, you can eject to gain access to the test configuration to apply the change yourself:

1. yarn eject
2. Edit package.json
3. Change the moduleFileExtensions section of the jest section:
   • Apply the change seen in https://github.com/facebook/create-react-app/pull/4085/files

I hope this helps unblock some of you in the meantime

Yes, I’m using Jest (technically, Create React App, which comes with Jest built-in) and react-apollo.

@stevensacks Me too exactly same stack.

@leebyron i’ll comment some infomation by my personal project …

↓ circleci build faild log with this issue. https://circleci.com/gh/ryota-murakami/clock-up/478

↓ entire repository of commit when facing this issue. https://github.com/ryota-murakami/clock-up/tree/bb76468b017ffa85058b13223ea9b2fb2f96522b

↓ faild specific jest test file https://github.com/ryota-murakami/clock-up/blob/bb76468b017ffa85058b13223ea9b2fb2f96522b/src/App/Control/ClockinButton.test.js

 FAIL  src/App/Control/ClockoutButton.test.js
  ● Test suite failed to run

    /home/circleci/repo/node_modules/graphql/language/parser.mjs:10
    import { Source } from './source';
    ^^^^^^
    SyntaxError: Unexpected token import
      
      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
      at node_modules/graphql-tag/lib/graphql-tag.umd.js:7:14
      at node_modules/graphql-tag/lib/graphql-tag.umd.js:2:65
      at Object.<anonymous> (node_modules/graphql-tag/lib/graphql-tag.umd.js:5:2)

I’ve opened https://github.com/facebook/create-react-app/pull/4085 to solve this issue. I’ll keep this issue open to track progress.

0.13.0 works fine, changing the package.json to "graphql": "0.13.0" solves the problem for now

As an update - the fix to create-react-app was merged, however still awaiting a point release which will hopefully happen soon.

I think I’ve found the source issue, this arrives when using create-react-app (which uses react-scripts)

react-scripts looks for .mjs files when resolving files ahead of .js files and regardless of the use of require() vs import or what transforms are in place.

https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/scripts/utils/createJestConfig.js#L56

This was introduced in https://github.com/facebook/create-react-app/pull/3239 / https://github.com/facebook/create-react-app/commit/5c8000f300a003e9bd8aee70c0796fa4e20b34f0

Hi there, I’m also seeing this issue. As with the other reporters, this is a Create React App application testing with the default configuration.

See this repo for an example with the failing test: https://github.com/mikehazell/graphql-jest-issue This is a Create React App with the only change being to add graphql-tag as a dependency and import it in the main App.js file.

Run yarn test src to see the error.

I’m having a similar problem with this version, here’s the traceback:

Text version:

react-dom.development.js:10994 Uncaught TypeError: Object(...) is not a function
    at QueryManager../node_modules/apollo-client/core/QueryManager.js.QueryManager.fetchQuery (QueryManager.js:190)
    at QueryManager../node_modules/apollo-client/core/QueryManager.js.QueryManager.startQuery (QueryManager.js:552)
    at ObservableQuery../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.setUpQuery (ObservableQuery.js:329)
    at ObservableQuery../node_modules/apollo-client/core/ObservableQuery.js.ObservableQuery.onSubscribe (ObservableQuery.js:298)
    at ObservableQuery.js:37
    at new Subscription (zen-observable.js:103)
    at ObservableQuery.subscribe (zen-observable.js:229)
    at GraphQL.subscribeToQuery (react-apollo.browser.umd.js:490)
    at GraphQL.componentDidMount (react-apollo.browser.umd.js:268)
    at commitLifeCycles (react-dom.development.js:8770)
    at commitAllLifeCycles (react-dom.development.js:9946)
    at HTMLUnknownElement.callCallback (react-dom.development.js:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:581)
    at invokeGuardedCallback (react-dom.development.js:438)
    at commitRoot (react-dom.development.js:10050)
    at performWorkOnRoot (react-dom.development.js:11017)
    at performWork (react-dom.development.js:10967)
    at requestWork (react-dom.development.js:10878)
    at scheduleWorkImpl (react-dom.development.js:10732)
    at scheduleWork (react-dom.development.js:10689)
    at scheduleTopLevelUpdate (react-dom.development.js:11193)
    at Object.updateContainer (react-dom.development.js:11231)
    at react-dom.development.js:15226
    at Object.unbatchedUpdates (react-dom.development.js:11102)
    at renderSubtreeIntoContainer (react-dom.development.js:15225)
    at Object.render (react-dom.development.js:15290)
    at Object../src/index.tsx (index.tsx:59)
    at __webpack_require__ (bootstrap 87939562b7b36a84b39d:678)
    at fn (bootstrap 87939562b7b36a84b39d:88)
    at Object.0 (url-parser.ts:22)
    at __webpack_require__ (bootstrap 87939562b7b36a84b39d:678)
    at bootstrap 87939562b7b36a84b39d:724
    at bootstrap 87939562b7b36a84b39d:724

@leebyron did you try actually running the app? It compiles successfully but throws the TypeError: parse is not a function when you actually run it. Here’s the stack trace that create-react-app displays in the browser when I try to run it:

TypeError: parse is not a function
parseDocument
node_modules/graphql-tag/src/index.js:128
  125 |   return docCache[cacheKey];
  126 | }
  127 | 
> 128 | var parsed = parse(doc);
  129 | if (!parsed || parsed.kind !== 'Document') {
  130 |   throw new Error('Not a valid GraphQL document.');
  131 | }

gql
node_modules/graphql-tag/src/index.js:161
  158 |     result += literals[i];
  159 |   }
  160 | 
> 161 |   return parseDocument(result);
  162 | }
  163 | 
  164 | // Support typescript, which isn't as nice as Babel about default exports

This was with graphql 0.13.2 and graphql-tag 2.8.0

“0.13.1 is broken” isn’t a great title - the version is working correctly outside of this particular issue and we need to narrow down what’s going on.

The cause, as I see it is that when the file “parser” is being required, that this resolves to “parser.mjs” instead of “parser.js” despite the mjs import syntax not being understood.

Node’s module resolution will always resolve “parser” to “parser.js” (unless from another mjs file when using --experimental-modules), so there must be a different module resolver causing this issue.

The reason I assumed Jest was a direction to investigate is that Jest uses a custom module resolver and almost all reports in this issue are failing Jest tests.

Has anyone been able to create a test repo which consistently exhibits this issue? I’ve still yet to reproduce it. Once I have my hands on a consistent reproduction then I can help to debug the root cause.