Library Not working in nextjs 10

[bhawanishiv]

I am using NextJS 10.0.1, have imported wdyr.js in _app.js in line no. 1 and have custom server.js. Please help me.

My package.json looks like this:

{
  "scripts": {
    "dev": "APP_ENV=local node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
  },
  "dependencies": {
    "@fingerprintjs/fingerprintjs": "^3.1.2",
    "@material-ui/core": "^4.5.2",
    "@material-ui/icons": "^4.5.1",
    "@material-ui/styles": "^4.5.2",
    "@n8tb1t/use-scroll-position": "^2.0.3",
    "@stripe/react-stripe-js": "^1.4.0",
    "@stripe/stripe-js": "^1.14.0",
    "@tailwindcss/line-clamp": "^0.2.0",
    "@tailwindcss/postcss7-compat": "^2.0.3",
    "@welldone-software/why-did-you-render": "6.0.5",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "apisauce": "^2.0.0",
    "autoprefixer": "^9",
    "base-64": "^1.0.0",
    "classnames": "^2.2.6",
    "cookie": "^0.4.1",
    "country-codes-list": "^1.6.8",
    "cssnano": "^4.1.10",
    "debounce": "^1.2.0",
    "express": "^4.17.1",
    "framer-motion": "^2.9.4",
    "graphql": "^15.4.0",
    "graphql-request": "^3.3.0",
    "graphql-tag": "^2.12.4",
    "js-cookie": "^2.2.1",
    "moment": "^2.29.1",
    "next": "10.0.1",
    "next-compose-plugins": "^2.2.0",
    "next-redux-wrapper": "^6.0.2",
    "next-seo": "^4.15.0",
    "next-transpile-modules": "4.1.0",
    "node-sass": "4.14.1",
    "perfect-scrollbar": "^1.5.1",
    "postcss": "^7",
    "prop-types": "^15.7.2",
    "qs-stringify": "^1.2.1",
    "ramda": "^0.27.1",
    "react": "17.0.1",
    "react-color": "^2.17.3",
    "react-dom": "17.0.1",
    "react-dropdown": "^1.9.0",
    "react-hook-form": "^6.11.5",
    "react-infinite-scroll-component": "^6.0.0",
    "react-intersection-observer": "^8.32.0",
    "react-loading": "^2.0.3",
    "react-modal": "^3.11.2",
    "react-player": "^2.7.0",
    "react-redux": "^7.2.2",
    "react-rnd": "^10.1.1",
    "react-select": "^4.1.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "request": "^2.88.2",
    "revidd-video-player": "git+ssh://git@gitlab.com:revidd/revidd-player.git#v2.1.1",
    "sass": "^1.29.0",
    "swiper": "^6.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.7.5",
    "@babel/eslint-parser": "^7.12.1",
    "@babel/plugin-proposal-optional-chaining": "^7.12.7",
    "@babel/preset-react": "^7.16.7",
    "@fullhuman/postcss-purgecss": "^4.0.0",
    "@types/classnames": "^2.2.9",
    "@types/node": "^14.14.6",
    "@types/react-color": "^3.0.1",
    "babel-eslint": "^9.0.0",
    "babel-plugin-inline-react-svg": "^1.1.2",
    "babel-plugin-module-resolver": "^4.0.0",
    "cross-env": "^6.0.3",
    "eslint": "^6.1.0",
    "eslint-config-airbnb": "^18.0.0",
    "eslint-config-nextjs": "1.0.6",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-html": "^5.0.3",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.14.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "next-compose-plugins": "^2.2.0",
    "postcss-import": "12.0.1",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^1.16.4",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "^4.0.5"
  }
}

My babel config is:

// babel.config.js
module.exports = function(api) {
  const isServer = api.caller(caller => caller?.isServer); // undefined
  const isCallerDevelopment = api.caller(caller => caller?.isDev); // undefined

  const presets = [
    [
      'next/babel',
      {
        'preset-react': {
          importSource:
            !isServer && isCallerDevelopment
              ? '@welldone-software/why-did-you-render'
              : 'react'
        }
      }
    ]
  ];

  return { presets };
};

And my wdyr.js looks like this:

import React from 'react';
import whyDidYouRender from '@welldone-software/why-did-you-render';

if (process.env.NODE_ENV === 'development') {
  if (typeof window !== 'undefined') {
    const ReactRedux = require('react-redux/lib');

    whyDidYouRender(React, {
      trackAllPureComponents: true,
      trackExtraHooks: [[ReactRedux, 'useSelector']]
    });
  }
}

[vzaidman]

What exactly doesn't work?

[bhawanishiv]

Sorry, couldn't respond on time. Actually, if you see the babel config, isServer and isCallerDevelopment are undefined in nextjs10. I also found that in latest nextjs (i.e. 12), they have added these changes).

I mean't for latest nextjs (12) it works fine. But for my project having nextjs version 10, its not logging anything.