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

vitto-moz · 2023-05-12T08:03:16Z

📜 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

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?

I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

I have read the Contributing Guidelines

Are you willing to submit PR?

None

_NV-2314

The text was updated successfully, but these errors were encountered:

scopsy · 2023-05-14T15:32:26Z

thank you for the report @vitto-moz!

marooncoder09 · 2023-05-18T18:24:30Z

@scopsy can i work on this one?

jainpawan21 · 2023-05-24T06:45:55Z

Sure @marooncoder09 Assigning this to you!

marooncoder09 · 2023-05-26T05:00:01Z

Sure @marooncoder09 Assigning this to you!

thanks

ankur0904 · 2023-06-21T18:25:48Z

Can I work on this issue?

pruthvirajjadhav1 · 2023-06-24T05:44:39Z

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

FlorianRuen · 2023-08-14T16:11:23Z

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

scopsy · 2023-08-14T16:51:59Z

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

ankur0904 · 2023-08-14T17:07:26Z

@scopsy Can I try to fix the issue?

FlorianRuen · 2023-08-14T18:37:53Z

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

ankur0904 · 2023-08-15T05:55:29Z

@FlorianRuen Thanks. I will reproduce the error.

ankur0904 · 2023-08-15T09:34:01Z

@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 · 2023-08-15T17:44:20Z

@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 · 2023-08-16T05:13:26Z

@FlorianRuen okay

FlorianRuen · 2023-08-28T13:56:07Z

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

ankur0904 · 2023-08-29T06:26:54Z

@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 · 2023-08-29T08:27:41Z

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 · 2023-08-29T09:01:43Z

@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 · 2023-08-29T09:08:11Z

@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 · 2023-08-30T06:59:30Z

@FlorianRuen Yes, you are right.

ankur0904 · 2023-08-31T19:09:40Z

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

tolgig · 2023-11-16T16:42:28Z

Any news?

FlorianRuen · 2023-11-17T11:16:09Z

@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 · 2023-11-23T09:58:09Z

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

Any updates around a fix for this?

mbomfim33 · 2024-04-18T04:55:29Z

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 · 2024-04-18T13:51:38Z

@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 #3400 (comment))

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

mbomfim33 · 2024-04-23T23:26:04Z

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 · 2024-08-06T04:49:55Z

fix it we're facing errors for this

scopsy · 2024-08-06T07:24:14Z

@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 · 2024-08-10T08:44:05Z

@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.

scopsy · 2024-08-12T10:17:19Z

@FrontMizfaTools please take a look at the new component: https://docs.novu.co/inbox/react/get-started

We will be rolling new and updated docs with more details in the next 1-2 weeks

FrontMizfaTools · 2024-08-13T05:08:17Z

I have installed @novu/react and now I'm facing this error:

TypeError: (0 , _ui.NovuUI) is not a constructor
at Renderer.tsx:43:1
at commitHookEffectListMount (react-dom.development.js:23189:1)
at commitPassiveMountOnFiber (react-dom.development.js:24965:1)
at commitPassiveMountEffects_complete (react-dom.development.js:24930:1)
at commitPassiveMountEffects_begin (react-dom.development.js:24917:1)
at commitPassiveMountEffects (react-dom.development.js:24905:1)
at flushPassiveEffectsImpl (react-dom.development.js:27078:1)
at flushPassiveEffects (react-dom.development.js:27023:1)
at performSyncWorkOnRoot (react-dom.development.js:26115:1)
at flushSyncCallbacks (react-dom.development.js:12042:1)
at commitRootImpl (react-dom.development.js:26998:1)
at commitRoot (react-dom.development.js:26721:1)
at finishConcurrentRender (react-dom.development.js:26020:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25848:1)
at workLoop (scheduler.development.js:266:1)
at flushWork (scheduler.development.js:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:1)

LetItRock · 2024-08-13T10:46:29Z

hey @FrontMizfaTools! 👋
Could you please share with us more details like whether is it a CRA, Vite, or NextJS app?
I would appreciate it if you could follow our guide and the Stackblitz example

FrontMizfaTools · 2024-08-13T11:45:16Z

hey @FrontMizfaTools! 👋 Could you please share with us more details like whether is it a CRA, Vite, or NextJS app? I would appreciate it if you could follow our guide and the Stackblitz example

