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

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 this issue Apr 10, 2020 · 2 comments

Comments

@dvliman
Copy link

dvliman commented Apr 10, 2020

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
Copy link

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
Copy link

Hi all. Are there any solutions to this?

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

3 participants