teodosii / react-notifications-component

Delightful and highly customisable React Component to notify your users
https://teodosii.github.io/react-notifications-component/
MIT License
1.27k stars 73 forks source link

"self is not defined" in version 3.3.2 #133

Closed Krekinha closed 2 years ago

Krekinha commented 2 years ago

Hi! Trying to use the latest react-notifications-component version (3.3.2), but getting the following error:


Server Error ReferenceError: self is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Call Stack

Object. file:///D:/dev/repos/next/testes/testes/node_modules/react-notifications-component/dist/index.js (1:292)

Module._compile internal/modules/cjs/loader.js (1085:14)

Object.Module._extensions..js internal/modules/cjs/loader.js (1114:10)

Module.load internal/modules/cjs/loader.js (950:32)

Function.Module._load internal/modules/cjs/loader.js (790:12)

Module.require internal/modules/cjs/loader.js (974:19)

require internal/modules/cjs/helpers.js (93:18)

Object.react-notifications-component file:///D:/dev/repos/next/testes/testes/.next/server/pages/_app.js (53:18)

__webpack_require__ file:///D:/dev/repos/next/testes/testes/.next/server/webpack-runtime.js (33:42)

eval webpack-internal:///./pages/_app.tsx (7:87)


framework = React/NextJS lang = ts/js

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

{
  "name": "testes",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.0.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-notifications-component": "^3.3.2"
  },
  "devDependencies": {
    "@types/node": "^17.0.12",
    "@types/react": "^17.0.38",
    "eslint": "7",
    "eslint-config-next": "12.0.3",
    "typescript": "^4.5.5"
  }
}

_app.tsx

import { ReactNotifications } from "react-notifications-component";

import "../styles/globals.css";
import "react-notifications-component/dist/theme.css";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ReactNotifications />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

The latest version where I don't get this error is 3.1.0 I appreciate any help :smile:

Krekinha commented 2 years ago

soved here 👍🏼