react-tooltip: Jest fails on standard import syntax

When importing Tooltip, Jest throws the following error unless you specifically import the cjs version. react-tooltip v5.2.0 To reproduce, in a project running Node 18, React 18, and Jest 29, import tooltip:

import { Tooltip as ReactTooltip, ITooltip } from 'react-tooltip';

Project runs fine, but jest tests fail.

When running jest tests I see the following error:

Jest encountered an unexpected token
    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
...node_modules/react-tooltip/dist/react-tooltip.esm.min.js:1

So, it’s possible it’s just my jest configuration that is unable to support this syntax, but the tests run fine with standard imports from other react ui packages.

Current solution: directly import from the dist directory’s .cjs version.

import { Tooltip as ReactTooltip, ITooltip } from '../../node_modules/react-tooltip/dist/react-tooltip.cjs';

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 15 (9 by maintainers)

Commits related to this issue

fix: package main should be cjs format. (fixes #869) - Add module entry for esm in package.json See https://rollupjs.org/guide/en/#publishing-es-modules: > To make sure your ES modules are immediat... — committed to KholdStare/react-tooltip by KholdStare 2 years ago
Merge pull request #881 from KholdStare/ak/package-json-fix fix: package main should be cjs format. (fixes #869) — committed to ReactTooltip/react-tooltip by danielbarion a year ago

Most upvoted comments

Thanks @KholdStare and @danielbarion, much appreciated. For those out there still on a version with this issue, an alternative solution is to make this mapping change in your local jest.config.js:

module.exports = {
    projects: [
      {
        ...
        moduleNameMapper: {
          '^react-tooltip$': 'react-tooltip/dist/react-tooltip.cjs',
          ...
        },
      },
    ],
  };

clemenger on Jan 3, 2023

I opened up a pull request here: https://github.com/ReactTooltip/react-tooltip/pull/881 . This fixed the issue for me in my project, and it also fixed all the issues in the example project posted above https://github.com/clemenger/react-tooltip-issue-869 .

I just followed rollup recomendations here: https://rollupjs.org/guide/en/#publishing-es-modules

KholdStare on Dec 30, 2022

@danielbarion yes, the jest test worked for me with the umd file. However, similar to the attempted workaround with the .cjs file, the .umd file works for jest, but if you run yarn start in the test project, it gives the following compile error with the umd file:

Failed to compile.

Attempted import error: 'Tooltip' is not exported from 'react-tooltip/dist/react-tooltip.umd' (imported as 'Tooltip').
ERROR in ./src/App.js 45:37-44
export 'Tooltip' (imported as 'Tooltip') was not found in 'react-tooltip/dist/react-tooltip.umd' (module has no exports)

webpack compiled with 1 error

clemenger on Dec 21, 2022

@clemenger for now the update is: I did a very quick test and I found some issues on Jest repository saying jest is not 100% compatible with es modules yet, so, when I tried with:

import { Tooltip } from "react-tooltip/dist/react-tooltip.umd";

worked, can you check too, please?

danielbarion on Dec 21, 2022

Thanks for the fast reply with the example, we will take a look as soon as possible and let you know our findings!

danielbarion on Dec 20, 2022

Hi @danielbarion thank you for the prompt reply! Here’s a sample repo using Create React App. https://github.com/clemenger/react-tooltip-issue-869 This commit is all I added to the basic default Create React App configurations: https://github.com/clemenger/react-tooltip-issue-869/commit/14bb2e0993d95a6221cb0fe9a6477c45b78394b0 Then I just ran yarn test and npm test. Both resulted in the aforementioned error.

clemenger on Dec 20, 2022