using absolute paths for importing GraphQL causes an error

[timboslicecreative]

Absolute paths configuration:

// .babelrc
{
  "plugins": [
    "import-graphql"
  ]
}
// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."
  }
}

Import code:

import {qPosts} from 'schema/post.graphql';

Gives the error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at Array.map (<anonymous>)

If using relative import path there is no error. e.g.

import {qPosts} from '../schema/post.graphql';

I have two projects, one using version 2.8.1 and one using 2.7.0 with the same .babelrc and jsconfig.json both cannot use absolute imports with babel-plugin-import-graphql but work using relative imports.

[joshuabaker]

We’ve run into this with a monorepo and cannot figure out how to get around it. Most scenarios that attempt to resolve the module path beforehand cause issues loading or transpiling.

[GearoidCollins]

We encountered this too with our monorepo and ended up having to revert to 2.7.0.

[joshuabaker]

We encountered this too with our monorepo and ended up having to revert to 2.7.0.

We tried this, but the downgrade didn’t seem to help. What’s your monorepo setup?

[davidsandoz]

I also encountered this issue in a Nuxt.js project, with version 2.8.1.

However, it happens only when running tests, for the tests that are mounting components that import graphql files.

It does not happen when building or running the project.

And even stranger, it seems to be happening only on my machine. Indeed, it does not happen when the tests are run on our CI, and it doesn't happen for a colleague on his machine. We both tried as well with a fresh clone of the project. All the tests pass for him, and I get the error. I'm on macOS 11.3.1 and my colleague on macOS 11.2.3. The CI runs on Ubuntu.

I'm not expecting any help to solve an issue that happens only on my machine, but I figured it would be good to still share the information in case it can help with the general issue.

[jarrett-confrey]

from my stack trace this issue seems related to https://github.com/detrohutt/babel-plugin-import-graphql/pull/78

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:124:11)
    at join (path.js:1039:7)
    at node_modules/babel-plugin-import-graphql/build/index.js:77:39
    at Array.map (<anonymous>)
    at PluginPass.exit (node_modules/babel-plugin-import-graphql/build/index.js:76:39)
    at newFn (node_modules/@babel/traverse/lib/visitors.js:171: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:110:16)

[dero]

The problem is this plugin doesn't take the set baseUrl into account. I worked around the issue in my project by dynamically setting the nodePath option to the absolute path of the baseUrl like this:

// .babelrc.js
const path = require('path')
const tsconfig = require('./tsconfig.json')

module.exports = (api) => {
  api.cache.using(() => process.env.NODE_ENV)

  return {
    "presets": ["next/babel"],
    "plugins": [
      /**
       * The `babel-plugin-import-graphql` plugin doesn't take
       * `tsconfig` or `jsconfig` `baseUrl` value into account,
       * which is why we need to manually supply it as an absolute
       * path here to ensure relative *.graphql imports work as expected.
       *
       * e.g.
       *
       * import MY_QUERY from 'graphql/queries/<...>'
       */
      ["import-graphql", { "nodePath": path.resolve(tsconfig.compilerOptions.baseUrl) }],
      ...
      ...

[GiancarlosIO]

Just to add that you can also solve this by implementing the babel-plugin-module-resolver.

Example: https://github.com/detrohutt/babel-plugin-import-graphql/issues/92#issuecomment-1324297736

[joshuabaker]

We ended up just using graphql-tag in .js files. I wrote a script to convert them.