[BUG] Unable to use tooltip from within a package

[TimBAtGov]

Bug description
When referencing the tooltip inside of a package an error is displayed that says:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `RequestType`.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `OperatingRequest`.
    at createFiberFromTypeAndProps (http://localhost:3000/static/js/bundle.js:111968:25)
    at createFiberFromElement (http://localhost:3000/static/js/bundle.js:111991:19)
    at createChild (http://localhost:3000/static/js/bundle.js:102081:32)
    at reconcileChildrenArray (http://localhost:3000/static/js/bundle.js:102302:29)
    at reconcileChildFibers (http://localhost:3000/static/js/bundle.js:102634:18)
    at reconcileChildren (http://localhost:3000/static/js/bundle.js:105142:32)
    at updateHostComponent (http://localhost:3000/static/js/bundle.js:105690:7)
    at beginWork (http://localhost:3000/static/js/bundle.js:106920:18)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:93934:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:93978:20)

It works as intended when I run the app (before being packaged) locally. If I remove the tooltip from the page then page loads as intended when navigating to that page within another app using the packaged version.

Version of Package
Latest and 5.12.0

To Reproduce
Create an app that has a tooltip and then bundle it as a package with react-tooltip as a dependency.
Create a new app and install the package and reference the package app with the tooltip.
Run the new app and navigate to the page from the package.

Expected behavior
Would expect to be able to load the page and hover over the element with the tooltip

Desktop (please complete the following information if possible or delete this section):

• OS: Windows 10
• Browser: Chrome
• Version: Version 114.0.5735.199
• Frameworks: React 17.0.2

[gabrieljablonski]

If I remove the tooltip from the page then page loads as intended when navigating to that page within another app using the packaged version.

At first glance, this does not seem related to react-tooltip, but with your bundler's configuration. Have you tried bundling your first application without the tooltip just to make sure everything works as expected?

In case you've already tested that, and it seems it IS related to react-tooltip, I believe your steps to reproduce might not be clear enough.

What tools are you using to bundle the first application? The one with react-tooltip as the dependency.

Whenever you have the time, if you could provide a sample project (maybe easier to build 2 separate projects? not sure) it would help a lot.

[TimBAtGov]

Yes I have tested it without react-tooltip and then it works as it should. I've also added the tooltip on the app that has the package installed and it works in the app but not where it's referenced inside of the package.

I'm creating the package through the typescript compiler and a mix of moving files for stylesheets into a dist directory from the scripts in my package.json

scripts: {
...
"bundle": "rimraf dist && tsc && npm run copy",
"copy": "copyfiles package.json dist && copyfiles tsconfig.json dist && copyfiles ./src/Styles/** dist",
...
}

I'm running npm run bundle and then npm pack ./dist to create my package.

I'll see if I can create a sample project for it but it will probably have to wait until the weekend.

[gabrieljablonski]

Not a problem.

Until then, if i get the time I might try to reproduce it.

[JurajKavka]

I confirm this issue. It is problem in create-react-app webpack config, or in general in webpack config.

facebook/create-react-app#12700

Would by possible to change build format in this project to use just js files in bundle?

[gabrieljablonski]

@JurajKavka if you have the time, can you please test the following.

Manually edit the "main" key on the node_modules/react-tooltip/package.json file:

// node_modules/react-tooltip/package.json
{
  ...
  // old value
  // "main": "dist/react-tooltip.min.cjs",
  "main": "dist/react-tooltip.min.mjs",
  ...
}

Hopefully .mjs doesn't have the same problem.

[JurajKavka]

This is working for me (i had to change also "exports")

 "main": "dist/react-tooltip.min.mjs",
 "module": "dist/react-tooltip.min.mjs",
 "exports": {
   ".": {
     "types": "./dist/react-tooltip.d.ts",
     "require": "./dist/react-tooltip.min.mjs",
     "import": "./dist/react-tooltip.min.mjs",
     "default": "./dist/react-tooltip.min.mjs"
   },
   "./dist/react-tooltip": "./dist/react-tooltip.min.mjs",
   "./dist/react-tooltip.css": "./dist/react-tooltip.min.css",
   "./dist/react-tooltip.d.ts": "./dist/react-tooltip.d.ts",
   "./package.json": "./package.json"
 },

[gabrieljablonski]

Thanks @JurajKavka

We'll add a troubleshooting section with some tips to workaround this (since updating the package will override the changes).

Since we're not currently planning to make any changes to the default package.json, or to our dist files structure in general, we'll leave this open until we can figure out a cleaner workaround, or until its fixed by the create-react-app guys.

[JurajKavka]

The have at least 5 PRs adding the support for cjs files.. all opened and as old as one year 😄

[gabrieljablonski]

Yeah, I noticed. But maybe some day.