Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expose a config option for artifactDirectory #309

Closed
kejistan opened this issue Apr 2, 2022 · 5 comments · Fixed by #424
Closed

Expose a config option for artifactDirectory #309

kejistan opened this issue Apr 2, 2022 · 5 comments · Fixed by #424

Comments

@kejistan
Copy link

kejistan commented Apr 2, 2022

relay-compiler and babel-plugin-relay have an artifactDirectory config option to control the location of the generated files. The babel plugin and the relay-compiler config need to have the same location configure to work correctly. Currently this plugin doesn't expose a mechanism for configuring this so users cannot use this option in the relay compiler.

@cliedeman
Copy link
Contributor

@kejistan
Copy link
Author

kejistan commented Apr 4, 2022

Yes, but you need to configure this both in the plugin as well as in the relay.config.js:

artifactDirectory A specific directory to output all artifacts to. When enabling this the babel plugin needs artifactDirectory to be set as well. [string]

https://github.com/facebook/relay/tree/main/packages/relay-compiler#configuration

@cliedeman
Copy link
Contributor

I see.

From version 13 it will read the relay.config.js

In the meantime you copy the plugin into your project as a temporary solution

vite.config.ts

import type { Plugin } from "vite";
import { defineConfig } from "vite";
import { transformSync } from "@babel/core";

function relay(): Plugin {
  return {
    name: "vite:relay",
    transform(src, id) {
      let code = src;
      if (/.(t|j)sx?/.test(id) && src.includes("graphql`")) {
        const out = transformSync(src, {
          plugins: [
            [
              require.resolve("babel-plugin-relay"),
              {
                // TODO: your custom config
              },
            ],
          ],
          code: true,
        });

        if (!out?.code) throw new Error("vite-plugin-react Failed to build");
        code = out.code;
      }

      return {
        code,
        map: null,
      };
    },
  };
}

export default defineConfig({
  plugins: [..., relay],
});

@kejistan
Copy link
Author

kejistan commented May 4, 2022

I came back to this and figured out why it was failing. It wasn't the inability to specify the artifactDirectory in the plugin, you're right that the plugin can find it from the config file directly. It was actually the fact that the babel plugin is invoked without any file information: #334

@tobias-tengler
Copy link
Collaborator

This should also be resolved by my PR: #424

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants