TypeError: (0 , _nanoevents.createNanoEvents) is not a function

[karolis-sh]

Hi 👋

I'm trying use/test nanonevents in codesandbox (https://codesandbox.io/s/mutable-shape-8urc9?file=/src/index.js) and with create-react-app's jest, both environments don't work with the library out of the box.

As I understand some of the defaults don't work well with *.cjs file extension ("main": "index.cjs",). Maybe it's worth renaming the file to follow a more common extension?

FYI: Renaming index.cjs -> index.cjs.js and changing "main": "index.cjs", -> "main": "index.cjs.js", seems to fix the issue.

[ai]

@karolis-sh can you leave a comment at this pull request, that you need this fix anf to ask them to release the fix from merged pull request?

[ai]

Renaming index.cjs -> index.cjs.js

We can’t do it, because it will break Node.js native ESM support. In Node.js (in contract to Babel, which broke the spec) you must explicitly show that this file is ES module. In package.type: "module" we mark the whole project as a ESM project. So, without .cjs file extension, Node.js will try to load thus CJS file as ESM and will throw an error.

[karolis-sh]

Thanks for explanation! I wasn't aware about the new *.cjs extension - good to know.

[ankon]

From facebook/create-react-app#9814, but to help out here:

It is possible to apply the needed changes to an existing project, by using the fact that react-scripts test passes through arguments to jest, and jest uses the command-line-provided arguments as overrides:

In package.json, replace the invocation to react-scripts test with something like this:

{
  // ...
  "scripts": {
    // ...
    "test": "react-scripts test --transform '{\"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$\":\"<rootDir>/node_modules/react-scripts/config/jest/babelTransform.js\", \"^.+\\\\.css$\": \"<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js\", \"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)\": \"<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js\"}' --transformIgnorePatterns '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$' --transformIgnorePatterns '^.+\\.module\\.(css|sass|scss)$'",
    // ..
  },
  // ...
}

[ai]

The lastest CRA release fixed the problem