Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FrictionlessJS doesnt seem to work very well with React applications #160

Open
luccasmmg opened this issue Jan 2, 2023 · 0 comments
Open

Comments

@luccasmmg
Copy link

They way that the lib is packaged currently seems to not allow the importing of it inside modern JS/TS Applications, the quickest reproducing example that i can come up with would be the following. Already tested this both with Vite and with NextJS.

Create a starter vite app using this

npm create vite@latest

Then just import frictionless pretty much anywhere. for exemple like this

import { open } from "frictionless.js";

What you get is an error for instance either telling that fs module cant be found in Next or the error below in Vite

Uncaught ReferenceError: Buffer is not defined
    at node_modules/csv-parse/lib/index.js (index.js:17:18)
    at __require2 (chunk-OROXOI2D.js?v=6209617b:16:50)
    at node_modules/frictionless.js/dist/node/parser/csv.js (csv.js:11:40)
    at __require2 (chunk-OROXOI2D.js?v=6209617b:16:50)
    at node_modules/frictionless.js/dist/node/data.js (data.js:21:12)
    at __require2 (chunk-OROXOI2D.js?v=6209617b:16:50)
    at node_modules/frictionless.js/dist/node/index.js (index.js:91:13)
    at __require2 (chunk-OROXOI2D.js?v=6209617b:16:50)
    at index.js:107:13

Which is actually ok given that the documentation mentions the fact that by default what we get is a server bundle, so lets say i import the browser bundle directly with something like this

import { open } from "frictionless.js/dist/browser/bundle";

Then what i get is something like this on Vite

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/frictionless__js_dist_browser_bundle.js?v=6209617b' does not provide an export named 'default' (at App.jsx:4:1)

Or like this on NextJS

error - Error: unable to locate global object
    at /home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:16:99287
    at Object.<anonymous> (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:16:99331)
    at r (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:1:118)
    at Object.<anonymous> (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:8:22432)
    at Object.<anonymous> (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:8:25836)
    at r (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:1:118)
    at Module.<anonymous> (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:38:34758)
    at r (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:1:118)
    at /home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:1:917
    at Object.<anonymous> (/home/luccasmateus/Projects/datahub-publisher/node_modules/frictionless.js/dist/browser/bundle.js:1:928) {
  page: '/'
}

I believe that the actual problem is that the browser version is just not bundled as an ES Module, havent actually tested with other frameworks(Vue, Svelte etc) but i believe that the results would be similar

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant