Urql: Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)

[BjoernRave]

It's me again with a new error

[ error ] ./node_modules/@urql/exchange-multipart-fetch/dist/urql-exchange-multipart-fetch.mjs
[1] Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)
[1] Could not find files for /en/movement/new in .next/build-manifest.json
[1] Could not find files for /en/movement/new in .next/build-manifest.json
[1] ModuleDependencyError: Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)

Versions:
"urql": "1.9.7",
"@urql/exchange-graphcache": "2.3.5",
"@urql/exchange-multipart-fetch": "0.1.5",

(Did a reinstall after the new release of @urql/core)

[JoviDeCroock]

Hey, sorry for the trouble. Would you mind trying it with

"@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core"

[BjoernRave]

I tried it and I think it's the same error, I copied the whole error log this time:

[ error ] ./node_modules/@urql/exchange-multipart-fetch/dist/urql-exchange-multipart-fetch.mjs
[1] Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)
[1] Could not find files for /movement in .next/build-manifest.json
[1] ModuleDependencyError: Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)
[1]     at Compilation.reportDependencyErrorsAndWarnings (/Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1468:21)
[1]     at /Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1258:10
[1]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[1]     at AsyncSeriesHook.lazyCompileHook (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/Hook.js:154:20)
[1]     at Compilation.finish (/Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1253:28)
[1]     at /Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compiler.js:672:17
[1]     at _done (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
[1]     at eval (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:22)
[1]     at runMicrotasks (<anonymous>)
[1]     at processTicksAndRejections (internal/process/task_queues.js:94:5)
[1] ModuleDependencyError: Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)
[1]     at Compilation.reportDependencyErrorsAndWarnings (/Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1468:21)
[1]     at /Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1258:10
[1]     at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
[1]     at AsyncSeriesHook.lazyCompileHook (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/Hook.js:154:20)
[1]     at Compilation.finish (/Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compilation.js:1253:28)
[1]     at /Users/bjoern/projects/inventhora/frontend/node_modules/webpack/lib/Compiler.js:672:17
[1]     at _done (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
[1]     at eval (eval at create (/Users/bjoern/projects/inventhora/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:31:22)
[1]     at runMicrotasks (<anonymous>)
[1]     at processTicksAndRejections (internal/process/task_queues.js:94:5)

[tonyhb]

When using with react the docs say to install via:

yarn add urql graphql

This means we don't have @urql/core in our package.json. I've replaced urql with the commit:

``` 1 {
2 "name": "ui",
3 "version": "0.1.0",
4 "private": true,
5 "dependencies": {
...
16 "@urql/exchange-multipart-fetch": "^0.1.5",
...
26 "react-use-form-state": "^0.11.0",
27 "typescript": "^3.6.4",
28 "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core"
29 },

But we then can't import `Provider` from `urql`:

```import {
  Provider as UrqlProvider,
  createClient,
  dedupExchange,
  cacheExchange,
} from "urql";

Gives this error:

Attempted import error: 'Provider' is not exported from 'urql' (imported as 'UrqlProvider').

Could we roll a new release with the fix? :)

[JoviDeCroock]

It's expected that it won't work when you use urql/core as urql adding a dep can pin it to a certain version.

So adding @urql/core: "version x" can pin it for you.

[tonyhb]

Right, but adding _just_ that doesn't fix the problem. With this, as you say:

    "urql": "^1.9.7",
    "@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core",
    "@urql/exchange-multipart-fetch": "^0.1.5",

We get the error:

Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)

With this:

    "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core",
    "@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core",
    "@urql/exchange-multipart-fetch": "^0.1.5",

We get the error:

Attempted import error: 'Provider' is not exported from 'urql'.

So, given adding that line doesn't work – what do we do?

Edit: And with a third...

    "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/urql",
    "@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core",
    "@urql/exchange-multipart-fetch": "^0.1.5",

We get the same error – no fix:

Can't import the named export 'makeFetchBody' from non EcmaScript module (only default export is available)

[JoviDeCroock]

Yes so "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/urql", as I said this is using @urql/core as the data for urql

[tonyhb]

I tried two things in the above post. Looking at the first:

    "urql": "^1.9.7",
    "@urql/core": "https://pkg.csb.dev/FormidableLabs/urql/commit/0ebb2f04/@urql/core",
    "@urql/exchange-multipart-fetch": "^0.1.5",

It gives us the same error. I'm a little confused at what else you're proposing as the fix here?

