Build fails with `Unexpected character #` in `node-fetch-native`

[jmsfilipe]

Versions

• nuxt-edge: 2.16.0-27720022.54e852f
• node: v16.17.0

Reproduction

Additional Details

Steps to reproduce

• Use latest nuxt-edge version
• nuxt.config.js with target: 'static' and ssr: true
• Running nuxt build fails with

ERROR in ./node_modules/node-fetch-native/dist/index.cjs 69:2
Module parse failed: Unexpected character '#' (69:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|  */
| class BlobDataItem {
>   #path
|   #start
| 
 @ ./node_modules/node-fetch-native/lib/index.cjs 1:18-46
 @ ./.nuxt/server.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

What is Expected?

• Running nuxt build should be successful

What is actually happening?

• Seems like the node-fetch-native dependency used to be just node-fetch
• This new dependency includes private methods syntax and webpack/eslint don't know how to deal with that? Maybe it needs to be transpiled?

[Billybobbonnet]

I have the exact same issue with regular Nuxt v2 (without the nuxt-edge package), same config. I can't generate anymore.

[sanderjn]

I'm running into the same problem. Though I'm not using target: 'static' and ssr: true.

Local dev and build commands work just fine, but I'm getting this error just at Vercel.

[danielroe]

This seems an issue with webpack's support for class properties in node-fetch-native. We likely need to configure this in Nuxt 2.

cc: @pi0

[sanderjn]

Any workaround for now?

[Billybobbonnet]

Any workaround for now?

Pin your Nuxt version to "nuxt": "2.15.7"

[jbmarflo]

I cant solve this issue yet, Can anybody solve this error? I'm tried with babel

[pimlie]

You could also add a alias from node-fetch-native back to node-fetch when using v2.16.x:

// nuxt.config.js

  build: {
    extend(config) {
      config.resolve.alias['node-fetch-native'] = require.resolve('node-fetch')
    }
  }

[KevinBunn]

I was using D3 with my app and needed a standalone build to import the library. Can confirm setting build.standalone in my nuxt.config to false makes it so the server finally compiles, but I no longer can import d3.

I wonder if putting the dependencies in build.transpile will allow it to build instead for those who still really need external dependencies as we wait for a solution.

transpile docs

[prinzt]

Any workaround for now?

Pin your Nuxt version to "nuxt": "2.15.7"

Pinning to 2.15.8 seems to work for our team too.

[sheggi]

You could also add a alias from node-fetch-native back to node-fetch when using v2.16.x:

// nuxt.config.js

  build: {
    extend(config) {
      config.resolve.alias['node-fetch-native'] = require.resolve('node-fetch')
    }
  }

Worked for me for now.

[harshadsatra]

// nuxt.config.js

  build: {
    extend(config) {
      config.resolve.alias['node-fetch-native'] = require.resolve('node-fetch')
    }
  }

Solution did not work for me, any other recommendations?

Node: 16.16.0 Nuxt: 2.15.7

[Jones-S]

Everything above and including 2.16.0 causes this in my case when combining with nuxt.config.js -> build: { standalone: true }. I initially added this because of some ESM problems (https://github.com/nuxt/nuxt/issues/9223) when importing openlayers (https://github.com/openlayers/openlayers).

[vitalii-bulyzhyn]

Is there a solution for that? Got the same problem when deploying on Vercel

[danielroe]

This should be resolved in the edge channel after tonight's nightly build, or in the next release.

Let me know if not and I'll reopen.

[buglavecz]

@danielroe hi. I updated the latest version of nuxt 2.16.3, but i got this error:

[danielroe]

@buglavecz Would you open a new issue with a reproduction? 🙏

Do you still have this error if you manually add node-fetch-native to your project dependencies?

[buglavecz]

@danielroe yes. I got same error, when I added manually node-fetch-native to my project. I will make an issue from this. thanks.

[buglavecz]

@danielroe resolved: https://github.com/nuxt/nuxt/issues/19820 😄

[simonmaass]

@danielroe I updated to nuxt 2.16.3 with vercel and node 16.x

got the following error:

@vitalii-bulyzhyn did u find a solution?

Update: It works on 2.16.2 with this solution:

// nuxt.config.js

  build: {
    extend(config) {
      config.resolve.alias['node-fetch-native'] = require.resolve('node-fetch')
    }
  }

[danielroe]

@simonmaass Would you open a new issue with a reproduction? 🙏 Does it work if you manually add node-fetch-native to your dependencies?

[GelsDEV]

I had the same problem with Vercel. Manually adding node-fetch-native to the dependencies fixed the problem for me. Also runs flawlessly with Node 18.

[dommi10]

I add node-fetch-native as normal package and it fix the issue

[joao-conde]

Adding node-fetch-native to my dependencies did not fix the problem for [email protected]

[pi0]

Adding to the dependencies wouldn't probably make a difference (i advice to usually remove such pins and only renew lockfile).

node-fetch-native is bundled with a Syntax that is not supported by Webpack 4.

Would be nice if you can open a new issue in nuxt/bridge to followup any possible solution. (or @danielroe shall we move this to bridge directly?)