FusionWorks / react-admin-s3-file-upload

21 stars 10 forks source link

run into: Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(t)". #4

Open dvliman opened 4 years ago

dvliman commented 4 years ago

First of all, thank you for looking into this. This might not an appropriate place to ask the question but appreciate any pointer!

So I run into this:

Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(t)".

which is pretty much the example in the README:

import React from 'react';
import ReactDOM from 'react-dom';
import {Admin, Create, ListGuesser, Resource, SimpleForm} from 'react-admin';
import jsonServerProvider from 'ra-data-json-server';

import {S3FileInput} from "@fusionworks/ra-s3-input";

export const PostCreate = props => (
    <Create {...props}>
        <SimpleForm>
            <S3FileInput
                apiRoot="localhost:8080/api"
                source="image_url"
                uploadOptions={{
                    signingUrl: "localhost:8080/api/image/sign",
                    s3Path: "/images/",
                    multiple: true,
                    accept: "image/*",
                }}
                fileCoverImg=""
            />
        </SimpleForm>
    </Create>
);

const App = () => (
    <Admin
        dataProvider={jsonServerProvider('https://jsonplaceholder.typicode.com')}>
        <Resource
            name="posts"
            create={PostCreate}
            list={ListGuesser}
        />
    </Admin>
);

ReactDOM.render(<App />, document.getElementById('root'));

And the version I am using. Note: I ran yarn upgrade --latest; originally it didn't work without upgrading to the latest (transitive?) dependencies:

{
  "name": "admin",
  "version": "0.1.0",
  "private": true,
  "homepage": "/admin",
  "dependencies": {
    "@fusionworks/ra-s3-input": "^0.1.4",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/react": "^10.0.2",
    "@testing-library/user-event": "^10.0.1",
    "prop-types": "^15.7.2",
    "ra-data-json-server": "^3.3.1",
    "ra-input-rich-text": "^3.3.1",
    "react": "^16.13.0",
    "react-admin": "^3.3.1",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "NODE_ENV=development react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

I don't know much about react/redux but here are my debugging notes (if it helps):

https://github.com/FusionWorks/nestjs-crud-react-admin-boilerplate/blob/b26813c52efb78079042d935bf087f7557987347/admin-ui/src/Companies/index.js#L24 this example calls it just like what I am doing here

https://stackoverflow.com/questions/47652627/either-wrap-the-root-component-in-a-provider-or-explicitly-pass-store-as-a/47654352 this wraps with <Provider store={store}> but what store? no mention that @fusionworks/ra-s3-input needs (redux?) store?

Another observation:

  1. RichTextInput: https://github.com/marmelab/react-admin/blob/master/packages/ra-input-rich-text/src/index.tsx#L48
  2. TextInput: https://github.com/marmelab/react-admin/blob/6eddff990f34d57e0abe6f2fa721567d50c644fd/packages/ra-ui-materialui/src/input/TextInput.tsx#L27 it extends from FunctionComponent

But FileUploader is just a component: https://github.com/FusionWorks/react-admin-s3-file-upload/blob/master/src/index.js#L11 tried downgrading react-admin to 2.9.2 (in admin/package.json); does not work complain about RichTextInput (replaced to TextInput) then complain about this:

  ./node_modules/ra-data-json-server/node_modules/ra-core/esm/core/CoreAdminContext.js
   Attempted import error: 'ReactReduxContext' is not exported from 'react-redux'.

this is most likely to be the case; ra-s3-input is written for an older version of react-admin

/Users/dv/dashy/admin/node_modules/@fusionworks/ra-s3-input
   "ra-core": "^2.9.2",

question: how to turn Component into FunctionalComponent?

const S3FieldInputFunctional = props => <S3FileInput {...props}/>;

https://github.com/mayteio/ra-aws-amplify/tree/23c58023fe3952a19344cb459c1eaafbbcdfe409/src/inputs this is another implementation that upload to s3 as well; but you need to define schema (see required schema section) this implements the functional component

I tried something like this:

const WrapperS3FileInput = props => {
    return (
        <S3FileInput {...props}></S3FileInput>
    )
};

or this <S3FileInput {....props}

but how does this work? https://github.com/PavelZX/React-Nest-blog/blob/337d5a8f085781824487fda795c16925c445e9c8/frontend/src/Company/index.js#L30 he uses react-admin ^3.2.0 and ra-s3-input ^0.1.4 (which is greater than ^2.9.2) this project run into some error when I try to set it up - didn't attempt to debug to get it to run

raphaelsoul commented 3 years ago

Same issue here with @fusionworks/ra-s3-input@0.1.6 react-admin@3.9.4

yarn list ra-core ├─ @fusionworks/ra-s3-input@0.1.6 │ └─ ra-core@2.9.9 └─ ra-core@3.9.4

seems to be ra-core mismatches?

JazzShapka commented 3 years ago

Hi all. Are there any solutions to this?