Hello.
Thanks for response
I have been using @novu/notification-center in our project with custom features.
right now I am trying to replace it with new @novu/react.
I am using react-scripts (CRA) in my project and I guess showing the code will be the best way to talk about it:

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Button, Nav } from 'react-bootstrap';
import { Inbox } from '@novu/react';
// import {
//   NovuProvider,
//   PopoverNotificationCenter
// } from '@novu/notification-center';
// import { styles } from 'assets/novuStyles';
import { useAppContext } from 'Main';
import { useGetUserInfoQuery } from 'services/authApi';
import ChildrensTooltip from 'components/common/ChildrensTooltip';

const CustomBell = ({ unseenCount }) => {
  return (
    <ChildrensTooltip
      delayToRemove={100}
      placement="bottom"
      showOnHover={false}
      html={'نوتیفیکیشن'}
    >
      <Nav.Link
        as={Button}
        variant="link"
        className={classNames('px-0', {
          'notification-indicator notification-indicator-danger position-relative notification-indicator-fill':
            unseenCount !== 0
        })}
      >
        {unseenCount > 0 && (
          <span className="notification-indicator-number">{unseenCount}</span>
        )}
        <FontAwesomeIcon icon="bell" transform="shrink-7" className="fs-4" />
      </Nav.Link>
    </ChildrensTooltip>
  );
};

const NotificationDropdown = () => {
  const {
    config: { isDark }
  } = useAppContext();

  const { data: userInfo } = useGetUserInfoQuery();

  return (
    <>
      {userInfo?.path && (
        <Inbox
          subscriberId={userInfo?.path}
          applicationIdentifier={'...'}
          backendUrl="...."
          socketUrl="...."
         // renderBell={unreadCount => <CustomBell unseenCount={unreadCount} />}
        />
      )}
      {/* <NovuProvider
        subscriberId={userInfo?.path}
        applicationIdentifier="..."
        backendUrl={...}
        socketUrl={...}
        i18n={{
          translations: {
            notifications: 'پیام ها',
            markAllAsRead: 'خواندن همه',
            poweredBy: 'میزفاتولز',
            settings: 'تنظیمات',
            removeMessage: 'حذف پیام',
            markAsRead: 'خواندن پیام',
            markAsUnRead: 'نخواندن پیام',
            noNewNotification: 'پیام جدیدی جهت مشاهده وجود ندارد'
          },
          lang: 'fa'
        }}
        styles={styles(isDark)}
      >
        <PopoverNotificationCenter
          footer={() => <></>}
          // theme={{ dark: styles }}

          colorScheme={'light'}
        >
          {({ unseenCount }) => <CustomBell unseenCount={unseenCount} />}
        </PopoverNotificationCenter>
      </NovuProvider> */}
    </>
  );
};

export default NotificationDropdown;

Commented code would work If I install notification-center again. but new code with @novu/react.
is showing me error.:
(0 , _ui.NovuUI) is not a constructor
at Renderer.tsx:43:1

my default code would work fine and new one is not.

and in terminal:


Failed to parse source map from '\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'
Failed to parse source map from 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@novu/react/dist/client/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Compiled with warnings.

Failed to parse source map from '\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'
Failed to parse source map from 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/@novu/react/dist/client/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'

Failed to parse source map from 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js' file: Error: ENOENT: no such file or directory, open 'C:\Users\FrontMizfaTools\Desktop\Projects\app-new\node_modules\@novu\react\dist\client\Users\pavlotymchuk\projects\js\novu-2\packages\react\dist\client\index.js'



webpack compiled with 1 warning

LetItRock · 2024-08-13T14:27:24Z

@FrontMizfaTools Thank you for providing additional details. We are looking at this.

LetItRock · 2024-08-13T17:00:33Z

@FrontMizfaTools hey 👋
We've just published a new version 2.0.0-canary.1 that contains the fix for the CRA app. Please make sure that the node_modules contains that specific version. Let me know if further help is needed 🙌

FrontMizfaTools · 2024-08-15T06:00:43Z

@FrontMizfaTools hey 👋 We've just published a new version 2.0.0-canary.1 that contains the fix for the CRA app. Please make sure that the node_modules contains that specific version. Let me know if further help is needed 🙌

Frontend errors disappeared and rendered without error. 👍
I just don't know why responds and chats are different while they have same subscriberId, applicationIdentifier, backendUrl and
socketUrl. Cause I'm working on frontend panel so I don't know if you had changed the structure or something in backend service or not I should ask my colleagues to check Novu server.
So if you think it is for backend service then close the issue and thanks for following issues up.
I wish the best for your team ❤️

