`.default is not a function` with Remix app & various bundlers: bun & vite/ rollup

[reillyjodonnell]

When running in a remix app with bun I see this error:

TypeError: (0 , import_react_use_websocket.default) is not a function

To make sure this wasn't a bun issue I created a new remix app with npm via:

npx create-remix@latest then ran npm i react-use-websocket and imported it in a component by updating app/routes/_index.tsx to :

import type { MetaFunction } from '@remix-run/node';
import useWebSocket from 'react-use-websocket';

export const meta: MetaFunction = () => {
  return [
    { title: 'New Remix App' },
    { name: 'description', content: 'Welcome to Remix!' },
  ];
};


export default function Index() {

  const {} = useWebSocket('ws://localhost:3000/ws');
  return (
    <div className="font-sans p-4">
      <h1 className="text-3xl">Welcome to Remix</h1>
      <ul className="list-disc mt-4 pl-6 space-y-2">
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/start/quickstart"
            rel="noreferrer"
          >
            5m Quick Start
          </a>
        </li>
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/start/tutorial"
            rel="noreferrer"
          >
            30m Tutorial
          </a>
        </li>
        <li>
          <a
            className="text-blue-700 underline visited:text-purple-900"
            target="_blank"
            href="https://remix.run/docs"
            rel="noreferrer"
          >
            Remix Docs
          </a>
        </li>
      </ul>
    </div>
  );
}

and get the following error when running via npm run dev:

TypeError: __vite_ssr_import_1__.default is not a function
    at Index (/Users/reilly/trash/app/routes/_index.tsx:12:14)
    at renderWithHooks (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderContextProvider (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5997:3)
    at renderElement (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6094:11)
    at renderNodeDestructiveImpl (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
TypeError: __vite_ssr_import_1__.default is not a function
    at Index (/Users/reilly/trash/app/routes/_index.tsx:12:14)
    at renderWithHooks (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5798:15)
    at renderElement (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6023:7)
    at renderNodeDestructiveImpl (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)
    at renderContextProvider (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:5997:3)
    at renderElement (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6094:11)
    at renderNodeDestructiveImpl (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6181:11)
    at renderNodeDestructive (/Users/reilly/trash/node_modules/react-dom/cjs/react-dom-server.node.development.js:6153:14)

The basic remix example doesn't work with any of the major 4 package managers: npm, yarn, pnpm, and bun.

[uplusion23]

Same issue here, using a new Vite / React app

[parisholley]

for the latest version 4.13.0 as of this writing, you can work around by loading the TS source directly:

import { useWebSocket } from 'react-use-websocket/src/lib/use-websocket';

@robtaussig should probably reopen for now

[jikyu]

@robtaussig any plans to make this library into ESM?