Uncaught TypeError: Cannot read properties of undefined (reading 'native') #1372

MUmeshKumar · 2023-03-03T09:49:51Z

Hi,

When i try to import log4js in my app.js i'm getting following error -

Uncaught TypeError: Cannot read properties of undefined (reading 'native')
at ./node_modules/log4js/node_modules/fs-extra/lib/fs/index.js (index.js:107:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at ./node_modules/log4js/node_modules/fs-extra/lib/index.js (index.js:6:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at Object. (RollingFileWriteStream.js:2:1)
at ./node_modules/log4js/node_modules/streamroller/lib/RollingFileWriteStream.js (RollingFileWriteStream.js:338:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at ./node_modules/log4js/node_modules/streamroller/lib/index.js (index.js:2:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at Object. (file.js:3:1)
at ./node_modules/log4js/lib/appenders/file.js (file.js:154:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at Object. (index.js:17:1)
at ./node_modules/log4js/lib/appenders/index.js (index.js:182:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at ./node_modules/log4js/lib/log4js.js (log4js.js:27:1)
at webpack_require (bootstrap:856:1)
at fn (bootstrap:150:1)
at Module. (appenders sync:9:1)
at ./src/App.js (App.js:332:1)

My setup configuration -
React - 17.0.2
Node - v16.19.0
npm - 8.19.3
log4js - 6.8.0

I see version of fs-extra mentioned in the log4js/package.json is ^11.1.0 but in the log4js/node_modules/fs-extra/package.json says 8.1.0

Even after modifying the fs-extra module with the latest version 11.1.0, still error persists.

I also have seen similar error in Angular(#1225) followed the steps you mentioned. still facing same problem.
Can you please let me know what could be the possible reason for this error?

Thanks for your help in advance!

Best regards,
-Umesh

lamweili · 2023-03-03T10:06:04Z

I see version of fs-extra mentioned in the log4js/package.json is ^11.1.0 but in the log4js/node_modules/fs-extra/package.json says 8.1.0

The fs-extra@^11.10 is log4js/package.json is under devDependencies, used solely for CI/CD testing.
The fs-extra@8.1.0 is pulled in by log4js/streamroller, which itself is a dependency of log4js. That is correct.

So it should not be a problem with fs-extra.

lamweili · 2023-03-03T10:16:34Z

Uncaught TypeError: Cannot read properties of undefined (reading 'native')
at ./node_modules/log4js/node_modules/fs-extra/lib/fs/index.js (index.js:107:1)

Seems to point at the following if statement.

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: }

And seems to say your fs.realpath === undefined, therefore unable to reach native.

Then again, it's really hard to figure out what's wrong.
Are you trying to use it on a browser? Any issues with your webpack.config.js?

MUmeshKumar · 2023-03-03T10:58:59Z

And seems to say your fs.realpath === undefined, therefore unable to reach native

yes, fs.realpath is undefined

Are you trying to use it on a browser?

After importing i tried to load the app in Chrome browser

Any issues with your webpack.config.js?

No issues with webpack.config.js.

lamweili · 2023-03-03T11:09:36Z

Are you trying to use file appender in a browser?
That won't work. See #849 and #968.

MUmeshKumar · 2023-03-06T07:16:41Z

I have not used any file appenders, i'm getting error as soon after importing log4js to the app

React - 17.0.2
Node - 16.19.0
npm - 8.19.3
log4js - 6.8.0

This issue can be reproduced with below steps -

npx create-react-app my-app
if you get compile issu from graceful-fs module then follow below steps
1. Degrade react-script from 5.x to 4.0.3
2. Remove package-lock.json
3. npm install
import log4js in App.js

lamweili · 2023-03-06T07:46:27Z

I don't think you can use log4js in a browser (#1270 & #1288), it's meant to be used on server-side.
You might need to use browserify for log4js on the browser.

There was PR #1023 in the works at the end of #968 but unfortunately, it stopped.

lamweili · 2023-03-07T07:14:35Z

Thanks to @aellerton who came up with PR #1374 which resolved the issue.
Released in log4js@6.9.0.

MUmeshKumar · 2023-03-07T10:25:16Z

Thanks for the latest version. It solved the above issue. But with the latest version i'm facing different issue.

Can you please help?

Thanks,
-Umesh

aellerton · 2023-03-07T12:22:30Z

Are you able to share your log4js config by any chance? Can you also do "console.log(appenderModule)" somewhere in there?

…

On Tue., 7 Mar. 2023, 18:25 MUmeshKumar, ***@***.***> wrote: Thanks for the latest version. It solved the above issue. But with the latest version i'm facing different issue. [image: image] <https://user-images.githubusercontent.com/125536990/223394801-1d6e0295-c4ee-4795-b7d3-f320da7f5b30.png> [image: image] <https://user-images.githubusercontent.com/125536990/223395044-ff25d9ae-02fb-48d1-a2ca-9ed087a77daf.png> Can you please help? Thanks, -Umesh — Reply to this email directly, view it on GitHub <#1372 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHMJIS3HFSBL7ZZ6YHYAY3W24EJPANCNFSM6AAAAAAVOMUKHM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

MUmeshKumar · 2023-03-10T04:39:09Z

Sorry for the late reply.

I used below log4js config -
log4js.configure({
appenders: { abc: { type: "file", filename: "abc.log" } },
categories: { default: { appenders: ["abc"], level: "error" } },
});

When i checked "appenderModule" we are getting empty object.

I understand from the previous PR, we cannot use any appenders in the browser. Is there any other way to log?

lamweili · 2023-03-10T05:20:43Z

I believe it is because of file appender. The browser doesn't come with Node.js libraries, so it cannot write to a log file.

You should be able to use console instead:

log4js.configure({
  appenders: { abc: { type: "console", filename: "abc.log" } },
  categories: { default: { appenders: ["abc"], level: "error" } },
});

Try it and see if it works.

MUmeshKumar · 2023-03-10T05:25:08Z

Sure. Thanks for the reply @lamweili @aellerton

lamweili · 2023-03-10T05:25:52Z

@MUmeshKumar, is your issue now resolved? Is it working now?

aellerton · 2023-03-10T05:29:01Z

Try the 'basic' layout with console, i.e. { type: "console", layout: { type: "basic" } } Let us know?

…

On Fri, 10 Mar 2023 at 13:26, Lam Wei Li ***@***.***> wrote: @MUmeshKumar <https://github.com/MUmeshKumar>, is your issue now resolved? Is it working now? — Reply to this email directly, view it on GitHub <#1372 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAHMJIXI5FWFIDHXO47WZMLW3K3OZANCNFSM6AAAAAAVOMUKHM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

MUmeshKumar · 2023-03-10T05:42:37Z

I've tried this - Logs are printing in browser console and no file has been created

log4js.configure({
  appenders: { abc: { type: "console", filename: "abc.log" } },
  categories: { default: { appenders: ["abc"], level: "error" } },
});

Same goes with { type: "console", layout: { type: "basic" } } logs are printing fine in browser console

lamweili · 2023-03-10T06:11:48Z

Yup, because a browser does not have Node.js libraries to write to a file.
This is a browser-based restriction, nothing much we can do about it.

As for the layout type, it defaults to colouredLayout if not specified.
I can't remember if colours work in the browser console. @MUmeshKumar, maybe you can let us know?

Nevertheless, setting it to basic (if any compatibility concerns) will strip off colours.

MUmeshKumar · 2023-03-10T06:17:47Z

You are right, setting layout to basic strips off the colours -
Without basic setting -

With basic setting -

lamweili · 2023-03-10T06:22:52Z

@MUmeshKumar Is everything fine now?

MUmeshKumar · 2023-03-10T06:32:31Z

Yes. Thanks for clearing out the queries. @lamweili

lamweili linked a pull request Mar 7, 2023 that will close this issue

feat: support for isomorphic logging on browser #1374

Merged

lamweili added this to the 6.8.1 milestone Mar 7, 2023

lamweili added the bug Something isn't working label Mar 7, 2023

lamweili closed this as completed in #1374 Mar 7, 2023

lamweili added enhancement New feature or request and removed bug Something isn't working labels Mar 7, 2023

lamweili modified the milestone: 6.9.0 Mar 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught TypeError: Cannot read properties of undefined (reading 'native') #1372

Uncaught TypeError: Cannot read properties of undefined (reading 'native') #1372

MUmeshKumar commented Mar 3, 2023 •

edited

lamweili commented Mar 3, 2023 •

edited

lamweili commented Mar 3, 2023 •

edited

MUmeshKumar commented Mar 3, 2023

lamweili commented Mar 3, 2023 •

edited

MUmeshKumar commented Mar 6, 2023

lamweili commented Mar 6, 2023

lamweili commented Mar 7, 2023 •

edited

MUmeshKumar commented Mar 7, 2023

aellerton commented Mar 7, 2023 via email

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

aellerton commented Mar 10, 2023 via email

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023 •

edited

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

MUmeshKumar commented Mar 10, 2023

Uncaught TypeError: Cannot read properties of undefined (reading 'native') #1372

Uncaught TypeError: Cannot read properties of undefined (reading 'native') #1372

Comments

MUmeshKumar commented Mar 3, 2023 • edited

lamweili commented Mar 3, 2023 • edited

lamweili commented Mar 3, 2023 • edited

MUmeshKumar commented Mar 3, 2023

lamweili commented Mar 3, 2023 • edited

MUmeshKumar commented Mar 6, 2023

lamweili commented Mar 6, 2023

lamweili commented Mar 7, 2023 • edited

MUmeshKumar commented Mar 7, 2023

aellerton commented Mar 7, 2023 via email

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

aellerton commented Mar 10, 2023 via email

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023 • edited

MUmeshKumar commented Mar 10, 2023

lamweili commented Mar 10, 2023

MUmeshKumar commented Mar 10, 2023

MUmeshKumar commented Mar 3, 2023 •

edited

lamweili commented Mar 3, 2023 •

edited

lamweili commented Mar 3, 2023 •

edited

lamweili commented Mar 3, 2023 •

edited

lamweili commented Mar 7, 2023 •

edited

lamweili commented Mar 10, 2023 •

edited