VulcanJS / Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
http://vulcanjs.org
MIT License
7.98k stars 1.88k forks source link

Vulcan:admin is not working #2221

Open enzolutions opened 5 years ago

enzolutions commented 5 years ago

I have been trying to test vulcan:admin version 1.12.17 without not much success.

After added in my .meteor/packages with

vulcan:admin

And inside my package lib with

Package.onUse((api) => {
  api.use([
    'vulcan:core',
    'vulcan:accounts',
    'vulcan:admin',
    'vulcan:forms',
    'vulcan:ui-bootstrap',
    'vulcan:debug',
    'service-configuration',
    'next-town:model',
    // SASS/SCSS support
    'fourseven:scss@4.5.10',
  ]);

  api.addFiles('lib/stylesheets/style.scss');

  api.mainModule('lib/server/main.js', 'server');
  api.mainModule('lib/client/main.js', 'client');
});

When I try to access http://localhost:3500/admin/ i got the following error in client and server side

modules.js?hash=20fbbc54f76cd46c7b36c403eaff59c4b61219bb:14419 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoadableComponent`.
    in LoadableComponent (created by component)
    in component (created by RouterContext)
    in Dummy (created by App)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by withCookies(Component))
    in withCookies(Component) (created by withApollo(withCookies(Component)))
    in withApollo(withCookies(Component)) (created by withUpdateUser(withApollo(withCookies(Component))))
    in withUpdateUser(withApollo(withCookies(Component))) (created by withSiteData(withUpdateUser(withApollo(withCookies(Component)))))
    in withSiteData(withUpdateUser(withApollo(withCookies(Component)))) (created by withCurrentUser(withSiteData(withUpdateUser(withApollo(withCookies(Component))))))
    in withCurrentUser(withSiteData(withUpdateUser(withApollo(withCookies(Component))))) (created by RouterContext)
    in RouterContext (created by Router)
    in ScrollBehaviorContext (created by Router)
    in Router
    in CookiesProvider
    in QueryRecyclerProvider (created by ApolloProvider)
    in ApolloProvider

FYI vulcan:forms are working like a charm and using vulcan:debug the route /admin is registered but /admin/users is not. despide in code is registered https://github.com/VulcanJS/Vulcan/blob/devel/packages/vulcan-admin/lib/modules/routes.js#L10

As you can see in the following image,

screen shot 2019-03-03 at 10 51 44 am

I am not trying to overwrite admin or anything just trying to use to avoid to code by self :P. any recommendations.

justinr1234 commented 5 years ago

@enzolutions try upgrading react-lodable to ^5 - https://github.com/jamiebuilds/react-loadable/tree/master

enzolutions commented 5 years ago

@justinr1234 Thanks for your commendation , here my testing .

I am running vulcan:admin version 1.6.1. Before I had react-loadable@4.0.5 and then I update the version using the following command.

 npm install --save react-loadable@5^

Then I ended up with react-loadable@5.5.0

Before I have the version.

But is almost the same, I have this error in server side.

W20190303-14:23:51.798(11)? (STDERR) getDynamicComponent is deprecated, use renderDynamicComponent instead. If you want to retrieve the component instead that of just rendering it, use dynamicLoader. See this issue to know how to do it: https://github.com/VulcanJS/Vulcan/issues/1997
W20190303-14:23:51.833(11)? (STDERR) getDynamicComponent is deprecated, use renderDynamicComponent instead. If you want to retrieve the component instead that of just rendering it, use dynamicLoader. See this issue to know how to do it: https://github.com/VulcanJS/Vulcan/issues/1997
W20190303-14:23:51.842(11)? (STDERR) Warning: setState(...): Can only update a mounting component. This usually means you called setState() outside componentWillMount() on the server. This is a no-op.
W20190303-14:23:51.843(11)? (STDERR)
W20190303-14:23:51.843(11)? (STDERR) Please check the code for the LoadableComponent component.
W20190303-14:24:10.254(11)? (STDERR) getDynamicComponent is deprecated, use renderDynamicComponent instead. If you want to retrieve the component instead that of just rendering it, use dynamicLoader. See this issue to know how to do it: https://github.com/VulcanJS/Vulcan/issues/1997
W20190303-14:24:10.269(11)? (STDERR) getDynamicComponent is deprecated, use renderDynamicComponent instead. If you want to retrieve the component instead that of just rendering it, use dynamicLoader. See this issue to know how to do it: https://github.com/VulcanJS/Vulcan/issues/1997

And this error in client side

modules.js?hash=421382aeb90e509a5d6ab5cfa9c840d0ce18a521:14419 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoadableComponent`.
    in LoadableComponent (created by component)
    in component (created by RouterContext)
    in Dummy (created by App)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by withCookies(Component))
    in withCookies(Component) (created by withApollo(withCookies(Component)))
    in withApollo(withCookies(Component)) (created by withUpdateUser(withApollo(withCookies(Component))))
    in withUpdateUser(withApollo(withCookies(Component))) (created by withSiteData(withUpdateUser(withApollo(withCookies(Component)))))
    in withSiteData(withUpdateUser(withApollo(withCookies(Component)))) (created by withCurrentUser(withSiteData(withUpdateUser(withApollo(withCookies(Component))))))
    in withCurrentUser(withSiteData(withUpdateUser(withApollo(withCookies(Component))))) (created by RouterContext)
    in RouterContext (created by Router)
    in ScrollBehaviorContext (created by Router)
    in Router
    in CookiesProvider
    in QueryRecyclerProvider (created by ApolloProvider)
    in ApolloProvider

@SachaG recommned to me to create my own admin version of users using Datatable component, so I register a new route and a custom component to solve that issue.

import React, { Component } from 'react';
import { registerComponent, Components, withList, withCurrentUser, AdminColumns, Loading } from 'meteor/vulcan:core';
import Users from 'meteor/vulcan:users';
import { FormattedMessage } from 'meteor/vulcan:i18n';

class AdminUsers extends Component {

    constructor(props) {
        super(props);

        this.redirect = this.redirect.bind(this);
    }

    redirect() {
    }

    render () {
        let {currentUser} = this.props;

        return (
            (currentUser) ?
                <div className="splash">
                    <Components.ShowIf check={Users.isAdmin} document={currentUser} failureComponent={<p className="admin-home-message"><FormattedMessage id="app.noPermission" /></p>}>
                        <Components.Datatable
                            collection={Users}
                            columns={["username", "email"]}
                            options={{
                                fragmentName: 'UsersAdmin',
                                terms: {view: 'usersAdmin'},
                                limit: 20
                            }}
                            showEdit={true}
                        />
                    </Components.ShowIf>
                </div>
            :<Components.AccountsLoginForm redirect={false} />
        );
  };
}

registerComponent({name:'AdminUsers', component:AdminUsers, hocs: [withCurrentUser]});

export default AdminUsers;