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

[joshuanutmeg]

Running tests on a local project get's the following errors since the publish of 0.13.1

 ● Test suite failed to run

    Cannot find module 'graphql/language/parser' from 'graphql-tag.umd.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:194: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)

 FAIL  
  ● Test suite failed to run

    Cannot find module 'graphql/language/printer' from 'bundle.umd.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:194: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)

[IvanGoncharov]

@joshuanutmeg Can you please provide more details on how you building bundle.umd.js?
Do you have the same problem with 0.13.0?

Not sure but maybe it's related to changes from #1244

[joshuanutmeg]

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

[joshuanutmeg]

The only thing I could think of that had impacted it was the mjs change as you outlined ^^

[joshuanutmeg]

I'm not building anything, the bundle should be built as part of the npm install process afaik

[andykenward]

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)

[ryota-murakami]

I've got similar issue(at Jest). 0.13.0 is work fine.

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

    /Users/ryota.murakami/repository/clock-up/node_modules/graphql/language/parser.mjs:10
    import { Source } from './source';
    ^^^^^^
    
    SyntaxError: Unexpected token import
      
      at new Script (vm.js:51:7)
      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)

[DogPawHat]

I had a similar issue with a react-apollo project. I was using TypeScript which can be a bit weird sometimes, so is that an issue for you guys?

[DogPawHat]

Actually, all these projects seem to be Apollo, not servers or anything else.

[patrick91]

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

[stevensacks]

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

[leebyron]

Could someone encountering this issue share more details about their environment? I've yet to reproduce any issue, but it sounds like a commonality is Jest test environments and Apollo clients.

Can someone link to the code for a jest environment that's causing these issues?

[stevensacks]

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

[ryota-murakami]

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)

[joshuanutmeg]

@leebyron why'd you change the title?

it looks like it is looking for mjs files when they don't exist - they're all .js files in the src

[DogPawHat]

I wouldn't say Jest is an issue, all of these issues are going though graphql-tag so it will break in both tests and running code.

[leebyron]

"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.

[mikehazell]

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.

[mikehazell]

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.

[moimael]

It also causes a bunch of issues with webpack 4

[DogPawHat]

@mikehazell you'll have to add [email protected] as a dependency to your test repo, `graphql-tag' uses it a peer dependency:

 "peerDependencies": {
    "graphql": "^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0"
}

[DogPawHat]

@leebyron I like the new title, only thing is the failures are not restricted to a testing envionment, but otherwise I think your bang on with the .mjs issue 👍

@moimael I think webpack 4 from what I read (your comment is the first I heard of webpack4 😜 ) should be supporting .mjs files.

[joshuanutmeg]

New title is more fitting :) thanks

[leebyron]

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 facebook/create-react-app#3239 / facebook/create-react-app@5c8000f

[leebyron]

Also - if you're encountering an issue and not using create-react-app or Jest, let's please open new issues so we can diagnose those as well.

[leebyron]

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

[mbrowne]

There are still issues using graphql > 0.13.0 with create-react-app even after applying the fix @leebyron recommended. Jest tests run successfully (thanks for the tip on that!), but when using graphql-tag from Apollo, this issue persists: apollographql/graphql-tag#155

[leebyron]

@mbrowne could you clarify what else you're seeing? I've set up a small test that uses graphql-tag similarly to the example in that issue - and with the fix applied to create-react-app I can run yarn test and yarn build without any problem.

It would be helpful to see any additional context you have in reproducing other issues.

[mbrowne]

@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

[joshuanutmeg]

I concur with what @mbrowne has said

[gaearon]

If your project is built with Create React App and not ejected, [email protected] 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!

[mbrowne]

Just to be clear (at least based on the "similar fix" link), the fix above fixes the Jest issue but not the compatibility issue with graphql-tag. Should I suggest to the Apollo team that apollographql/graphql-tag#155 be reopened? Perhaps it's unrelated to this issue after all...

[jnwng]

I’ll re-open and re-investigate! Thanks for flagging

…

On Mon, Apr 2, 2018 at 5:36 PM Matt Browne ***@***.***> wrote: Just to be clear (at least based on the "similar fix" link), the fix above fixes the Jest issue but not the compatibility issue with graphql-tag. Should I suggest to the Apollo team that apollographql/graphql-tag#155 <apollographql/graphql-tag#155> be reopened? Perhaps it's unrelated to this issue after all... — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1248 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABERRu7e_ULC9J6wrctf8FaBy9f37lwJks5tksPpgaJpZM4SINTr> .

[leebyron]

Just tested through this again and can confirm that using graphql-tag with the latest release of webpack, create-react-app/react-scripts, and graphql.js works for both yarn test, yarn start (dev) and yarn build (prod)

I tested this by making a new project create-react-app testproject and then writing an index.js which just contains the example code on graphql-tag's readme, console.loging the output. I published the resulting build to https://build-snuirxaamb.now.sh - just pop open the console to see the result (https://build-snuirxaamb.now.sh/_src if you want to see the built source yourself)

@mbrowne - I'd recommend making sure everything is on the latest version and you don't have any competing custom configuration that would cause .mjs files not to be resolved.

[joshuanutmeg]

Before closing the thread, isn’t it better to confirm with the people that are reporting issues first?

[leebyron]

More than happy to reopen this issue or open new issues if there are additional reports of reproducible issues.

I closed this one since the original issue was diagnosed, patched, shipped, and confirmed fixed

[joshuanutmeg]

I was unable to verify the fix after 0.13.2 was released - i will check the above tomorrow at work and let you know how it goes. Thanks for your help so far

[mbrowne]

The graphql-tag issue (apollographql/graphql-tag#155) was reopened. It appears unrelated. So as far as I'm concerned it's fine to close this, thanks.

[stevensacks]

Sorry for not following up. I can confirm this has been fixed.