[Bug] (Create React App) Issues with resolving an .mjs file instead of an .js file leading to test failures
joshuanutmeg opened this issue · 40 comments
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)
@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
0.13.0 works fine, changing the package.json to "graphql": "0.13.0" solves the problem for now
The only thing I could think of that had impacted it was the mjs change as you outlined ^^
I'm not building anything, the bundle should be built as part of the npm install process afaik
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)
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)
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?
Actually, all these projects seem to be Apollo, not servers or anything else.
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
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
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?
Yes, I'm using Jest (technically, Create React App, which comes with Jest built-in) and react-apollo.
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)
@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
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.
"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.
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.
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.
It also causes a bunch of issues with webpack 4
@mikehazell you'll have to add graphql@0.13.1 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"
}
New title is more fitting :) thanks
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.
This was introduced in facebook/create-react-app#3239 / facebook/create-react-app@5c8000f
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.
I've opened facebook/create-react-app#4085 to solve this issue. I'll keep this issue open to track progress.
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 facebook/create-react-app#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:
yarn eject- Edit
package.json - Change the
moduleFileExtensionssection of thejestsection:- 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
As an update - the fix to create-react-app was merged, however still awaiting a point release which will hopefully happen soon.
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
@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.
@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
I concur with what @mbrowne has said
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!
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...
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.
Before closing the thread, isn’t it better to confirm with the people that are reporting issues first?
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
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
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.
Sorry for not following up. I can confirm this has been fixed.