Not working in older browsers - possible to transpile down to es5?

[Noitidart]

Our TV at the masjid is older and we use this for the clock to show times. However after upgrading to v4 we get this error:

Is it possible to transpile our bundle down to es5?

[sgtsquiggs]

You're importing from adhan/lib/esm instead you can import from adhan/lib/cjs - also if you're importing adhan into a project, your project should be transpiling for you

[Noitidart]

@sgtsquiggs jzkhair for the reply! I think node_modules are excluded from transpilation. I tried the cjs thing but its not working either. I think it's because I searched cjs and it also seems to use the spread operator (screenshot below).

I was importing like this:

import {
  CalculationMethod,
  Coordinates,
  Madhab,
  Prayer,
  PrayerTimes,
} from 'adhan';

Screenshot with spread operator in cjs:

[sgtsquiggs]

You should be able to use babel to transpile your bundled code to es5. What is your current setup?

[Noitidart]

Jzkhair for asking! I use Next.js out of the box config - its like create-react-app - https://nextjs.org/docs/getting-started just have to do npx create-next-app@latest --typescript

[sgtsquiggs]

Can you try adding a .babelrc file to the root of your project? Try this:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {}
      }
    ]
  ],
  "plugins": []
}

[Noitidart]

Jzkhair so much for trying to help me when it's out of scope. Next.js already has babel. I see it also has a place to modify the webpack config too. I think maybe I can do something there to make it not exclude adhan lib from the transpilations - https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config