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

vitto-moz commented 1 year ago

📜 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?

[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 commented 1 year ago

thank you for the report @vitto-moz!

marooncoder09 commented 1 year ago

@scopsy can i work on this one?

jainpawan21 commented 1 year ago

Sure @marooncoder09 Assigning this to you!

marooncoder09 commented 1 year ago

Sure @marooncoder09 Assigning this to you!

thanks

ankur0904 commented 1 year ago

Can I work on this issue?

pruthvirajjadhav1 commented 1 year ago

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

FlorianRuen commented 1 year ago

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

scopsy commented 1 year ago

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

ankur0904 commented 1 year ago

@scopsy Can I try to fix the issue?

FlorianRuen commented 1 year ago

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

ankur0904 commented 1 year ago

@FlorianRuen Thanks. I will reproduce the error.

ankur0904 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@FlorianRuen okay

FlorianRuen commented 12 months ago

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

ankur0904 commented 12 months ago

@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 commented 12 months ago

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

Untitled design (1)

@FlorianRuen Any suggestion on how to fix this issue?

FlorianRuen commented 12 months ago

@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 commented 12 months ago

@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 commented 11 months ago

@FlorianRuen Yes, you are right.

ankur0904 commented 11 months ago

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

tolgig commented 9 months ago

Any news?

FlorianRuen commented 9 months ago

@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 commented 9 months ago

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

Any updates around a fix for this?

mbomfim33 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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 commented 2 weeks ago

fix it we're facing errors for this

scopsy commented 2 weeks ago

@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 commented 1 week ago

@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 commented 1 week ago

@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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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 commented 1 week ago

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

LetItRock commented 1 week ago

@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 commented 1 week ago

@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 ❤️

Novu

scopsy commented 4 days ago

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

mbomfim33 commented 22 hours ago

@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 commented 22 hours ago

Yes it is 🙏

novuhq / novu