SyntaxError: Cannot use import statement outside a module

When using Create-react-app with Jest.

Any tests that ends up important a Component using jotai/utils fail with the following error:

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/mark/ypm/x/c1-frontend-v4/node_modules/jotai/utils.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { useMemo, useCallback } from 'react';
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React, { useState } from 'react'
      2 | import { useAtom } from 'jotai'
    > 3 | import { useUpdateAtom } from 'jotai/utils'
        | ^
      4 | import { ReactKeycloakProvider } from '@react-keycloak/web'
      5 | import keycloak from 'src/lib/keycloak'
      6 | import { IDP_HINT } from 'src/common/constants'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/lib/keycloak/AuthProvider.tsx:3:1)

I am using “vanilla” create-react-app. There’s no custom babel configuration or anything just the default.

If I switch to just use useAtom from ‘jotai’ it works fine. But I want to be able to use the jotai/utils.

[dai-shi]

Thanks for reporting.

When using Create-react-app with Jest.

This sounds like one of the most popular use cases…

I know what is probably happening, but don’t know what’s best to fix. If anyone has any ideas, I would like to hear.

Meanwhile, if you changed like this, it would work.

- import { useUpdateAtom } from 'jotai/utils'
+ import { useUpdateAtom } from 'jotai/utils.cjs'

[dai-shi]

We might change the default to be cjs and add mjs for module files. Yeah, that would solve the nextjs and ie11 issues too.

Let me draft a PR, but I’m not sure about the final decision.