react-timezone-select package not working with react-scripts 4.0.1 & 4.0.3

[aditodkar]

package.json: dependencies

"dependencies": {
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "axios": "^0.24.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-timezone-select": "^1.2.0",
    "sass": "^1.49.0",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.0.1"
  },

Error message:

./node_modules/react-timezone-select/dist/esm/index.js 9693:38
Module parse failed: Unexpected token (9693:38)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           r = ts(a[0]);
|     let o = "",
>         s = n.isDST() ? r[0].daylight?.abbr : r[0].standard?.abbr,
|         l = n.isDST() ? r[0].daylight?.name : r[0].standard?.name;
|     const u = 60 * t.current.offset,

I tried this facebook/create-react-app#10518 (comment) but did not work for me

[ndom91]

Hey it looks like your using a bit of an older version. Can you try the latest release? v1.3.0+

[aditodkar]

Hey it looks like your using a bit of an older version. Can you try the latest release? v1.3.0+

Not working for me. I am using "react-timezone-select": "^1.3.1", and "react-scripts": "4.0.1",

[ndom91]

Hi @aditodkar so I was able to test it and it worked with react-timezone-select@1.3.1 and react-scripts@5.0.0.

With react-scripts@4.0.1, however, I receive the same error. It seems like 4.0.1 doesn't like the cjs version of spacetime I'm using (which provides the isDST() function).

spacetime has since updated to an ESM-only version (7.0.0+). When updating to this version of spacetime, react-timezone-select still does not work with the older version of react-scripts (4.0.1) however :(

Do you have an option to upgrade to a newer version of react-scripts?

[aditodkar]

@ndom91 Thanks a lot. I updated react-scripts to 5.0.0 and it worked fine.

[yorch]

@ndom91 Just came across this error and can't update to react-scripts@5 at the moment (it's a big undertake due to size of the code base, we are planning on doing it but will take some time).

Would you have found any other workaround by any chance? It's strange as it works when building yarn build but not when yarn start. I'm guessing something related to prod vs dev build. Need to dig more to see what's different between the two.

Many thanks!

[frx08]

I have the same problem but I'm not able to update to react-scripts@5.

the problem is webpack 4 not working with optional chaining operator, so babel-loader also fails
babel/babel-loader#871
the only solution for backwards compatibility is use @babel/plugin-proposal-optional-chaining plugin or drop optional chaining operator

[yairnizfiv]

Latest esm dist (v1.3.2) consists of imports it's not transpiled yet