Bug: "Directory import is not supported"

[fernandocanizo]

Description

Followed the installation steps and tried the basic example from the Getting Started page on a Remix application and got this importing issue upon start:

Error: Directory import '/tmp/test-react-tables/node_modules/@table-library/react-table-library/compact' is not supported resolving ES modules imported from /tmp/test-react-tables/build/index.js
Did you mean to import @[email protected]_@[email protected][email protected][email protected]/node_modules/@table-library/react-table-library/compact.js?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36)

Versions

• "@table-library/react-table-library": "^4.1.7"
• "react": "^18.2.0",
• "react-dom": "^18.2.0"
• "@emotion/react": "^11.11.3"

Steps to reproduce

pnpx create-remix test-react-tables # answer "yes" to all the questions
cd test-react-tables
pnpm install @table-library/react-table-library @emotion/react

Then edit app/routes/_index.tsx and replace the sample code on the file with the example code from react-tables documentation, here's a brief adaptation:

// app/routes/_index.tsx

import { CompactTable } from '@table-library/react-table-library/compact';

type Item = {
  id: string
  name: string
  deadline: Date
  type: string
  isComplete: boolean
  nodes: number
}

export default function Index() {
  const nodes: Item[] = [
    {
      id: '0',
      name: 'Shopping List',
      deadline: new Date(2020, 1, 15),
      type: 'TASK',
      isComplete: true,
      nodes: 3,
    },
  ];

  const columns = [
    { label: 'Task', renderCell: (item: Item) => item.name },
    {
      label: 'Deadline',
      renderCell: (item: Item) =>
        item.deadline.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }),
    },
    { label: 'Type', renderCell: (item: Item) => item.type },
    {
      label: 'Complete',
      renderCell: (item: Item) => item.isComplete.toString(),
    },
    { label: 'Tasks', renderCell: (item: Item) => item.nodes },
  ];

  return (
    <CompactTable columns={columns} data={nodes} />
  );
}

Then start your server: pnpm dev and you'll immediately see the server crashing with the error from the beginning.

I tried changing the import to import { CompactTable } from '@table-library/react-table-library/compact.js' notice the ".js" added, and then the server started ok this time, but as you request the first page, you get a more obscure error:

TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at nonIterableSpread (file:///tmp/test-react-tables/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]/node_modules/@table-library/node_modules/@babel/runtime/helpers/nonIterableSpread.js:2:9)
[... more stack trace]