[NV-2314] 🐛 Bug Report: Many warnings during webpack compile process.

[vitto-moz]

📜 Description

Hi, we use "@novu/notification-center": "0.14.0" for our web application and there are many warnings during webpack compile process.

👟 Reproduction steps

1. just try to run the application id dev mode with "@novu/notification-center": "0.14.0"

👍 Expected behavior

There should not be warnings

👎 Actual Behavior with Screenshots

WARNING in ./node_modules/@novu/notification-center/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\@novu\notification-center\src\utils\react-to-webcomponent.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\@novu\notification-center\src\utils\react-to-webcomponent.ts'

WARNING in ./node_modules/@novu/notification-center/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\@novu\notification-center\src\utils\styles.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\*****\Documents\*****\packages\web-app\node_modules\@novu\notification-center\src\utils\styles.ts'

WARNING in ./node_modules/@novu/notification-center/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\@novu\notification-center\src\utils\token.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\turnk\Documents\*****\*****\web-app\node_modules\@novu\notification-center\src\utils\token.ts'

WARNING in ./node_modules/react-image/umd/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\react-image\umd\index.js.map' file: Error: ENOENT: no such file or directory, open 'C:\Users\*****\Documents\*****\*****\web-app\node_modules\react-image\umd\index.js.map'
...........
.....
webpack compiled with 161 warnings

📃 Provide any additional context for the Bug.

No response

👀 Have you spent some time to check if this bug has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• [X] I have read the Contributing Guidelines

Are you willing to submit PR?

None

_NV-2314

[scopsy]

thank you for the report @vitto-moz!

[marooncoder09]

@scopsy can i work on this one?

[jainpawan21]

Sure @marooncoder09 Assigning this to you!

[marooncoder09]

Sure @marooncoder09 Assigning this to you!

thanks

[ankur0904]

Can I work on this issue?

[pruthvirajjadhav1]

@marooncoder09 Just checking if you are still working on this. If not assign it to me

[FlorianRuen]

I'm facing the exact same issue, I got around 170 warnings due to missing files Anyone got an update on this ?

[scopsy]

@pruthvirajjadhav1 are still willing to take a look at that? Let me know so I can assign you 🙏

[ankur0904]

@scopsy Can I try to fix the issue?

[FlorianRuen]

@ankur0904 Good thanks, let me known if you need something related to this issue ;)

[ankur0904]

@FlorianRuen Thanks. I will reproduce the error.

[ankur0904]

@FlorianRuen I reproduced the error. I observed the main error is Error: ENOENT: no such file or directory. It looks like some files are missing. Here is list of some files name

• DotsHorizontal.tsx
• GradientDot.tsx
• Read.tsx
• Trash.tsx
• Avatar.tsx
• ErrorIcon.tsx
• Info.tsx
• Question.tsx
• Success.tsx
• Up.tsx
• Warning.tsx
• Chat.tsx
• Mail.tsx
• Mobile.tsx
• Sms.tsx
• index.ts
• index.ts
• When.tsx
• i18n.context.tsx
• notification-center.context.ts
• notifications-provider.context.tsx
• notifications.context.ts
• novu-provider.context.ts
• novu-theme-provider.context.tsx
• novu-theme.context.ts
• store-provider.context.tsx
• store.context.ts
• index.ts
• styles-provider.tsx
• styles-provider.types.ts
• date.ts
• defaultTheme.ts
• index.ts
• pagination.ts
• react-to-webcomponent.ts
• styles.ts
• token.ts

[FlorianRuen]

@ankur0904 Yes I see the same error, got around 170 warnings.

Two raisons : unused files the refeence need to be removed or used files and you need to find why these files are missing

[ankur0904]

@FlorianRuen okay

[FlorianRuen]

@ankur0904 Just coming back on this subject, do you have any update or still working on it ?

[ankur0904]

@FlorianRuen Actually, I had my university exam last week so unable to make any progress on this issue. But I will try my best to fix this error and update you within 3-4 days.

[ankur0904]

The src folder is present here https://github.com/novuhq/novu/tree/next/packages/notification-center But it is not present in the node_modules after running this command

npm install @novu/notification-center

@FlorianRuen Any suggestion on how to fix this issue?

[FlorianRuen]

@ankur0904 And what is the content of dist folder ? Because I think the src are the raw sources, and the dist are the compiled one, so maybe this is just a wrong matching or something

[FlorianRuen]

@ankur0904

I think the file defaultTheme.ts match the file in dist/cjs/utils/defaultTheme.js If it's the case, the path is wrong in defaultTheme.js.map

"sources":["../../../src/utils/defaultTheme.ts"]

What is strange here, we got both js file and TypeScript files for same file It seems to be the same case for many warnings we got on the console (pagination ...)

[ankur0904]

@FlorianRuen Yes, you are right.

[ankur0904]

@FlorianRuen What should we do next to fix the error?

[tolgig]

Any news?

[FlorianRuen]

@tolgig On my side, I didn't get some time to go deeper on how to fix this issue If you have some time, maybe you can check this ?

[jcsix694]

I seem to be getting this error too, using "@novu/notification-center": "^0.20.0"

Any updates around a fix for this?

[mbomfim33]

Hey folks, did you ever figured out what is the issue here? I can maybe take a look during my free time but I just wanted to understand if there's already some ideas on how to fix it?

[FlorianRuen]

@MarcoBomfim Hey, I didn't have time to check deeper this issue, but it seems the problem is due to wrong paths for libraries (check my message https://github.com/novuhq/novu/issues/3400#issuecomment-1697056340)

During compilation, several paths seem broken, which causes libraries not to be found, and therefore this multitude of errors

[mbomfim33]

Hey @FlorianRuen thanks. I did a quick investigation on Friday (with my limited bundling skills), but couldn't pick out what's going on. The mapping seems to be wrong as you said, but I tried several different things and still couldn't get rid of the warning.

One thing caught my attention, I trired running npm pack and extracting the content of the tarball to see if the sourcemap file exists on the published package

When extracting the file (tar -xzvf novu-notification-center-0.24.1.tgz) it created a folder called package with:

• dist/
• package.json

When first unpacking it, src was missing from the tarball, so I added it in files inside package.json, and generated a new tarball, and I could then see the source.

This apparently didn't help with the warnings though. I'm just adding this here in the hope that someone who knows more about webpack might have a hunch of a fix.

EDIT:

Forgot to mention another curious thing, I noticed two other things:

• sourcemap is disabled on the webpack config for the notifications-center package. Enabling it seems to make no difference though
• This is apparently the only package using webpack? Is there a particular reason for it? I noticed Vue and Angular projects don't have a webpack config file

[FrontMizfaTools]

fix it we're facing errors for this

[scopsy]

@FrontMizfaTools in the next 2 weeks we are releasing a brand new Inbox component redesigned from the ground up, much smaller bundle size, much more flexibility on styling, and performance improvements. I will post here once we have something.

[FrontMizfaTools]

@FrontMizfaTools in the next 2 weeks we are releasing a brand new Inbox component redesigned from the ground up, much smaller bundle size, much more flexibility on styling, and performance improvements. I will post here once we have something.

Tnx for that. I'm checking this issue everyday. because we need sourcemaps and this is a huge problem for us. If I can help you let me know.