Impossible to use @tippyjs/react/headless in production.

[maxjnq]

Hey guys,

Here is the faulty file.

import Tippy from '@tippyjs/react/headless'
import { useCallback } from 'react'

import { type TippyProps, type TooltipProps } from './types'

const isMac =
	typeof window !== 'undefined'
		? navigator.platform.toUpperCase().indexOf('MAC') >= 0
		: false

const ShortcutKey = ({ children }: { children: string }): JSX.Element => {
	const className =
		'inline-flex items-center justify-center w-5 h-5 p-1 text-[0.625rem] rounded font-semibold leading-none border border-neutral-200 text-neutral-500 border-b-2'

	if (children === 'Mod') {
		return <kbd className={className}>{isMac ? '⌘' : 'Ctrl'}</kbd> // ⌃
	}

	if (children === 'Shift') {
		return <kbd className={className}>⇧</kbd>
	}

	if (children === 'Alt') {
		return <kbd className={className}>{isMac ? '⌥' : 'Alt'}</kbd>
	}

	return <kbd className={className}>{children}</kbd>
}

export const Tooltip = ({
	children,
	enabled = true,
	title,
	shortcut,
	tippyOptions = {},
}: TooltipProps): JSX.Element => {
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const renderTooltip = useCallback(
		(attrs: TippyProps) => (
			<span
				className="z-[999] flex items-center gap-2 rounded-lg border border-neutral-100 bg-white px-2.5 py-1 shadow-sm"
				tabIndex={-1}
				data-placement={attrs['data-placement']}
				data-reference-hidden={attrs['data-reference-hidden']}
				data-escaped={attrs['data-escaped']}
			>
				{title && (
					<span className="text-xs font-medium text-neutral-500">{title}</span>
				)}
				{shortcut && (
					<span className="flex items-center gap-0.5">
						{shortcut.map(shortcutKey => (
							<ShortcutKey key={shortcutKey}>{shortcutKey}</ShortcutKey>
						))}
					</span>
				)}
			</span>
		),
		[shortcut, title],
	)

	if (enabled) {
		return (
			<Tippy
				delay={500}
				offset={[0, 8]}
				touch={false}
				zIndex={99999}
				appendTo={document.body}
				{...tippyOptions}
				render={renderTooltip}
			>
				<span>{children}</span>
			</Tippy>
		)
	}

	return <>{children}</>
}

export default Tooltip

Locally it all works perfectly but when deploying on fly.io I get this error.

2024-05-06T00:10:26.269 app[d89d97ea6d9768] fra [info] (node:410) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

2024-05-06T00:10:26.269 app[d89d97ea6d9768] fra [info] (Use `node --trace-warnings ...` to show where the warning was created)

2024-05-06T00:10:26.276 app[d89d97ea6d9768] fra [info] SyntaxError: Cannot use import statement outside a module

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] /myapp/node_modules/@tippyjs/react/headless/dist/tippy-react-headless.esm.js:1

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] import tippy, { createSingleton } from 'tippy.js/headless';

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] ^^^^^^

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] SyntaxError: Cannot use import statement outside a module

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at internalCompileFunction (node:internal/vm:128:18)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at wrapSafe (node:internal/modules/cjs/loader:1280:20)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at Module._compile (node:internal/modules/cjs/loader:1332:27)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1427:10)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at Module.load (node:internal/modules/cjs/loader:1206:32)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at Function.Module._load (node:internal/modules/cjs/loader:1022:12)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at cjsLoader (node:internal/modules/esm/translators:366:17)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at ModuleJob.run (node:internal/modules/esm/module_job:222:25)

2024-05-06T00:10:26.277 app[d89d97ea6d9768] fra [info] at ModuleLoader.import (node:internal/modules/esm/loader:3

I then tried both approaches from the Remix doc but no luck.

import { vitePlugin as remix } from '@remix-run/dev'
import { flatRoutes } from 'remix-flat-routes'
import { defineConfig } from 'vite'

const MODE = process.env.NODE_ENV

export default defineConfig({
	ssr: {
		noExternal: ['@tippyjs/react/headless'],
	},
	build: {
		cssMinify: MODE === 'production',
		rollupOptions: {
			external: [/node:.*/, 'stream', 'crypto', 'fsevents'],
		},
	},
	server: {
		cors: false,
	},
	plugins: [
		remix({
			ignoredRouteFiles: ['**/*'],
			serverModuleFormat: 'esm',
			routes: async defineRoutes => {
				return flatRoutes('routes', defineRoutes, {
					ignoredRouteFiles: [
						'.*',
						'**/*.css',
						'**/*.test.{js,jsx,ts,tsx}',
						'**/__*.*',
						// This is for server-side utilities you want to colocate next to
						// your routes without making an additional directory.
						// If you need a route that includes "server" or "client" in the
						// filename, use the escape brackets like: my-route.[server].tsx
						'**/*.server.*',
						'**/*.client.*',
					],
				})
			},
		}),
		// cjsInterop({
		// 	dependencies: ['@tippyjs/react/headless'],
		// }),
	],
})

Any ideas how do I fix that?

Thanks!

[Ian-inein]

I have this problem too

[Ian-inein]

Found a solution
Add @tippyjs/react/headless to external rollupOptions in vite.config.ts
build: { rollupOptions: { external: ['@tippyjs/react/headless'], }, },
now can import in production
import Tippy from '@tippyjs/react';

[Hansenq]

I solved this by ensuring that the file(s) that contains only client code (which eventually imports tippy.js) is only bundled into the client. So I changed MyReactComponent.tsx to MyReactComponent.client.tsx and that fixed the issue.