Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ESM import issue causing: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. #115

Open
mo opened this issue Jun 12, 2022 · 1 comment

Comments

@mo
Copy link

mo commented Jun 12, 2022

I have a project where I have used react-linkify successfully for several years. I'm currently upgrading this project to ESM (i.e. I'm putting "type": "module" into my own package.json file). I got most things in my app to work again using ESM but whenevert I open a page that renders a react linkify component I get this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I use the library like this:

import Linkify from 'react-linkify'
...
<Linkify>{comment}</Linkify>

If I print the Linkify like this: console.log('Linkify=', Linkify) it looks like this in the devtools:
image

I just to see if worked, I change the usage temporarily into <Linkify.default>{comment}</Linkify.default> and then it works.

However, Linkify.default is ugly... any ideas isn't my import working normally? Is it some kind of ESM/CJS interop layer used in react-linkify that is getting it the way here?

Does react-linkify support being imported in ESM projects?

Note: many other libraries can be imported just fine, like for example:
@stripe/react-stripe-js, @sentry/browser, @stripe/stripe-js/pure.js, react-router, react

@mo
Copy link
Author

mo commented Jun 12, 2022

There is a tool to do quality checking on npm packages, i.e:

cd react-linkify
npm install @skypack/package-check --dev
npx package-check

This tool reports that react-linkify lacks an "ES Module Entrypoint" and points to this article:
//docs.skypack.dev/package-authors/package-checks#esm

I also found this article to be very very good for explaining ESM/CJS interop issues:
https://github.com/johnloy/esm-commonjs-interop-manual

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant