Issues with Borwser Compatibility in a Next.js Application

Unanswered

Red-billed Tropicbird posted this in #help-forum

Red-billed TropicbirdOP

2024-03-13T03:51:45.000Z

#1
I'm developing a Next.js application and encountering issues with fetching data and ensuring compatibility with older browsers WebOs that uses webOS TV 4.x : 2018~2019 with Chromium 53
and webOS TV 3.x 2016~2017 with Chromium 38. Despite trying various approaches and configurations, I'm facing difficulties, particularly with dynamic route parameters and polyfills.

i've added

"browserslist": [
    "chrome 38"
  ],

2 Replies

Red-billed TropicbirdOP

2024-03-13T03:52:07.000Z

#2

i had application error : a client-side exception has occured (see the browser console for more information)

- i switched from axios to fetch
- I've attempted to include whatwg-fetch to polyfill the Fetch API for older browsers.
- My tsconfig.json initially targeted es2016 but was changed to es5 to increase compatibility.
- I converted my functional component using useEffect and custom hooks to a class component,

I have a react js app uses react 18 and it works fine (using axios for the WebOs) and it works added couple of polyfile in it like :
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>

if (typeof Object.assign != "function") {
        Object.assign = function (target) {
          "use strict";
          if (target == null) {
            throw new TypeError("Cannot convert undefined or null to object");
          }

          target = Object(target);
          for (var index = 1; index < arguments.length; index++) {
            var source = arguments[index];
            if (source != null) {
              for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                  target[key] = source[key];
                }
              }
            }
          }
          return target;
        };
      }

#3

i've been doing these for days.... anyone has any idea ?
i used "next": "^14.1.1",
i've added

import "core-js/es/map";
import "core-js/es/set";
import "raf/polyfill";
import "react-app-polyfill/ie9";
import "react-app-polyfill/stable";
import "core-js/actual/array/from";
import "core-js/actual/array/group";
import "core-js/features/array/includes";
import "core-js/actual/set";
import "core-js/actual/promise";
import "core-js/actual/structured-clone";
import "core-js/actual/queue-microtask";
import "globalthis/polyfill";
import "whatwg-fetch";
import "core-js/stable";
import "regenerator-runtime/runtime";

to my _app.tsx....