ddouglas
January 6, 2025, 4:11pm
1
I’ve updated my application to rails 8 running with propshaft and the importmap-rails gem instead of webpacker. I am still using yarn to manage dependencies and pinning them in my importmap. Works great except I ran into this error with tippy.js. I successfully pinned and imported it with all dependencies (there were a lot, but it works).
But then the browser hits this error. I believe it’s because tippy.js is expecting a bundler like webpacker to strip out any mentions of process.env, which are only used for logging. Does anyone know a way around this?
Here is my code:
# from config/importmap.rb
pin "tippy", to: "tippy.js/dist/tippy.esm.js"
# various dependencies pinned here...
pin "/assets/@popperjs/core/dist/esm/dom-utils/isLayoutViewport.js", to: "@popperjs/core/dist/esm/dom-utils/isLayoutViewport.js"
pin "/assets/@popperjs/core/dist/esm/dom-utils/getWindowScroll.js", to: "@popperjs/core/dist/esm/dom-utils/getWindowScroll.js"
pin "/assets/@popperjs/core/dist/esm/dom-utils/getHTMLElementScroll.js", to: "@popperjs/core/dist/esm/dom-utils/getHTMLElementScroll.js"
// from application.js
import tippy from 'tippy';
Then in the browser console, only one error:
Uncaught ReferenceError: process is not defined
at validation.ts:46:1
The line in question looks like this:
if (__DEV__) {
Here are the issues I’ve found documenting the error for reference:
opened 07:50PM - 24 Oct 21 UTC
closed 02:17AM - 29 Oct 21 UTC
🐛 bug
🚧 unconfirmed
## Bug description
I know importmaps aren't on most peoples horizon but it is… coming up quick with Rails developers and the release of Rails 7. Currently tippy requires a build environment like webpack, rollup or esbuild however with importmaps you just include the final ESM build from a CDN so there is no build step.
When I try to use tippy in this fashion it fails with `Uncaught ReferenceError: process is not defined`.
## Reproduction
As I can't include the ESM shims this pen will only work on Chromium based browsers. The error will be visible in the browser console not the codepen for some reason.
https://codepen.io/coder2000/pen/mdMRgLL
opened 07:29AM - 30 Jun 19 UTC
closed 03:44AM - 04 Aug 19 UTC
✋ help wanted
Hi everyone,
The next version of Tippy.js is coming in August. In order to en… sure it's as stable as possible, I need you to help test it out.
## Poll
How are you using the tippy.js package? Answer here if you get time! #550
## Goals
1. Improve developer experience with warnings without bloating production bundle size
2. Massively reduce core size and make the library more treeshake-able
3. Allow new feature additions to be added separately without increasing bundle size
4. Improve naming consistency and usage
## Highlights
- ⬇️ 26% smaller download size (5.8 kB minzipped including core CSS)
- ⬇️ 46% smaller parse size (16.9 kB minified including core CSS)
- ⬇️ 61% smaller core CSS (0.6 kB minzipped) + smaller external animation files
- ⚙️Development and production versions for better developer experience
- ✨New animation variations
- ✨New `touch: ["hold", delay]` prop (for long press behavior)
- ✨New `arrow: string | Element` values to use your own shape
- ✨New `createSingleton` method, supersedes `group()`
- 🌸Improved animations integration and documentation, namely fully dynamic transition dimensions when tippy content updates
- 🌸Improved naming consistency
## Installation
Package Managers:
```bash
# npm
npm i tippy.js@next
# Yarn
yarn add tippy.js@next
```
CDN:
```html
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@next"></script>
```
## Changes
View all of the details in the [PR in progress](https://github.com/atomiks/tippyjs/pull/499).
## Migration Guide
<details>
<summary>View guide</summary>
The warnings will help a lot with this.
Note to CDN users, it's recommended to migrate using the development file:
```html
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/iife/tippy.bundle.js"></script>
```
## If you were specifying a custom file path import
```js
import tippy from 'tippy.js'; // <— fine
import tippy from 'tippy.js/esm/index.min.js'; // <— breaking
```
Check the new folder structure and filenames. `umd` is now `cjs` (Node) or `iife` (browser).
## If you want the material filling effect back (it's no longer default)
Node:
```js
import tippy from 'tippy.js';
import 'tippy.js/backdrop.css';
import 'tippy.js/animations/shift-away.css';
tippy(targets, {
content: 'tooltip',
animateFill: true,
animation: 'shift-away'
});
```
Browser:
```html
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/backdrop.css" />
<link
rel="stylesheet"
href="https://unpkg.com/tippy.js@5/animations/shift-away.css"
/>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script>
tippy(targets, {
content: 'tooltip',
animateFill: true,
animation: 'shift-away'
});
</script>
```
## If you were using `arrowType: 'round'`
Include the `svg-arrow` CSS, and use the `arrow` prop instead.
Node:
```js
import 'tippy.js/svg-arrow.css';
tippy(targets, {
arrow: 'round'
});
```
Browser:
```html
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/svg-arrow.css" />
```
## If you were using `followCursor`
Enhance the `tippy` base function with this prop by importing it from `tippy.js/extra-props`.
Node:
```js
import tippyBase from 'tippy.js';
import enhance, {followCursor} from 'tippy.js/extra-props';
const tippy = enhance(tippyBase, [followCursor]);
tippy('button', {followCursor: true});
```
Browser:
```html
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/extra-props/iife/tippy-extra-props.min.js"></script>
<script>
tippy('button', {followCursor: true});
</script>
```
## If you were using `tippy.group()`
Use `createSingleton()` and import from `tippy.js/addons`.
Node:
```diff
- import tippy from 'tippy.js';
- tippy.group(tippy('button'), { delay: 1000 });
+ import { createSingleton } from 'tippy.js/addons';
+ createSingleton(tippy('button'), { delay: 1000 });
```
Browser:
```html
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/addons/iife/tippy-addons.min.js"></script>
<script>
tippy.createSingleton(tippy('button'), {delay: 1000});
</script>
```
## If you were using the `target` option
Use `delegate()` and import from `tippy.js/addons`.
Node:
```diff
- import tippy from 'tippy.js';
- tippy('#parent', { target: '.child });
+ import { delegate } from 'tippy.js/addons';
+ delegate('#parent', { target: '.child' });
```
Browser:
```html
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script>
<script src="https://unpkg.com/tippy.js@5/addons/iife/tippy-addons.min.js"></script>
<script>
tippy.delegate('#parent', {target: '.child'});
</script>
```
## If you were using the `showOnInit` option
It's now named `showOnCreate`, to match the `onCreate` lifecycle hook
## If you were using the `size` option
It's been removed, as it's more flexible to just use a theme and specify the `font-size` and `padding` properties.
## If you were using the included themes
- `google` is now `material`
## If you were creating custom themes
- `[x-placement]` attribute is now `[data-placement]`
- `.tippy-roundarrow` is now `.tippy-svg-arrow`
- `.tippy-tooltip` no longer has `padding` on it, rather the `.tippy-content` selector does.
- `.tippy-tooltip` no longer has `text-align: center`
## If you were using default animations or creating custom animations
- `shift-away`, `shift-toward`, `scale` and `perspective` need to be imported separately now.
Node:
```js
import 'tippy.js/animations/scale.css';
```
Browser:
```html
<link
rel="stylesheet"
href="https://unpkg.com/tippy.js@5/animations/scale.css"
/>
```
- Make sure your `visible` state has no translation (of 0px, instead of 10px like before).
## If you were using virtual reference elements
Pass a placeholder element in instead of a plain object:
```js
tippy(document.createElement('div'));
```
You can overwrite its `getBoundingClientRect` method, just like a regular object. Make sure this placeholder element does not get appended to the document though.
## If you were calling `instance.set()` / `tippy.setDefaults()` / accessing `tippy.defaults`
```diff
- instance.set({});
+ instance.setProps({});
```
```diff
- tippy.defaults;
+ tippy.defaultProps;
```
```diff
- tippy.setDefaults({});
+ tippy.setDefaultProps({});
```
## Types
- `Props` is not `Partial` anymore, it's `Required`
- `Options` removed (use `Partial<Props>`)
- `BasicPlacement` renamed to `BasePlacement`
</details>
They recommend a polyfill but I haven’t been able to get that to work. I tried adding this to my application.js file:
window.process = { env: { NODE_ENV: 'development' }}
Still got the same error. Also tried adding an environment variable for NODE_ENV to my bash profile and restarting my rails server, no luck there either.
Thanks in advance!