[bug]: SyntaxError: The requested module 'react-easy-sort' does not provide an export named 'SortableItem'

[sanjithacks]

Describe the bug

Error: Failed to load external module emblor: SyntaxError: The requested module 'react-easy-sort' does not provide an export named 'SortableItem'

Nextjs15 pages router

How to reproduce

...

Link to reproduction

...

Additional information

✓ Starting...
 ✓ Ready in 1208ms
 ○ Compiling / ...
 ✓ Compiled / in 4.3s
 ⨯ Error: Failed to load external module emblor: SyntaxError: The requested module 'react-easy-sort' does not provide an export named 'SortableItem'
    at async (.next/server/chunks/ssr/[root of the server]__4b527e._.js:106:13) {
  page: '/'
}
 ✓ Compiled /_error in 204ms
 GET / 500 in 5812ms
^C

[felixyeboah]

I am having this issue too. any fix for this?

[felixyeboah]

`export const TagField = ({
name,
label,
helperMsg,
helper,
placeholder,
}: {
name: string
label: string
helperMsg?: string
helper?: boolean
placeholder?: string
}) => {
const inputRef = useRef(null)
const [inputValue, setInputValue] = React.useState('')
const { control, setValue, watch } = useRemixFormContext()
const tags = watch(name, []) as Tag[]

const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = useCallback(
	(e) => {
		if (e.key === 'Enter') {
			e.preventDefault()
			if (inputValue.trim()) {
				const newTag = {
					id: crypto.randomUUID(),
					text: inputValue.trim(),
				}
				setValue(name, [...tags, newTag])
				setInputValue('')
			}
		} else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
			e.preventDefault()
			setValue(name, tags.slice(0, -1))
		}
	},
	[inputValue, tags, setValue, name],
)

const removeTag = useCallback(
	(tagId: string) => {
		setValue(
			name,
			tags.filter((tag) => tag.id !== tagId),
		)
	},
	[tags, setValue, name],
)

return (
	<FormField
		control={control}
		name={name}
		render={({ field }) => (
			<FormItem className="flex flex-col">
				<FormLabel>{label}</FormLabel>
				<FormControl>
					<div
						className="flex min-h-10 w-full flex-wrap gap-2 rounded-lg border border-input bg-background p-2 text-sm focus-within:outline-none focus-within:border-primary"
						onClick={() => inputRef.current?.focus()}
					>
						{tags.map((tag) => (
							<div
								key={tag.id}
								className="flex h-10 items-center gap-1 rounded-md border bg-muted px-2 py-1"
							>
								<span>{tag.text}</span>
								<Button
									type="button"
									variant="ghost"
									size="sm"
									className="h-auto p-0 hover:bg-transparent"
									onClick={() => removeTag(tag.id)}
								>
									<X className="h-3 w-3" />
								</Button>
							</div>
						))}
						<Input
							{...field}
							ref={inputRef}
							value={inputValue}
							onChange={(e) => setInputValue(e.target.value)}
							onKeyDown={handleKeyDown}
							className="flex-1 h-10 border-0 bg-transparent p-0 outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
							placeholder={placeholder}
							type="text"
						/>
					</div>
				</FormControl>
				{helper && <FormDescription>{helperMsg}</FormDescription>}
				<FormMessage />
			</FormItem>
		)}
	/>
)

}`

I got this working.i created a component

[nazrdogan]

+1

[shivamstaq]

+1
Is this a version issue ?

[rohit-revrag]

+1

[nam-dam-0130]

+1

[lvnr]

same issue. works on one project, doesn't work on a different one. thought it's because it was on next.js 14. upgraded to v15 with Turbopack and react v19, still the same.