babel 7 configuration format

Hi there,

I’m trying to bumble my way through to having a working babel7-based setup but there seems to be something wrong the moment i pull in “babel-plugin-inline-import-graphql-ast”

Here is my babel.config.js (this is now the babel7 method to specify a project-wide babel config, in lieu of .babelrc):

// https://github.com/babel/babel/pull/7358#issuecomment-388311941
module.exports = {
  overrides: [{
    test: '*',
    presets: [
      ['@babel/preset-env', {'node': 'current'}],
    ],
    plugins: [
      [
        "babel-plugin-inline-import",
        {
          extensions: [
            ".css"
          ]
        }
      ],
      "babel-plugin-inline-import-graphql-ast"
    ],
    env: {
      development: {
        presets: [
          "next/babel",
        ]
      },
      production: {
        presets: [
          [
            "next/babel",
            {
              ["preset-env"]: {
                targets: {
                  browsers: "> 5%"
                }
              }
            }
          ]
        ]
      },
      test: {
        presets: [
          [
            "next/babel",
            {
              ["preset-env"]: {
                modules: true
              }
            }
          ]
        ]
      }
    }
  }],
  ignore: [
    "/*.plain/"
  ]
}

Example usage of the graphql inlining:

# ---- https://github.com/apollographql/graphql-tag
#import "./Category3Fragment.graphql"
#import "./Category2Fragment.graphql"
#import "./Category1Fragment.graphql"


query Category1(
  $canonicalised_name: String,
  $category1__canonicalised_name: String,
) {
  category1 (
    canonicalised_name: $canonicalised_name,
    category1__canonicalised_name: $category1__canonicalised_name,
  ) {
      ...Category1Fragment
  }
}

Error text:

Module build failed: Error: Configuration contains explicit test/include/exclude checks, but no filename was passed to Babel
    at configFieldIsApplicable (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/config-chain.js:401:11)
    at configIsApplicable (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/config-chain.js:396:41)
    at forEach (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/config-chain.js:242:13)
    at Array.forEach (<anonymous>)
    at /Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/config-chain.js:239:42
    at buildRootChain (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/config-chain.js:90:20)
    at loadPrivatePartialConfig (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/partial.js:51:55)
    at loadFullConfig (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/config/full.js:43:39)
    at transformSync (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/lib/transform-sync.js:15:38)
    at buildVariableAST (/Users/matt/dev/partridge/frontend/node_modules/babel-plugin-inline-import-graphql-ast/build/index.js:87:58)
    at /Users/matt/dev/partridge/frontend/node_modules/babel-plugin-inline-import-graphql-ast/build/index.js:72:26
    at Array.map (<anonymous>)
    at buildReplacements (/Users/matt/dev/partridge/frontend/node_modules/babel-plugin-inline-import-graphql-ast/build/index.js:65:31)
    at PluginPass.exit (/Users/matt/dev/partridge/frontend/node_modules/babel-plugin-inline-import-graphql-ast/build/index.js:59:34)
    at newFn (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/matt/dev/partridge/frontend/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:65:20)

[loganfsmyth]

Nope! It’s a brand new feature in Babel 7, so I can’t imagine anyone would be relying on it, and your code already skips reading .babelrc files since the JS snippet doesn’t have a filename.

[loganfsmyth]

This line https://github.com/detrohutt/babel-plugin-inline-import-graphql-ast/blob/678284600731bc77b632766f969a6033d9304700/plugin/index.js#L54 will attempt to load the user’s babel.config.js file too, because it is not passing configFile: false when calling transformSync.

My recommendation would be to drop the usage of transformSync entirely.

export default ({ types: t }) => ({

should expand to

export default ({ types: t, template }) => ({

and then

function buildVariableAST(graphqlAST, importName) {
  const { ast } = transformSync(`var ${importName} = ${JSON.stringify(graphqlAST)}`, {
    ast: true
  })
  return ast.program.body[0]
}

can be

const buildAst = template(`var IMPORT_NAME = AST;`);
function buildVariableAST(graphqlAST, importName) {
  return buildAst({ 
    IMPORT_NAME: t.identifier(importName), 
    AST: t.valueToNode(graphqlAST),
  });
}