react-colorful: SyntaxError: Cannot use import statement outside a module

I get the following issue when trying to use react-colorful in my NextJS app:

SyntaxError: Cannot use import statement outside a module
 module.exports = require("react-colorful");

import { HexColorPicker } from "react-colorful";
<HexColorPicker color={color} onChange={setColor} />

Anyone know why?

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 20 (14 by maintainers)

Most upvoted comments

Havent had time to test it, but i would say we can close this issue.

philmetzger on Apr 26, 2021

It feels like we did everything we could. Should we close the issue, what do you think guys?

omgovich on Apr 25, 2021

“default” shouldn’t make the things worse. It’s a fallback. Check this thread out: https://twitter.com/nsfounder/status/1378879896135426051?s=19

“exports” is a complete hell…

omgovich on Apr 23, 2021

Super weird. Might it be a bug of v12.20.2? 🤔 I would recommend you to update your env to v14 since it an active LTS version:

omgovich on Apr 23, 2021

I haven’t taken a look at @rschristian’s solution but this is a good write-up on how to make ESM packages → https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

That’s about writing pure ESM packages which is definitely not what we want to be doing here and is quite inapplicable.

rschristian on Apr 23, 2021

I am using next@10.1.3

philmetzger on Apr 21, 2021

Hi! Thanks for the report!

This package is dual (we publish both ESM and CJS files) so everything should work well everywhere, but probably we can extend package’s export somehow to provide better support of Next’s SSR.

I’ll take a look tomorrow.

omgovich on Apr 16, 2021