frictionless-js icon indicating copy to clipboard operation
frictionless-js copied to clipboard

FrictionlessJS doesnt seem to work very well with React applications

Open luccasmmg opened this issue 2 years ago • 0 comments

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

luccasmmg avatar Jan 02 '23 12:01 luccasmmg