Module parse failed

[MertHaddad]

Describe the bug

Uncaught Error: Module parse failed: Unexpected token (9057: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.

Reproduction

importing the module is enough.

System Info

W10 64 Chrome

Used Package Manager

npm

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

[kjbeethov]

Same issue

[ndom91]

Can you give me some more details on your setup? Are you using "vanilla" react or a meta-framework like Next.js?

EDIT: For example, check out this working basic codesandbox example: https://codesandbox.io/s/basic-timezone-react-example-3dro2p

[volotovskyy]

Same issue

ERROR in ../node_modules/react-timezone-select/dist/esm/index.js 9:247489 Module parse failed: Unexpected token (9:247489) You may need an appropriate loader to handle this file type

Vanilla react 18.2.0

[ndom91]

Hey there's a lot of updates related to bundling / published version.

Can you give the latest version on npm a shot?

[konstant-is]

I get the same error with latest installed, using Nextjs though.

Update:

Fixed by adding: transpilePackages: ['react-timezone-select'] to next.config
Using Next 13.1.1

[ndom91]

Looks like theres still an issue with using react-select with esm only projects.

See: JedWatson/react-select#5595

[ndom91]

Published a new version with some changes, including making react-select a peer dependency, can you try react-timezone-select@2.0.0+.

i.e.

npm install react-select react-timezone-select@2.0.0

[codeforcesmeme]

Is the error in this sandbox related to this one? It's an error in the dev server (react-scripts - when using v1.54+)

https://codesandbox.io/s/wonderful-franklin-15xbjq?file=/src/App.tsx

[ndom91]

Is the error in this sandbox related to this one? It's an error in the dev server (react-scripts - when using v1.54+)

codesandbox.io/s/wonderful-franklin-15xbjq?file=/src/App.tsx

I believe this is something else based on one of the recent PRs, should be fixed in 1.5.6 / 2.0.0 though. Please give the latest release a try 🙏

[nadnad]

Still seeing this with 2.1.0 when importing the TimezoneSelect component. The useTimezoneSelect hook import works fine though!

[a-type]

I'm guessing it's because the TSC target for the library is ES2020, which is pretty recent all things considered. Many build tools assume libraries are compiled to older versions of ES.

https://github.com/ndom91/react-timezone-select/blob/main/tsconfig.json#L5

The solution in userland is probably to configure your bundler/builder to transpile the library (see NextJS transpilePackages) down to whatever version of ES it's using.

For the library author, maybe bump that target down to ES6 or at least something safer: https://www.typescriptlang.org/tsconfig#target

[ndom91]

Yeah worth trying.. I've updated the tsconfig.json target to es6 in v2.1.1 👍

[ndom91]

Let me know if that helped in any way 🙏

[milosDf]

Similar issue here:

I have:

"react-select": "^5.7.7", "react-timezone-select": "^2.1.0",

[ndom91]

Does anyone still see this issue with 2.1.1+?

[danny-nguyen-lab49]

Yes I'm still experiencing this issue when running with nextjs. Seems though that its coming from the react-select dependency that is used by react-timezone-select if that helps. What's interesting is that in the actual code in my application, this is happening when i'm importing the useTimezoneSelect hook

import { useTimezoneSelect } from 'react-timezone-select'

"next": "^13.2.3"
"react-select": "^5.7.7",
"react-timezone-select": "2.1.2",

`error - ./node_modules/react-select/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

export default function _classCallCheck(instance, Constructor) {
| if (!(instance instanceof Constructor)) {
| throw new TypeError("Cannot call a class as a function");

Import trace for requested module:
./node_modules/react-select/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
./node_modules/react-select/dist/react-select.esm.js
./node_modules/react-timezone-select/dist/index.js
`

[ndom91]

@danny-nguyen-lab49 can you give v3.1.0 a shot? I updated the react-select peer dependency to minimum version 5.7.3 where they apparently shipped a fix for ESM importing (https://github.com/JedWatson/react-select/releases/tag/react-select@5.7.3) and updated to ship only ESM builds of react-timezone-select

[ndom91]

Haven't heard back here, should be working now so I'm going to close this.

If anyone still has an issue, feel free to open a new issue