Vercel build error - version 1.5.4

[nareshkatta99]

Describe the bug

Since yesterday our vercel builds are failing,
Upon inspection, we found that there is some issue with react-timezone-select
We are not using react-select in our application, but react-timezone-select has that dependancy.

We downgraded our package version to 1.4.2 for now, which is perfectly working.

But, I thought it would be better if we report this issue here once.

Build error occurred
--
20:33:23.398 | /vercel/path0/node_modules/react-select/dist/react-select.esm.js:1
20:33:23.398 | import { u as useStateManager } from './useStateManager-7e1e8489.esm.js';
20:33:23.399 | ^^^^^^
20:33:23.399 |  
20:33:23.399 | SyntaxError: Cannot use import statement outside a module
20:33:23.399 | at Object.compileFunction (node:vm:360:18)
20:33:23.400 | at wrapSafe (node:internal/modules/cjs/loader:1094:15)
20:33:23.400 | at Module._compile (node:internal/modules/cjs/loader:1129:27)
20:33:23.400 | at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
20:33:23.400 | at Module.load (node:internal/modules/cjs/loader:1043:32)
20:33:23.400 | at Function.Module._load (node:internal/modules/cjs/loader:878:12)
20:33:23.401 | at ModuleWrap. (node:internal/modules/esm/translators:169:29)
20:33:23.401 | at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
20:33:23.401 | at async Promise.all (index 0)
20:33:23.401 | at async ESMLoader.import (node:internal/modules/esm/loader:530:24) {
20:33:23.402 | type: 'SyntaxError'
20:33:23.402 | }
20:33:23.588 | error Command failed with exit code 1.
20:33:23.589 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
20:33:23.619 | Error: Command "yarn run build" exited with 1
20:33:23.888 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

Reproduction

deploy into vercel with vercel 1.5.4

System Info

> Build error occurred
--
20:33:23.398 | /vercel/path0/node_modules/react-select/dist/react-select.esm.js:1
20:33:23.398 | import { u as useStateManager } from './useStateManager-7e1e8489.esm.js';
20:33:23.399 | ^^^^^^
20:33:23.399 |  
20:33:23.399 | SyntaxError: Cannot use import statement outside a module
20:33:23.399 | at Object.compileFunction (node:vm:360:18)
20:33:23.400 | at wrapSafe (node:internal/modules/cjs/loader:1094:15)
20:33:23.400 | at Module._compile (node:internal/modules/cjs/loader:1129:27)
20:33:23.400 | at Object.Module._extensions..js (node:internal/modules/cjs/loader:1219:10)
20:33:23.400 | at Module.load (node:internal/modules/cjs/loader:1043:32)
20:33:23.400 | at Function.Module._load (node:internal/modules/cjs/loader:878:12)
20:33:23.401 | at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
20:33:23.401 | at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
20:33:23.401 | at async Promise.all (index 0)
20:33:23.401 | at async ESMLoader.import (node:internal/modules/esm/loader:530:24) {
20:33:23.402 | type: 'SyntaxError'
20:33:23.402 | }
20:33:23.588 | error Command failed with exit code 1.
20:33:23.589 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
20:33:23.619 | Error: Command "yarn run build" exited with 1
20:33:23.888 | BUILD_UTILS_SPAWN_1: Command "yarn run build" exited with 1

Used Package Manager

yarn

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.

[ndom91]

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

See: JedWatson/react-select#5595

[ndom91]

I'm trying some of the workarounds now for react-timezone-select 👍

[ndom91]

Published a new version with some changes, including making react-select a peer dependency, can you try [email protected]+.

i.e.

npm install react-select [email protected]

[nareshkatta99]

No, still facing the issue,
Meanwhile I reported the issue in react-select as well, there is a suggestion in the comments, check this once.
JedWatson/react-select#5595 (comment)

[Aeyzaz]

use npm i [email protected] react-timezone-select until they fix the issue.

[ndom91]

I'm going to close this issue - it's a good deal out of date (we're on 2.1.5 now), and I believe this should be fixed by ensuring the component using this is a client component, i.e. add use client if you're on next.js 13+.

If anyone is still have this issue, feel free to open a new issue. Or give the new(ish) hook (useTimezoneSelect) a shot to integrate with your own select component.