Package: vulcan-ui-material 1.15.1, example folder and readme.md may be outdated ?

[adalidda]

Hi,

I follow the instruction of the example folder and readme.md to use it with the package example-forum but I got this warning:

W20200614-14:27:57.302(7)? (STDERR) Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20200614-14:27:57.308(7)? (STDERR) in Header

I think that the warning is because the example folder and readme.md may be outdated and are not compatible with Vulcan 1.15.1.

Thank You Adalidda

[eric-burel]

Hi, it could be an occurrence of the bug where Meteor exports an empty object instead of the actual export server side: https://github.com/VulcanJS/Vulcan/issues/2580 Does the page still load client side? What happens in your browser? On which page and example does it happen?

[ErikDakoda]

I can have a look at this and see if the example components need to be updated for MUI 4. I am working on vulcan:ui-material package right now anyway. @eric-burel what do you think about moving all the sample components from vulcan:ui-material to Vulcan-Starter?

[eric-burel]

I think we could split them into a separate package maybe, but still in Vulcan core repo Because you might want to use them in other apps in the future

[adalidda]

It will be great, if we can have a complete example app with material ui in the Vulcan-Starter.

[webface]

@ErikDakoda @eric-burel Im having the same problem trying to follow the material-ui example docs but...

W20210405-10:19:33.051(-4)? (STDERR) Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20210405-10:19:33.052(-4)? (STDERR) in Header W20210405-10:19:33.052(-4)? (STDERR) in WithStyles(Header) W20210405-10:19:33.052(-4)? (STDERR) in div W20210405-10:19:33.052(-4)? (STDERR) in div W20210405-10:19:33.053(-4)? (STDERR) in Layout W20210405-10:19:33.053(-4)? (STDERR) in WithStyles(Layout) W20210405-10:19:33.053(-4)? (STDERR) in Context.Provider W20210405-10:19:33.053(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.053(-4)? (STDERR) in Route W20210405-10:19:33.053(-4)? (STDERR) in RouteWithLayout W20210405-10:19:33.053(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.053(-4)? (STDERR) in Switch W20210405-10:19:33.053(-4)? (STDERR) in div W20210405-10:19:33.053(-4)? (STDERR) in Context.Provider W20210405-10:19:33.053(-4)? (STDERR) in IntlProvider W20210405-10:19:33.054(-4)? (STDERR) in App W20210405-10:19:33.054(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.054(-4)? (STDERR) in withRouter(App) W20210405-10:19:33.054(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-10:19:33.054(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.054(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-10:19:33.054(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.054(-4)? (STDERR) in ApolloConsumer W20210405-10:19:33.054(-4)? (STDERR) in withApollo(withCookies(withRouter(App))) W20210405-10:19:33.054(-4)? (STDERR) in withUpdateUser W20210405-10:19:33.054(-4)? (STDERR) in withLocaleData W20210405-10:19:33.054(-4)? (STDERR) in withSiteData W20210405-10:19:33.055(-4)? (STDERR) in withCurrentUser W20210405-10:19:33.055(-4)? (STDERR) in Context.Provider W20210405-10:19:33.055(-4)? (STDERR) in CookiesProvider W20210405-10:19:33.055(-4)? (STDERR) in Context.Provider W20210405-10:19:33.055(-4)? (STDERR) in Context.Provider W20210405-10:19:33.055(-4)? (STDERR) in Router W20210405-10:19:33.055(-4)? (STDERR) in StaticRouter W20210405-10:19:33.055(-4)? (STDERR) in Context.Provider W20210405-10:19:33.055(-4)? (STDERR) in Context.Consumer W20210405-10:19:33.055(-4)? (STDERR) in ApolloProvider W20210405-10:19:33.055(-4)? (STDERR) in AppGenerator W20210405-10:19:33.055(-4)? (STDERR) in JssCleanup W20210405-10:19:33.055(-4)? (STDERR) in Context.Provider W20210405-10:19:33.056(-4)? (STDERR) in ThemeProvider W20210405-10:19:33.056(-4)? (STDERR) in AppThemeProvider W20210405-10:19:33.056(-4)? (STDERR) in Context.Provider W20210405-10:19:33.056(-4)? (STDERR) in StylesProvider W20210405-10:19:33.056(-4)? (STDERR) in Context.Provider W20210405-10:19:33.056(-4)? (STDERR) Error while server-rendering. date: Mon Apr 05 2021 10:19:33 GMT-0400 (Eastern Daylight Time) url: [object Object] W20210405-10:19:33.056(-4)? (STDERR) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[ErikDakoda]

Hi @webface it works in my localhost. To help you, I would need to know which version of Vulcan, Vulcan-Starter, vulcan:ui-material you are using, and if the following packages/versions are installed:

meteor npm install --save @material-ui/[email protected]
meteor npm install --save @material-ui/[email protected]
meteor npm install --save @material-ui/[email protected]
meteor npm install --save [email protected]
meteor npm install --save [email protected]
meteor npm install --save [email protected]
meteor npm install --save [email protected]
meteor npm install --save [email protected]
meteor npm install --save [email protected]

[webface]

@ErikDakoda Im using those packages @ latest Sorry its a custom app im building. I didnt get what you meant.

`Package.describe({ name: 'music-site', });

Package.onUse(function (api) { api.use([ // Here are our dependencies:

// vulcan core
'promise',
'vulcan:core@=1.16.3',

// vulcan packages
'vulcan:forms@=1.16.3',
'vulcan:accounts@=1.16.3',
'vulcan:ui-material@=1.16.3',

]);

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

// Here is the entry point for client & server: api.mainModule('lib/server/main.js', 'server'); api.mainModule('lib/client/main.js', 'client'); });`

[webface]

I created a home component `import React from 'react'; import { Components, withSingle2, withCurrentUser, registerComponent } from 'meteor/vulcan:core'; import Users from 'meteor/vulcan:users';

const Home =({currentUser})=>{ return <h1>Home</h1> } const options = { collection: Users, fragmentName: 'UsersCurrent', }; Home.displayName="Home"; registerComponent('Home', Home);`

addRoute({ name: 'home', path: '/', componentName: 'Home' });

still get that error. How to add components and where do I put the theme

[webface]

routes.js `import { addRoute, Components } from 'meteor/vulcan:core';

// Then, we add the component for what we want to add. import '../components/layout/Header'; import '../components/layout/Layout'; import '../components/layout/SideNavigation'; import '../components/ui/Home';

// Next, we add the name 'movies', the path, which is the root, and the component name 'MovieList'. addRoute({ name: 'home', path: '/', componentName: 'Home' });`

[webface]

@ErikDakoda i updated the post. I am using the latest vulcan. the 2 repo install and I have now used the material ui version you listed. Still get the same result. Im trying to build a material ui project from scratch

[ErikDakoda]

The sample Header component is so simple - and it only uses other components that are built into @material-ui/[email protected] and [email protected] - so not a lot of things can go wrong if those are installed.

I can't tell you what's going on without seeing all of the code. Is there any way you can share a repository with the code?

[webface]

@ErikDakoda Im sure im doing something simple wrong

https://github.com/webface/vulcan-logic

package music-site I dont even know where to import registerTheme from

[webface]

Ok I figured out to get the theme from here import { registerTheme } from 'meteor/vulcan:ui-material';

[webface]

Renders with 2 warnings Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead. => Meteor server restarted W20210405-18:11:42.988(-4)? (STDERR) Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20210405-18:11:42.992(-4)? (STDERR) in Header

[webface]

@ErikDakoda I shared the link to the repo, if you could help with this, I'd greatly appreciate it

[webface]

This is the second part of the error. It looks like something to do with SSR. req.url resolves to an object in vulcan:lib/lib/server/apollo-ssr/renderPage.js:61:7

Error while server-rendering. date: Mon Apr 05 2021 22:59:37 GMT-0400 (Eastern Daylight Time) url: [object Object] W20210405-22:59:37.893(-4)? (STDERR) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20210405-22:59:37.893(-4)? (STDERR) at ReactDOMServerRenderer.render (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3743:17) W20210405-22:59:37.893(-4)? (STDERR) at ReactDOMServerRenderer.read (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) W20210405-22:59:37.893(-4)? (STDERR) at renderToStaticMarkup (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27) W20210405-22:59:37.894(-4)? (STDERR) at /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:81:21 W20210405-22:59:37.894(-4)? (STDERR) at new Promise (<anonymous>) W20210405-22:59:37.894(-4)? (STDERR) at process (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:79:16) W20210405-22:59:37.894(-4)? (STDERR) at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40 W20210405-22:59:37.895(-4)? (STDERR) => awaited here: W20210405-22:59:37.895(-4)? (STDERR) at Function.Promise.await (/Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/promise_server.js:56:12) W20210405-22:59:37.895(-4)? (STDERR) at packages/vulcan:lib/lib/server/apollo-ssr/renderPage.js:61:7 W20210405-22:59:37.895(-4)? (STDERR) at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40

[webface]

Also when I enable backoffice and view it I. get the same error but also for the SSR and req.url is an object `=> Started proxy.
=> Started MongoDB.
W20210405-23:35:31.317(-4)? (STDERR) Warning: React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead. => Started your app.

=> App running at: http://localhost:3000/ W20210405-23:35:42.324(-4)? (STDERR) Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20210405-23:35:42.325(-4)? (STDERR) in BackofficeNavbar W20210405-23:35:42.325(-4)? (STDERR) in div W20210405-23:35:42.325(-4)? (STDERR) in BackofficePageLayout W20210405-23:35:42.325(-4)? (STDERR) in WithStyles(BackofficePageLayout) W20210405-23:35:42.325(-4)? (STDERR) in Layout W20210405-23:35:42.326(-4)? (STDERR) in withCurrentUser W20210405-23:35:42.326(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.326(-4)? (STDERR) in withRouter(withCurrentUser) W20210405-23:35:42.326(-4)? (STDERR) in Context.Provider W20210405-23:35:42.326(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.326(-4)? (STDERR) in Route W20210405-23:35:42.327(-4)? (STDERR) in RouteWithLayout W20210405-23:35:42.327(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.327(-4)? (STDERR) in Switch W20210405-23:35:42.327(-4)? (STDERR) in div W20210405-23:35:42.327(-4)? (STDERR) in Context.Provider W20210405-23:35:42.327(-4)? (STDERR) in IntlProvider W20210405-23:35:42.327(-4)? (STDERR) in App W20210405-23:35:42.327(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.328(-4)? (STDERR) in withRouter(App) W20210405-23:35:42.328(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-23:35:42.328(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.328(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-23:35:42.328(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.328(-4)? (STDERR) in ApolloConsumer W20210405-23:35:42.328(-4)? (STDERR) in withApollo(withCookies(withRouter(App))) W20210405-23:35:42.328(-4)? (STDERR) in withUpdateUser W20210405-23:35:42.328(-4)? (STDERR) in withLocaleData W20210405-23:35:42.328(-4)? (STDERR) in withSiteData W20210405-23:35:42.329(-4)? (STDERR) in withCurrentUser W20210405-23:35:42.329(-4)? (STDERR) in Context.Provider W20210405-23:35:42.329(-4)? (STDERR) in CookiesProvider W20210405-23:35:42.329(-4)? (STDERR) in Context.Provider W20210405-23:35:42.329(-4)? (STDERR) in Context.Provider W20210405-23:35:42.329(-4)? (STDERR) in Router W20210405-23:35:42.329(-4)? (STDERR) in StaticRouter W20210405-23:35:42.329(-4)? (STDERR) in Context.Provider W20210405-23:35:42.330(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.330(-4)? (STDERR) in ApolloProvider W20210405-23:35:42.330(-4)? (STDERR) in AppGenerator W20210405-23:35:42.330(-4)? (STDERR) in JssCleanup W20210405-23:35:42.330(-4)? (STDERR) in Context.Provider W20210405-23:35:42.330(-4)? (STDERR) in ThemeProvider W20210405-23:35:42.330(-4)? (STDERR) in AppThemeProvider W20210405-23:35:42.330(-4)? (STDERR) in Context.Provider W20210405-23:35:42.330(-4)? (STDERR) in StylesProvider W20210405-23:35:42.331(-4)? (STDERR) in Context.Provider W20210405-23:35:42.331(-4)? (STDERR) Warning: Failed prop type: Material-UI: This elevation 4 is not implemented. W20210405-23:35:42.331(-4)? (STDERR) in ForwardRef(Paper) W20210405-23:35:42.331(-4)? (STDERR) in WithStyles(ForwardRef(Paper)) W20210405-23:35:42.332(-4)? (STDERR) in ForwardRef(AppBar) W20210405-23:35:42.332(-4)? (STDERR) in WithStyles(ForwardRef(AppBar)) W20210405-23:35:42.332(-4)? (STDERR) in BackofficeNavbar W20210405-23:35:42.332(-4)? (STDERR) in div W20210405-23:35:42.332(-4)? (STDERR) in BackofficePageLayout W20210405-23:35:42.332(-4)? (STDERR) in WithStyles(BackofficePageLayout) W20210405-23:35:42.332(-4)? (STDERR) in Layout W20210405-23:35:42.332(-4)? (STDERR) in withCurrentUser W20210405-23:35:42.332(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.333(-4)? (STDERR) in withRouter(withCurrentUser) W20210405-23:35:42.333(-4)? (STDERR) in Context.Provider W20210405-23:35:42.333(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.340(-4)? (STDERR) in Route W20210405-23:35:42.340(-4)? (STDERR) in RouteWithLayout W20210405-23:35:42.340(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.340(-4)? (STDERR) in Switch W20210405-23:35:42.340(-4)? (STDERR) in div W20210405-23:35:42.340(-4)? (STDERR) in Context.Provider W20210405-23:35:42.341(-4)? (STDERR) in IntlProvider W20210405-23:35:42.341(-4)? (STDERR) in App W20210405-23:35:42.341(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.341(-4)? (STDERR) in withRouter(App) W20210405-23:35:42.341(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-23:35:42.341(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.341(-4)? (STDERR) in withCookies(withRouter(App)) W20210405-23:35:42.341(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.341(-4)? (STDERR) in ApolloConsumer W20210405-23:35:42.341(-4)? (STDERR) in withApollo(withCookies(withRouter(App))) W20210405-23:35:42.342(-4)? (STDERR) in withUpdateUser W20210405-23:35:42.342(-4)? (STDERR) in withLocaleData W20210405-23:35:42.342(-4)? (STDERR) in withSiteData W20210405-23:35:42.342(-4)? (STDERR) in withCurrentUser W20210405-23:35:42.342(-4)? (STDERR) in Context.Provider W20210405-23:35:42.342(-4)? (STDERR) in CookiesProvider W20210405-23:35:42.342(-4)? (STDERR) in Context.Provider W20210405-23:35:42.342(-4)? (STDERR) in Context.Provider W20210405-23:35:42.343(-4)? (STDERR) in Router W20210405-23:35:42.343(-4)? (STDERR) in StaticRouter W20210405-23:35:42.343(-4)? (STDERR) in Context.Provider W20210405-23:35:42.343(-4)? (STDERR) in Context.Consumer W20210405-23:35:42.343(-4)? (STDERR) in ApolloProvider W20210405-23:35:42.343(-4)? (STDERR) in AppGenerator W20210405-23:35:42.343(-4)? (STDERR) in JssCleanup W20210405-23:35:42.343(-4)? (STDERR) in Context.Provider W20210405-23:35:42.343(-4)? (STDERR) in ThemeProvider W20210405-23:35:42.343(-4)? (STDERR) in AppThemeProvider W20210405-23:35:42.343(-4)? (STDERR) in Context.Provider W20210405-23:35:42.344(-4)? (STDERR) in StylesProvider W20210405-23:35:42.344(-4)? (STDERR) in Context.Provider W20210405-23:35:42.399(-4)? (STDERR) Error while server-rendering. date: Mon Apr 05 2021 23:35:42 GMT-0400 (Eastern Daylight Time) url: [object Object] W20210405-23:35:42.400(-4)? (STDERR) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. W20210405-23:35:42.400(-4)? (STDERR) at ReactDOMServerRenderer.render (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3743:17) W20210405-23:35:42.400(-4)? (STDERR) at ReactDOMServerRenderer.read (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) W20210405-23:35:42.400(-4)? (STDERR) at renderToStaticMarkup (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27) W20210405-23:35:42.400(-4)? (STDERR) at /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:81:21 W20210405-23:35:42.400(-4)? (STDERR) at new Promise () W20210405-23:35:42.400(-4)? (STDERR) at process (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:79:16) W20210405-23:35:42.401(-4)? (STDERR) at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40 W20210405-23:35:42.401(-4)? (STDERR) => awaited here: W20210405-23:35:42.401(-4)? (STDERR) at Function.Promise.await (/Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/promise_server.js:56:12) W20210405-23:35:42.401(-4)? (STDERR) at packages/vulcan:lib/lib/server/apollo-ssr/renderPage.js:61:7 W20210405-23:35:42.401(-4)? (STDERR) at /Users/webface/.meteor/packages/promise/.0.11.2.1xo9zmy.xljqg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40`

[ErikDakoda]

When I add the following to settings.json everything works:

  "apolloSsr": {
    "disable": true
  }

So this is an issue with SSR. I have had so much frustration with SSR that now I have it turned off. Maybe someone who successfully uses SSR can help you.

[eric-burel]

@webface If you are creating a new application, you might prefer using Vulcan Next instead of the "legacy" Vulcan Meteor project which is less active, and in particular often generating issue during SSR because of Meteor not being able to import some React components server-side (this very issue pushed us to accelerate the transition out of Meteor).

[webface]

@ErikDakoda @eric-burel makes sense. thanks for this. Does Vulcan Next have all the cool packages of Vulcan Meteor? I spent the whole holidays on Vulcan Meteor

[eric-burel]

Most of them for the backend at this point, basically you can reuse Vulcan schemas to spawn a graphql API + mongo collection, and you have React hooks as well like "useMulti". The transition is still ongoing, so you'll lack the SmartForm and Datatable at this point.

[webface]

@eric-burel I'll check it out. Question now is @ErikDakoda does Vulcan Meteor support SSR as long as youre using bootstrap? I can live with that

[ErikDakoda]

I don't have any experience with bootstrap on Vulcan.

[webface]

I tried bootstrap. I had similar errors till I set ssr to true then it worked. Maybe I just needed to set ssr to true for the mat hi also. I'll try after work