[v13] relay-compiler ignores typescript source files (ts and tsx)

[phtmgt]

Just upgraded to v13 and suddenly all my typescript files are simply skipped. In v12 there was the --extensions directive, which worked ok ('ts tsx js jsx'). Now there is no such option and can't find a reference to this anywhere.

Any suggestions? Am I missing something new here?

[alunyov]

@plamenh can you share your config? I think there is a "language" option in the config, it will search to the ts/tsx files, if the language is "typescript".

https://github.com/facebook/relay/blob/6649f5f9c8c1eeb23753dd61fd879cbaa8af6ab3/packages/relay-compiler/README.md?plain=1#L74

[phtmgt]

@alunyov I thought so as well, but, unfortunately, this is not the case. The language option refers to the output language (flow(js) or typescript(ts)).

[alunyov]

Hmm, maybe something else in the config. Can you share a simple repro?

[phtmgt]

Unfortunately, our setup is quite complicated (symfony(api-platform)/encore/webpack+babel/....) and it's a pain to create even a minimal repro. These are my configs:

// webpack.config.js
const Encore = require('@symfony/webpack-encore');
const WorkboxPlugin = require('workbox-webpack-plugin');
const path = require('path');

// Define base build
Encore
  .addEntry('FileUploaderStandalone', './assets/jsx/FileUploaderStandalone')
  ...

  .autoProvidejQuery()

  .addPlugin(
    new WorkboxPlugin.InjectManifest({
      swSrc: './assets/js/sw',
      swDest: '../service-worker.js',
      maximumFileSizeToCacheInBytes: 15000000,
    }),
  )

  // empty the outputPath dir before each build
  .cleanupOutputBeforeBuild()

  .configureBabel((babelConfig) => {
    babelConfig.plugins.push('relay');
    babelConfig.plugins.push('macros');
  }, {
    useBuiltIns: 'usage',
    corejs: 3,
  })

  .configureDevServerOptions(options => { 
    options.https = {
      pfx: path.join(process.env.HOME, '.symfony/certs/default.p12'),
    };
    options.allowedHosts = 'all';
    // options.port = 8081;
  })

  .configureFontRule({
    type: 'asset',
    //maxSize: 4 * 1024
  })

  .configureImageRule({
    // tell Webpack it should consider inlining
    type: 'asset',
    //maxSize: 4 * 1024, // 4 kb - the default is 8kb
  })

  // enable post css loader
  .enablePostCssLoader((options) => {
    options.postcssOptions = {
      // directory where the postcss.config.js file is stored
      config: Encore.isProduction() ? './postcss.config.js' : './postcss.config.dev.js',
    };
  })

  .enableReactPreset()

  // allow sass/scss files to be processed
  .enableSassLoader()

  .enableSingleRuntimeChunk()

  // Provide the location of your controllers.json file
  .enableStimulusBridge('./assets/controllers.json')

  .enableSourceMaps(!Encore.isProduction())

  .enableTypeScriptLoader((tsConfig) => {
    // You can use this callback function to adjust ts-loader settings
    // https://github.com/TypeStrong/ts-loader/blob/master/README.md#loader-options
    // For example:
    // tsConfig.silent = false
  })

  // create hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())

  .splitEntryChunks();

// relay.config.js
module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  src: "./assets/.",
  schema: "./data/schema.graphql",
  excludes: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}

Thanks for taking the time to go over this.

[alunyov]

So, the language is missing in the relay.config.js, right?

Can you try this:

// relay.config.js
module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  language: "typescript",
  src: "./assets/.",
  schema: "./data/schema.graphql",
  excludes: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}

[cliedeman]

@alunyov I ran into this issue as well.

// Works
const RepositoryNameQuery1 = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "relay") {
      name
    }
  }
`;

// Doesn't work
const RepositoryNameQuery2 = graphql `
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "relay") {
      name
    }
  }
`;

dprint seems to format tagged template literals this way.

[phtmgt]

So, the language is missing in the relay.config.js, right?

Can you try this:

// relay.config.js
module.exports = {
  // ...
  // Configuration options accepted by the `relay-compiler` command-line tool and `babel-plugin-relay`.
  language: "typescript",
  src: "./assets/.",
  schema: "./data/schema.graphql",
  excludes: ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],
}

I tried this at the very beginning. This option seems to relate to the output, not the input.

[phtmgt]

@alunyov I ran into this issue as well.

// Works
const RepositoryNameQuery1 = graphql`
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "relay") {
      name
    }
  }
`;

// Doesn't work
const RepositoryNameQuery2 = graphql `
  query AppRepositoryNameQuery {
    repository(owner: "facebook", name: "relay") {
      name
    }
  }
`;

dprint seems to format tagged template literals this way.

Is the difference the space between the graphql and backtick?

[cliedeman]

@plamenh yes it is. It doesn't pickup queries with that space. And there may be more variations. I didn't test newlines etc.

[cliedeman]

Reproduction #3828

[voideanvalue]

3831 indeed seems like the root cause here