This demonstrates a ESM/CJS module resolution bug in Next.js.
Note: This project's package.json
has "type": "module"
.
- Run
yarn
. - Copy the
react-loading-skeleton
directory fromcopy-this-into-node-modules
intonode_modules
. This is a completely trimmed-down version of the library https://github.com/dvtng/react-loading-skeleton. - Run
yarn dev
. - Go to http://localhost:3000/.
The server prints:
----- CJS USED -----
Skeleton: { default: [Function: Skeleton] }
...
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
If the line return <Skeleton />;
is changed to return <div />;
, the browser prints:
----- ESM USED -----
index.js?bee7:3 Skeleton: ƒ Skeleton() {
return react__WEBPACK_IMPORTED_MODULE_0__.createElement('div');
}
The server should be using react-loading-skeleton/dist/index.mjs
(the ES module), instead of react-loading-skeleton/dist/index.js
(the CommonJS module).