Node-fs-extra: TypeError: Cannot read property 'native' of undefined

[kiprasmel]

• Operating System:

$ uname -a
Linux arch-usb 5.4.14-arch1-1 #1 SMP PREEMPT Thu, 23 Jan 2020 10:07:05 +0000 x86_64 GNU/Linux

• Node.js version:

$ node -v
v13.7.0

• fs-extra version:

8.1.0

I have a database model "User" that I use both in back-end via express server, and the front-end via react.

The model uses import fs from "fs-extra" inside it's methods to, for example, write to file, or read from it etc.

I do not use these functions in my front-end app -- only the back-end.
The model's the same, so I import the same model in either FE or BE.

The issue is - react compiles, but gives me this message:

../node_modules/prettier/parser-typescript.js
Module not found: Can't resolve '@microsoft/typescript-etw' in '/home/kipras/projects/turbo-schedule/node_modules/prettier'

AND once I open the app in the browser, I get this error:

TypeError: Cannot read property 'native' of undefined
../node_modules/fs-extra/lib/fs/index.js
node_modules/fs-extra/lib/fs/index.js:107
  104 | }
  105 | 
  106 | // fs.realpath.native only available in Node v9.2+
> 107 | if (typeof fs.realpath.native === 'function') {
  108 |   exports.realpath.native = u(fs.realpath.native)
  109 | }
  110 | 

which points to https://github.com/jprichardson/node-fs-extra/blob/master/lib/fs/index.js#L107.

From issue #728 - "Unable to get property 'native' of undefined or null reference" I'm pretty sure that the issue is that I'm trying to import fs from the "browser's" environment, even though I don't use fs in the browser - only the BE, but since the model is identical for both FE and BE, fs is imported in both cases, causing this error.

How would I fix this?

---

See also: https://stackoverflow.com/q/59459157/9285308

[RyanZim]

You need to dynamically require('fs-extra') inside the methods that use it, that way it won't be required in the browser. Alternately, you could configure webpack (or whatever compiler you're using) to stub fs-extra as an empty object. Either solution should take care of your issue.

[kiprasmel]

Thanks @RyanZim!

Since I'm using typescript, I found good use from https://stackoverflow.com/a/43112861/9285308 and ended up using

async function do_something_that_needs_fs() {
    const fs = await import("fs-extra");
}

thanks again & have a nice day:)