na2hiro / namespaced-fieldset

A tiny React utils which gives uncontrolled `<input>` elements a power of namespaces, and allows constructing complex objects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Importing `Fieldset` throws module-related error

brandonpittman opened this issue · comments

Tried importing Fieldset in a work project and a fresh Stackblitz and got the following error:

/app/node_modules/namespaced-fieldset/dist/index.cjs:1
import e,{createContext as t,Fragment as r,useContext as n}from"react";import a from"qs";function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},c.apply(this,arguments)}const o=["namespace"],l=t("");function s(e){if(void 0===e)return;const t=n(l);return t?`${t}.${e}`:e}const i=t=>r=>{let{namespace:n}=r,a=function(e,t){if(null==e)return{};var r,n,a={},c=Object.keys(e);for(n=0;n<c.length;n++)t.indexOf(r=c[n])>=0||(a[r]=e[r]);return a}(r,o);const i=s(n);return e.createElement(l.Provider,{value:i},e.createElement(t,c({},a)))},m=i(t=>e.createElement("fieldset",c({},t)));m.Headless=i(r);const u=t=>r=>{const n=s(r.name);return e.createElement(t,c({},r,{name:n}))},f=u(t=>e.createElement("input",c({},t))),p=u(t=>e.createElement("button",c({},t))),E=u(t=>e.createElement("select",c({},t))),v=u(t=>e.createElement("textarea",c({},t))),d=e=>a.parse(e,{allowDots:!0,depth:1e3}),h=e=>{const t=new URLSearchParams(e);return d(t.toString())};export{p as Button,m as Fieldset,f as Input,E as Select,v as Textarea,h as constructFromFormData,d as constructFromQueryString,u as namespaceAware};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/app/app/lib/tenant.ts:3:55)
    at Module._compile (node:internal/modules/cjs/loader:1103:14)

Hi, thanks for reporting the issue. I tried with StackBlitz and I couldn't reproduce it. It's forked from React TypeScript template, available on the home page.

https://stackblitz.com/edit/react-ts-rkcz1d?file=index.tsx

Could you provide the blitz link? I'd like to know your use case.

@na2hiro Figured it out. You have to add it to be bundled in the Remix config. It would be helpful if there was a reminded about that in the README. 😄

Cool! Thanks for the suggestion, I added about it in the README 300f57c