scopsy · 2024-08-19T08:52:19Z

@FrontMizfaTools are you using a self-hosted version of Novu? In that case we might not released the latest docker images yet

mbomfim33 · 2024-08-23T06:41:29Z

@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.

@scopsy sorry, is this new component you mentioned above fixing the warning messages on the console? Or is this a separate topic?

scopsy · 2024-08-23T06:54:18Z

Yes it is 🙏

FrontMizfaTools · 2024-09-15T12:22:04Z

e you using a self-hosted version of Novu? In that case we might not released the latest dock

And when can we use self-hosted version?

scopsy · 2024-10-29T15:09:23Z

This has been resolved by the new Inbox component with the updated docker images 🙏

github-actions bot added the triage label May 12, 2023

vitto-moz changed the title ~~🐛 Bug Report:~~ 🐛 Bug Report: Many warnings during webpack compile process. May 12, 2023

scopsy added the linear label May 14, 2023

scopsy changed the title ~~🐛 Bug Report: Many warnings during webpack compile process.~~ [NV-2314] 🐛 Bug Report: Many warnings during webpack compile process. May 14, 2023

scopsy added Community Ticket Created by Linear-GitHub Sync good first issue Good for newcomers help wanted Extra attention is needed and removed triage labels May 14, 2023

jainpawan21 assigned marooncoder09 May 24, 2023

scopsy assigned ankur0904 and unassigned marooncoder09 Aug 14, 2023

scopsy closed this as completed Oct 29, 2024

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

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

Comments

vitto-moz commented May 12, 2023 • edited by scopsy Loading

📜 Description

👟 Reproduction steps

👍 Expected behavior

👎 Actual Behavior with Screenshots

📃 Provide any additional context for the Bug.

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

🏢 Have you read the Contributing Guidelines?

Are you willing to submit PR?

scopsy commented May 14, 2023

marooncoder09 commented May 18, 2023

jainpawan21 commented May 24, 2023

marooncoder09 commented May 26, 2023

ankur0904 commented Jun 21, 2023

pruthvirajjadhav1 commented Jun 24, 2023

FlorianRuen commented Aug 14, 2023

scopsy commented Aug 14, 2023

ankur0904 commented Aug 14, 2023

FlorianRuen commented Aug 14, 2023

ankur0904 commented Aug 15, 2023

ankur0904 commented Aug 15, 2023

FlorianRuen commented Aug 15, 2023 • edited Loading

ankur0904 commented Aug 16, 2023

FlorianRuen commented Aug 28, 2023

ankur0904 commented Aug 29, 2023

ankur0904 commented Aug 29, 2023

FlorianRuen commented Aug 29, 2023

FlorianRuen commented Aug 29, 2023 • edited Loading

ankur0904 commented Aug 30, 2023

ankur0904 commented Aug 31, 2023

tolgig commented Nov 16, 2023

FlorianRuen commented Nov 17, 2023 • edited Loading

jcsix694 commented Nov 23, 2023

mbomfim33 commented Apr 18, 2024

FlorianRuen commented Apr 18, 2024

mbomfim33 commented Apr 23, 2024 • edited Loading

FrontMizfaTools commented Aug 6, 2024

scopsy commented Aug 6, 2024

FrontMizfaTools commented Aug 10, 2024

scopsy commented Aug 12, 2024

FrontMizfaTools commented Aug 13, 2024 • edited Loading

LetItRock commented Aug 13, 2024

FrontMizfaTools commented Aug 13, 2024 • edited Loading

LetItRock commented Aug 13, 2024

LetItRock commented Aug 13, 2024

FrontMizfaTools commented Aug 15, 2024

scopsy commented Aug 19, 2024

mbomfim33 commented Aug 23, 2024

scopsy commented Aug 23, 2024

FrontMizfaTools commented Sep 15, 2024

scopsy commented Oct 29, 2024

vitto-moz commented May 12, 2023 •

edited by scopsy

Loading

FlorianRuen commented Aug 15, 2023 •

edited

Loading

FlorianRuen commented Aug 29, 2023 •

edited

Loading

FlorianRuen commented Nov 17, 2023 •

edited

Loading

mbomfim33 commented Apr 23, 2024 •

edited

Loading

FrontMizfaTools commented Aug 13, 2024 •

edited

Loading

FrontMizfaTools commented Aug 13, 2024 •

edited

Loading