[kitten]

To quickly chime in here, I believe the CodeSandbox CI package for 0ebb2f04 is broken; this one is a newer one: https://pkg.csb.dev/FormidableLabs/urql/commit/73d2f3f8/urql and https://pkg.csb.dev/FormidableLabs/urql/commit/73d2f3f8/@urql/core

[kitten]

Can you have a look at running @urql/[email protected] please? That should fix this issue. yarn upgrade @urql/core should do the trick.

[tonyhb]

Unfortunately fails. Believe it's not the core package, it's specifically "@urql/exchange-multipart-fetch": "^0.1.5",.

Here's my package.json:

"@urql/core": "1.11.3",
"@urql/exchange-multipart-fetch": "^0.1.5",
"urql": "^1.9.7"

Also tried using require...

const { multipartFetchExchange } = require('@urql/exchange-multipart-fetch')

Using create-react-app w/ typescript. I guess I'll rewire webpack's config.

Edit: I'll use XHR to upload files. As a bonus I can listen to onprogress :)

[kitten]

Ok, I’ll investigate this further. In my quick test in Next, I can’t reproduce this anymore however. So if it’s no old version of @urql/core are showing up for you withyarn list --pattern urql` then it’s still an issue and I’ll take another look tomorrow-ish 🤞

[tonyhb]

 ❯ yarn list --pattern urql                                                                               [17:11:52]
yarn list v1.21.1
├─ @urql/[email protected]
├─ @urql/[email protected]
└─ [email protected]
Done in 0.82s.

Still seeing it, but it's no bother. Quickly wanted to say that this is a really, really, really awesome library, so thank you all for your work!!!

[JoviDeCroock]

Seems to work in the codesandbox CRA, this is odd https://codesandbox.io/s/flamboyant-moon-0kh6h?file=/src/App.js

[tonyhb]

Super weird. Will try reinstalling everything and upgrading any global packages I have to see if it fixes. Sounds like it's something local. Appreciate it.

[BjoernRave]

okay so I tried again with @urql/[email protected] being installed and I still get the same error.

I am using Next.js as you could probably already deduct from my error log

[kitten]

Sorry about this! I finally found what caused our broken builds and #734 fixed it. That's released as @urql/[email protected] and @urql/[email protected]. The broken releases have been marked as deprecated (or deleted where possible) on npm.

[OriginalEXE]

@BjoernRave Are you using next-urql by any chance?

I am running next-urql powered by ts-node and I still get the following error, even on 1.11.4:

Error: No valid exports main found for '/Users/ante/Projects/MarkerHero-Website/node_modules/@urql/core'
    at resolveExportsTarget (internal/modules/cjs/loader.js:611:9)
    at applyExports (internal/modules/cjs/loader.js:492:14)
    at resolveExports (internal/modules/cjs/loader.js:541:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:643:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:941:27)
    at Function.Module._load (internal/modules/cjs/loader.js:847:27)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at Object.<anonymous> (/Users/ante/Projects/MarkerHero-Website/node_modules/urql/dist/urql.js:1:12)
    at Module._compile (internal/modules/cjs/loader.js:1121:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
    at Object.require.extensions.<computed> [as .js] (/Users/ante/Projects/MarkerHero-Website/node_modules/ts-node/src/index.ts:832:44)
    at Module.load (internal/modules/cjs/loader.js:976:32)
    at Function.Module._load (internal/modules/cjs/loader.js:884:14)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18) {
  code: 'MODULE_NOT_FOUND'
}

[kitten]

Oh, I didn’t realise you were running ts-node. I was able to replicate this bug for @urql/core/internal in prior versions with Next.js, but @urql/core should always work as usual.

Could it be that it’s specific to ts-node?

[BjoernRave]

I can confirm, that everythings works now for me.

The error from @OriginalEXE seems to be different that what I was facing

[JoviDeCroock]

ts-node might have issues with "guessing" extensions which is a measure we had to call-to-live so we could support both Node 13 and Webpack

[OriginalEXE]

The weird thing is that I tried to manually specify the extension, but that did not help.

I will try to create a minimal reproduction, and will open a separate ticket.

[dkozma]

FYI, I kept getting the same issue as @BjoernRave, and not even the upgrade to @urql/[email protected] and @urql/[email protected] resolved it for me.

However, adding the following to my webpack config seemed to fix the issue:

module: {
  rules: [
    {
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto'
    }
  ]
}