Jest fails on standard import syntax

[clemenger]

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';

[gabrieljablonski]

Are you using Jest with TypeScript? If so, try doing two import statements:

import { Tooltip } from 'react-tooltip';
import type { ITooltip } from 'react-tooltip';

import type only works with TypeScript. Let me know if this works.

[clemenger]

Yes, Jest with TypeScript. Updated my code to separate imports but got the same error with Jest.

react-tooltip/dist/react-tooltip.esm.min.js:1
return fe(e,t,n,!0)};u.Fragment=o,u.jsx=pe,u.jsxs=de}(),c.exports=u;var f,p={exports:{}};
                   ^^^^^^

It seems to be highlighting this u.Fragment as the error in the minified output in case that is helpful?
Also, here's another part of the Jest error:

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import { Tooltip } from 'react-tooltip'; 
        | ^

[gabrieljablonski]

This looks like something to do with build configuration, I'm not sure though.

We'll see what we can do.

[danielbarion]

Hi @clemenger, can you create a new app with Create React App and simulate your problem, please? Or share your app if it's possible. We'll try to test and solve this problem and let you know the status update.

Thanks!

[clemenger]

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:
clemenger/react-tooltip-issue-869@14bb2e0
Then I just ran yarn test and npm test. Both resulted in the aforementioned error.

[danielbarion]

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

[danielbarion]

@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?

[clemenger]

@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

[danielbarion]

yeah, I don't have an answer yet.

we need to do more research about this, do you have any suggestions?

[clemenger]

Not at the moment, I'll let you know if we come up with anything.

[KholdStare]

I'm hitting this problem too. Any updates?

[KholdStare]

I opened up a pull request here: #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

[danielbarion]

Hi guys, version 5.3.3-beta.0 was published from @KholdStare PR, let's test and give feedback please, if it's working as expected 😄

[clemenger]

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',
          ...
        },
      },
    ],
  };

See related https://stackoverflow.com/questions/73958968/

[notejm]

I had a similar case and the solution was:

moduleNameMapper: {
        '^react-tooltip$': '<rootDir>/node_modules/react-tooltip/dist/react-tooltip.cjs.js'
}

which probably requires a special tsconfig.json configuration in the compilerOptions:

"compilerOptions": {
        "rootDir": "./"
}