search

redux-json-api / react-redux-json-api

Easy redux-json-api data handling for React
6 stars 1 forks source link

Is this in npm? #2

Open aguynamedben opened 3 years ago

aguynamedben commented 3 years ago

Hi, I'm really liking the sister package to this (redux-json-api) and it's saving me from a ton of server-side and client-side boilerplate. Thank you for publishing that project. 🙏

I tried using this as well, putting this in my package.json

    "react-redux-json-api": "redux-json-api/react-redux-json-api#d17c93",

But the import is failing, I believe because getting this from a GitHub checkout leaves the "main": "lib/index.js", file un-built.

Did you ever consider putting this in npm like redux-json-api is?

What's the alternative? Some sort of after yarn install hook in my project's package.json that runs the build commands for react-redux-json-api? I think for some other dependencies I've forked the project just to commit the built files.

Thanks again for making this project available. 🙏 🙏 🙏

aguynamedben commented 3 years ago

Hmm, I forked and built my own version (diff), commenting out /lib in .gitignore, and now getting this error.

image

I know this isn't a broadly used library, but any quick tips on where to go could be helpful! I'm happy to contribute back fixes and improvements.

aguynamedben commented 3 years ago

I tried getting this working in my project a few different ways, but I'm not having any luck. This work attempts were done using my fork of react-redux-json-api, which upgrades to Babel 7, upgrades rollup, etc.

My fork's branch with updates: https://github.com/getcommande/react-redux-json-api/pull/1

Environment

My project is an Electron 11 project, so I'm probably importing using Node 12.8.3. I'm not well-versed on the history of amd, cjs, es, etc. but I think this means my environment would like dependencies such as this library to be built using cjs. However, my project uses ES6, webpack, and babel, so maybe there's a way I can use an 'es' packaged dependency as well. 🤷‍♂️

Here are the things I tried...

Attempt 1: Import while using 'es' in rollup

The build for react-redux-json-api works fine, and my project's webpack build works fine, but then I get a runtime error I'm not sure what to do about.

image

Attempt 2: Import while using 'cjs' in rollup**

// in rollup.config.js
{ file: pkg.browser, format: 'cjs', exports: 'auto' },
// (exports was added because rollup told me to do so)

The build for react-redux-json-api works fine, and my project's webpack build works fine, but then I get a runtime error when navigating to the component that uses Query from this package.

image

I don't understand where in react-redux-json-api's code this error is coming from (invariant?), and my component tree does have at the root level:

  return (
    <HotKeys handlers={HANDLERS} keyMap={hotkeysKeyMap.common} root="true">
      <ErrorBoundary
        placeholder={AppError}
      >
        <Provider store={store}>
          <ConnectedRouter history={history}>
            <Routes />
          </ConnectedRouter>
        </Provider>
      </ErrorBoundary>
    </HotKeys>
  );

Attempt 3: Import directly from /src

My project uses JavaScript + Flow as well, so I tried importing Query directly from /src, i.e. import Query from 'react-redux-json-api/src';. But that produces a webpack build-time error I'm not sure how to address. I upgraded core-js in my own "host" project, but no dice.

image