facebook / relay

Relay is a JavaScript framework for building data-driven React applications.
https://relay.dev
MIT License
18.4k stars 1.82k forks source link

Unable to use relay.config.js with ESM module #4060

Open steinybot opened 2 years ago

steinybot commented 2 years ago

ESM

Node: 18.5.0

package.json:

{
  "type": "module",
  "scripts": {
    "relay": "relay-compiler"
  },
  "devDependencies": {
    "relay-compiler": "^14.1.0"
  }
}

relay.config.js:

export default {}

Run: yarn run relay

It fails with:

yarn run v1.22.19
$ relay-compiler
[ERROR] Unable to initialize relay compiler configuration. Error details:
Error searching config: Invalid config file: "/Users/jason/src/bug-reports/relay.config.js": Error running node: node:internal/modules/cjs/loader:1163
      throw err;
      ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jason/src/bug-reports/relay.config.js from /Users/jason/src/bug-reports/[eval] not supported.
Instead change the require of relay.config.js in /Users/jason/src/bug-reports/[eval] to a dynamic import() which is available in all CommonJS modules.
    at [eval]:1:37
    at Script.runInThisContext (node:vm:130:12)
    at Object.runInThisContext (node:vm:306:38)
    at [eval]-wrapper:6:22 {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.5.0

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

CJS (.js)

See what happens if we modify it to be CJS:

relay.config.js:

module.exports = {}

Run: yarn run relay

It fails with:

yarn run v1.22.19
$ relay-compiler
[ERROR] Unable to initialize relay compiler configuration. Error details:
Error searching config: Invalid config file: "/Users/jason/src/bug-reports/relay.config.js": Error running node: node:internal/modules/cjs/loader:1163
      throw err;
      ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/jason/src/bug-reports/relay.config.js from /Users/jason/src/bug-reports/[eval] not supported.
relay.config.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename relay.config.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/jason/src/bug-reports/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at [eval]:1:37
    at Script.runInThisContext (node:vm:130:12)
    at Object.runInThisContext (node:vm:306:38)
    at [eval]-wrapper:6:22 {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.5.0

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

CJS (.cjs)

Now try and rename it from relay.config.js to relay.config.cjs like it says.

Also update package.json to:

{
  "type": "module",
  "scripts": {
    "relay": "relay-compiler relay.config.cjs"
  },
  "devDependencies": {
    "relay-compiler": "^14.1.0"
  }
}

Run: yarn run relay

Now it fails with:

yarn run v1.22.19
$ relay-compiler relay.config.cjs
[ERROR] Unable to initialize relay compiler configuration. Error details:
Invalid file extension. Expected `.js` or `.json`. Provided file "relay.config.cjs".
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
smmoosavi commented 1 year ago

JSON formats work correctly if you don't need to run js.

simnalamburt commented 10 months ago

relay-compiler once accepted relay.config.cjs as a valid config file in the past. And I think doing so once again will be an easiest fix to this issue. I'm willing to implement it if relay team says that's acceptible fix.

Any thought?

2ssue commented 10 months ago

See also: https://github.com/facebook/relay/commit/c20ed27ec4d28a0585e185a607ee6ce1064c61e1

alunyov commented 10 months ago

relay-compiler once accepted relay.config.cjs as a valid config file in the past. And I think doing so once again will be an easiest fix to this issue. I'm willing to implement it if relay team says that's acceptible fix.

Any thought?

Oh, we probably removed cjs by mistake.

github2023spring commented 3 months ago

Will we add back the support for CJS? Thank you!

HallexCosta commented 1 month ago

JSON formats work correctly if you don't need to run js.

Convert the relay.config.js to relay.config.json apparently solves my problem, seems the relay has some issues with the compatibility between ESModulesJS and CommonJS

Environment: package.json use the "type": "module" relay version: 15.0.0 vite: 5.4.1 and using the vite-plugin-relay-lite library to define plugin configs to run with relay