Unable to get perspective running with Remix.

[Senjai]

Bug Report

Unable to reproduce the basic react example from https://codesandbox.io/s/react-elcg7i?file=/src/Perspective.js:0-1467 in the Remix framework (https://remix.run)

Minimal Reproduction here: https://github.com/Senjai/remix-perspective-issues

Copying over from the readme I wrote on my repro repository

This is a wip reproduction of an issue with getting perspective working within remix. This repo attempts to recreate https://codesandbox.io/s/react-elcg7i?file=/src/Perspective.js in Remix.

Related issues: #2181, #2183. I've looked at the NextJS example as well.

This seems challenging since Remix explicitly doesn't want to open up its compiler so far that I can tell, but importing the perspective library without the fully qualified path (e.g. import "@finos/perspective") seems to attempt to load the node-specific code, which errors out on not being able to find the stoppable module. Either adding stoppable as a dependency, setting the build target to neutral, or loading the fully qualified url "@finos/perspective/dist/esm/perspective.js" triggers errors related to using import/export outside of a module.

I'm a bit stuck. As a last resort of course we could probably pull these files in via CDN or the like instead of using the bunlder, but that seems off.

To reproduce the errors:
yarn install && yarn dev

Error using the qualified path:

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1195:20)
    at Module._compile (node:internal/modules/cjs/loader:1239:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Function.Module._load (node:internal/modules/cjs/loader:972:12)
    at Module.require (node:internal/modules/cjs/loader:1157:19)
    at require (node:internal/modules/helpers:119:18)
    at Object.<anonymous> (/Users/richard/src/remix-perspective/app/components/Perspective.tsx:3:25)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)

Error using the regular import yields the stoppable module not found issue. Adding it as a dependency brings us back to the module issues.

Steps to Reproduce:

Clone https://github.com/Senjai/remix-perspective-issues
run yarn install && yarn dev

On your own:
Install remix: yarn create remix, try to make perspective work.

Expected Result:

A rendered perspective table

Actual Result:

Not being able to kick off the relevant server process on latest version of all packages involved.

Environment:

MacOSX, Dependencies listed here: https://github.com/Senjai/remix-perspective-issues/blob/main/package.json, Node 19.

Additional Context:

I know there's been a few random issues like this but no actual repro, hopefully this helps. I know that this might be a Remix problem, but because I've seen others struggle with something pertinent to this I thought I'd also add it here, such that the context is visible. I've also asked some folks on the remix end as well.

[timkpaine]

I see a lot of es module related stuff on the "gotchas" page https://remix.run/docs/en/main/pages/gotchas#importing-esm-packages

[texodus]

@Senjai Remix is a server-side framework, you're trying to import a module written for the browser (Perspective). I am not a Remix expert but I imagine you're going to need to do something similar to this next.js example which defers loading the perspective libraries until runtime so the server-side react compiler does not try to import them.

[Senjai]

Yeah, this is using dynamic imports though. I can look at trying to sort out the dynamic import situation for Remix.

What I'm struggling with is that there are a number of libraries that have server and browser builds, remix compiles an entrypoint for the browser and the server. It's SSR, yes, but only on initial load, and then switches to client side rendering if supported on the frontend once served.

E.g. React DOM is a browser side library but works for both SSR and non SSR. I'm admittedly a bit newer to the modern build tooling here, I've written my own esbuild pipelines but Remix abstracts a lot of this behind the scenes. I feel like there should be a solution where it works. The error I'm getting is related to import statements being used outside of modules, so it looks like this is primarily a concern with the compilation. RE @timkpaine's comment I have tried working around the ESM gotchas listed there, including bundling the component as recommended there.

I think it's fine if it's not uh.. natively supported. I wanted to actually provide a full reproduction (since I noticed some comments here with frustration that folks did not provide reproductions) and start the conversation so we can create some repo history on it. I'll try to figure out what's what. There's similar issues with D3 remix-run/remix#2686, but hopefully if and when I get this sorted maybe we could provide some docs on it heh.

[texodus]

Your understanding is incorrect, there is no "way" to make this work except as described in my response above.

Re: your ESM compilation error is completely unrelated - it is because you are importing a random file in the perspective source tree @finos/perspective/dist/esm/perspective.js instead of the module itself @finos/perspective, as described in the docs. Please refer to the next.js example.