search

detrohutt / babel-plugin-import-graphql

Enables import syntax for .graphql and .gql files
https://www.npmjs.com/package/babel-plugin-import-graphql
MIT License
314 stars 22 forks source link

Jest: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined #89

Open shaneog opened 3 years ago

shaneog commented 3 years ago

When testing using Jest, I receive the following error when running babel.transform. I am using the test code defined in the README of this plugin.

import myImportedQuery from "./queries/productsQuery.graphql";
TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

      at defaultResolve (node_modules/babel-plugin-import-graphql/build/requireGql.js:33:50)
      at PluginPass.exit (node_modules/babel-plugin-import-graphql/build/index.js:73:27)
      at newFn (node_modules/@babel/traverse/lib/visitors.js:177:21)
      at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
      at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
      at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:99:8)
      at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:103:16)

I have put together the simplest possible reproduction of this here: https://github.com/shaneog/babel-transform-graphql-example

$ node --version
v14.18.1
$ npm --version
6.14.15

When Babel is run manually (npx babel test/fixtures --out-dir dist) the code is transpiled correctly (formatted for ease of viewing):

Click to see the formatted, transpiled JS ```js var myImportedQuery = { kind: "Document", definitions: [ { kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "products" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [ { kind: "Field", name: { kind: "Name", value: "products" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [ { kind: "Field", name: { kind: "Name", value: "productId" }, arguments: [], directives: [], }, { kind: "FragmentSpread", name: { kind: "Name", value: "productFragment" }, directives: [], }, ], }, }, ], }, }, { kind: "FragmentDefinition", name: { kind: "Name", value: "productFragment" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Product" }, }, directives: [], selectionSet: { kind: "SelectionSet", selections: [ { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [], }, { kind: "Field", name: { kind: "Name", value: "description" }, arguments: [], directives: [], }, { kind: "Field", name: { kind: "Name", value: "weight" }, arguments: [], directives: [], }, ], }, }, ], loc: { start: 0, end: 109, source: { body: '#import "./productFragment.graphql"\nquery products {\n products {\n productId\n ...productFragment\n }\n}\n', name: "GraphQL request", locationOffset: { line: 1, column: 1 }, }, }, }; ```

This bug seems to be similar to #79.

shaneog commented 3 years ago

A deeper dive has led me to https://github.com/detrohutt/babel-plugin-import-graphql/blob/master/plugin/index.js#L19 which assumes that the plugin is acting on a file, and not the contents of a file. I've fixed my issue by using babel.transformFileSync and passing in the filename, rather than using babel.transform and passing in the file contents.

I'll leave this issue open for your attention.

punksta commented 2 years ago

I am getting similar issue after upgrading react-native to 0.69.5 and babel "^7.18.6",