Skip to content
This repository has been archived by the owner on May 31, 2024. It is now read-only.

Relations hasMany bug. #2709

Closed
webface opened this issue Apr 9, 2021 · 12 comments
Closed

Relations hasMany bug. #2709

webface opened this issue Apr 9, 2021 · 12 comments

Comments

@webface
Copy link

webface commented Apr 9, 2021

Describe the bug
After completing the get started tutorial, I decided to build a more involved example where I have a collection related to another collection. I created an Albums and a Genres Schema. I can crud the albums till I try to define the related field then the collection it cant find genres of undefined.

genresIds: {
    type: Array,
    arrayItem: {
      type: String,
      optional: true,
      canRead: ['guests'],
    },
    optional: true,
    canRead: ['guests'],
    relation: {
      fieldName: 'genres',
      typeName: '[Genre]',
      kind: 'hasMany'
    }
  },```
 
I try an example from the examples 






genresIds: makeAutocomplete(
{
type: Array,
arrayItem: {
type: String,
optional: true,
},
label: "Genres",
optional: true,
canCreate: ["members"],
canUpdate: ["owners", "admins"],
canRead: ["guests"],
relation: {
fieldName: "genresIds",
typeName: "[Genre]",
kind: "hasMany",
},
order: 5,
description: "You can pick up to three genres.",
},
{ autocompletePropertyName: "name" }
),

Error: Could not find collection for type "Genre". Registered types: User, Email, Setting, Callback
at getCollectionByTypeName (packages/vulcan:lib/lib/modules/collections.js:42:11)
at getQueryResolverName (packages/vulcan:core/lib/modules/decorators/autocomplete.js:8:24)
at makeAutocomplete (packages/vulcan:core/lib/modules/decorators/autocomplete.js:34:58)
at module (packages/music-site/lib/modules/albums/schema.js:81:14)
```

removed node modules and reinstall and have to install bcrypt...now vulcan crashes and wont run anymore

yarn run v1.22.10
$ node .vulcan/prestart_vulcan.js
 ___    ___ 
 \\\\  ////
  \\\\////    Vulcan.js
   \\\///    The full-stack React+GraphQL framework
    ────     
>  Happy hacking with Vulcan!
>  The docs are available at: http://docs.vulcanjs.org
$ meteor --settings settings.json
[[[[[ /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan ]]]]]

=> Started proxy.                             
=> Started MongoDB.                           
/Users/webface/.meteor/packages/static-html/.1.2.2.letkrn.3s4a++os+web.browser+web.cordova/plugin.compileStaticHtmlBatch.os/npm/node_modules/meteor/promise/node_modules/meteor-promise/promise_server.js:190
      throw error;
      ^

Error: Broken symbolic link encountered at /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/.bin/node-which
    at isWithinProdPackage (/tools/isobuild/bundler.js:497:19)
    at /tools/isobuild/builder.js:724:15
    at Array.forEach (<anonymous>)
    at walk (/tools/isobuild/builder.js:656:34)
    at /tools/isobuild/builder.js:734:11
    at Array.forEach (<anonymous>)
    at walk (/tools/isobuild/builder.js:656:34)
    at Builder._copyDirectory (/tools/isobuild/builder.js:788:5)
    at Builder.copyNodeModulesDirectory (/tools/isobuild/builder.js:550:17)
    at /tools/isobuild/bundler.js:2522:17
    at Function._.each._.forEach (/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:191:9)
    at JsImage.write (/tools/isobuild/bundler.js:2479:7)
    at ServerTarget.write (/tools/isobuild/bundler.js:2734:13)
    at /tools/isobuild/bundler.js:2901:30
    at /tools/isobuild/bundler.js:3040:11
    at Array.forEach (<anonymous>)
    at /tools/isobuild/bundler.js:3035:26
    at /tools/isobuild/bundler.js:3401:22
    at Object.capture (/tools/utils/buildmessage.js:283:5)
    at bundle (/tools/isobuild/bundler.js:3214:31)
    at /tools/isobuild/bundler.js:3157:32
    at Slot.withValue (/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/@wry/context/lib/context.js:73:29)
    at Object.withCache (/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/fs/tools/fs/files.ts:1663:39)
    at Object.bundle (/tools/isobuild/bundler.js:3157:16)
    at /tools/runners/run-app.js:581:24
    at Function.run (/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/tool-env/tools/tool-env/profile.ts:289:14)
    at bundleApp (/tools/runners/run-app.js:580:34)
    at AppRunner._runOnce (/tools/runners/run-app.js:627:35)
    at AppRunner._fiber (/tools/runners/run-app.js:948:28)
    at /tools/runners/run-app.js:410:12
error Command failed with exit code 1.

Mac OSX Big Sur

Node 14

Meteor 2.1

@webface
Copy link
Author

webface commented Apr 9, 2021

removed nodes modules and reinstalled with npm... too many broken dependencies for it to run
removed node_modules and yarn installed. Back at square one

Your app is crashing. Here's the latest log:
(node:70528) [DEP0131] DeprecationWarning: The legacy HTTP parser is deprecated.
/Users/webface/.meteor/packages/meteor-tool/.2.1.1.1tw9rit.a722++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:280
						throw(ex);
						^

Error: Could not find collection for type “Genre”. Registered types: User, Email, Setting, Callback
    at getCollectionByTypeName (packages/vulcan:lib/lib/modules/collections.js:42:11)
    at getQueryResolverName (packages/vulcan:core/lib/modules/decorators/autocomplete.js:8:24)
    at makeAutocomplete (packages/vulcan:core/lib/modules/decorators/autocomplete.js:34:58)
    at module (packages/music-site/lib/modules/albums/schema.js:81:14)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/albums/collection.js:1:153)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/albums/index.js:1:38)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/modules/index.js:1:8)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
    at Module.moduleLink [as link] (/Users/webface/.meteor/packages/modules/.0.16.0.hebza9.gspxj++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/reify/lib/runtime/index.js:52:22)
    at module (packages/music-site/lib/server/main.js:1:8)
    at fileEvaluate (packages/modules-runtime.js:336:7)
    at Module.require (packages/modules-runtime.js:238:14)
Exited with code: 1
Your application is crashing. Waiting for file change.

@eric-burel
Copy link
Contributor

Hi, why your Meteor app is located into MAMP?
Anyway here the "Genre" collection doesn't seem to exist. You've shown the "Albums" schema but what about "Genre"?

@eric-burel
Copy link
Contributor

Closing because it's more an issue in your app than a bug but we can keep discussing

@webface
Copy link
Author

webface commented Apr 9, 2021

@eric-burel AlbumSchema.js

import Users from "meteor/vulcan:users";
import { Utils, makeAutocomplete } from "meteor/vulcan:core";
/*

modules/movies/schema.js - #tutorial-step-10 -
This is a JS object that defines every property of a collection document...

A SimpleSchema-compatible JSON schema

*/
export const schema = {
  // default properties

  _id: {
    type: String,
    optional: true,
    canRead: ['guests'],
  },
  createdAt: {
    type: Date,
    optional: true,
    canRead: ['guests'],
    onCreate: () => {
      return new Date();
    },
  },
  userId: {
    type: String,
    optional: true,
    canRead: ['guests'],
    resolveAs: {
      fieldName: 'user',
      type: 'User',
      relation: 'hasOne',
    },
  },

  // custom properties

  name: {
    label: 'Name',
    type: String,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },

  releaseDate: {
    label: 'Release Date',
    type: Date,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },
  downloads: {
    label: 'Downloads',
    type: Number,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
  },
  // genresIds: {
  //   type: Array,
  //   arrayItem: {
  //     type: String,
  //     optional: true,
  //     canRead: ['guests'],
  //   },
  //   optional: true,
  //   canRead: ['guests'],
  //   relation: {
  //     fieldName: 'genres',
  //     typeName: '[Genre]',
  //     kind: 'hasMany'
  //   }
  // }, // this block cant read genres of undefined

  genresIds: makeAutocomplete( //This block crashes app (Error: Could not find collection for type “Genre”. Registered types: User, Email, Setting, Callback)
    {
      type: Array,
      arrayItem: {
        type: String,
        optional: true,
      },
      label: "Genres",
      optional: true,
      canCreate: ["members"],
      canUpdate: ["owners", "admins"],
      canRead: ["guests"],
      relation: {
        fieldName: "genresIds",
        typeName: "[Genre]",
        kind: "hasMany",
      },
      order: 5,
      description: "You can pick up to three genres.",
    },
    { autocompletePropertyName: "name" }
  ),
  
};


GenresSchema.js

export const schema = {
  // default properties

  _id: {
    type: String,
    optional: true,
    canRead: ['guests'],
  },
   // custom properties

  name: {
    label: 'Name',
    type: String,
    optional: true,
    canRead: ['guests'],
    canCreate: ['members'],
    canUpdate: ['members'],
    searchable: true,
  },

};

My PROJECTS are in MAMP folder cos I used to develop LAMP and never bothered to relocate my projects on my computer when I started MERN.

Also I have Fragments defined.

import { registerFragment } from 'meteor/vulcan:core';

registerFragment(`
  fragment GenreFragment on Genre {
    _id
    name
  }
`);

registerFragment(/* GraphQL */`
  fragment AlbumItem on Album {
    # posts
    _id
    name
    
    createdAt
    releaseDate
    downloads
    genresIds
    }
`);

registerFragment(/* GraphQL */`
  fragment AlbumPage on Album {
    ...AlbumItem
  }
`);

As you can see I have the collections defined

@webface
Copy link
Author

webface commented Apr 9, 2021

@eric-burel beat my head on this all night. I have attached the repo if you want to take a peek. https://github.com/webface/vulcan-logic

I tried to follow patterns in https://github.com/SachaG/SidebarVulcan/blob/master/packages/sidebar2020/lib/modules/posts/schema.js for lack of better examples but no dice.

@eric-burel
Copy link
Contributor

I I can't run it, I am not on mly Linux, but can you try reverse the lines here: https://github1s.com/webface/vulcan-logic/blob/HEAD/packages/music-site/lib/modules/index.js?
Album is loaded before Genre maybe that's the issue

@webface
Copy link
Author

webface commented Apr 9, 2021

@eric-burel I tried that

export * from './genres';
export * from './songs';
export * from './albums';

// Routes
export * from './routes.js';

now I just get a consistent error but the crashing stopped

Error while server-rendering. date: Fri Apr 09 2021 09:03:25 GMT-0400 (Eastern Daylight Time) url: [object Object]
W20210409-09:03:25.088(-4)? (STDERR) TypeError: Cannot read property 'genres' of undefined
W20210409-09:03:25.088(-4)? (STDERR)     at CardItemSwitcher (packages/vulcan:core/lib/modules/components/Card/CardItemSwitcher.jsx:53:41)
W20210409-09:03:25.089(-4)? (STDERR)     at processChild (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3043:14)
W20210409-09:03:25.089(-4)? (STDERR)     at resolve (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
W20210409-09:03:25.089(-4)? (STDERR)     at ReactDOMServerRenderer.render (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
W20210409-09:03:25.089(-4)? (STDERR)     at ReactDOMServerRenderer.read (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
W20210409-09:03:25.089(-4)? (STDERR)     at renderToStaticMarkup (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/react-dom/cjs/react-dom-server.node.development.js:4004:27)
W20210409-09:03:25.089(-4)? (STDERR)     at /Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:85:21
W20210409-09:03:25.089(-4)? (STDERR)     at new Promise (<anonymous>)
W20210409-09:03:25.090(-4)? (STDERR)     at process (/Applications/MAMP/htdocs/PROJECTS2021/meteor-vulcan/node_modules/@apollo/client/react/ssr/ssr.cjs.js:83:16)
W20210409-09:03:25.090(-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
W20210409-09:03:25.090(-4)? (STDERR)  => awaited here:
W20210409-09:03:25.090(-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)
W20210409-09:03:25.090(-4)? (STDERR)     at packages/vulcan:lib/lib/server/apollo-ssr/renderPage.js:61:7
W20210409-09:03:25.090(-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

@eric-burel
Copy link
Contributor

Seems like an empty document or whatever, you need to dig that but it seems that the graphql API built ok.
Note that we try to deprecate the pattern based on strings to avoid such issues in the future, so you don't accidentally reference stuffs that you didn't import yet.

@webface
Copy link
Author

webface commented Apr 9, 2021

Could be something missing on the server setup. Here is the console.log from localhost:3000/albums

modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614 Warning: Expected server HTML to contain a matching <div> in <div>.
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main
printWarning @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614
error @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98586
warnForInsertedHydratedElement @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:105129
didNotFindHydratableContainerInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:106319
insertNonHydratedInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115008
tryToClaimNextHydratableInstance @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115117
updateHostComponent @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:115795
beginWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117153
beginWork$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121705
performUnitOfWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680
workLoopSync @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120282
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
CardItemSwitcher.jsx:53 Uncaught TypeError: Cannot read property 'genres' of undefined
    at CardItemSwitcher (CardItemSwitcher.jsx:53)
    at renderWithHooks (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:113329)
    at mountIndeterminateComponent (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:116008)
    at beginWork (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117122)
    at HTMLUnknownElement.callCallback (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714)
    at Object.invokeGuardedCallbackDev (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763)
    at invokeGuardedCallback (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818)
    at beginWork$1 (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121729)
    at performUnitOfWork (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680)
    at workLoopSync (modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656)
CardItemSwitcher @ CardItemSwitcher.jsx:53
renderWithHooks @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:113329
mountIndeterminateComponent @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:116008
beginWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:117122
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714
invokeGuardedCallbackDev @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763
invokeGuardedCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818
beginWork$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121729
performUnitOfWork @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120680
workLoopSync @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120656
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120282
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: DateTime
printWarning @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98614
warn @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98577
ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109903
flushRenderPhaseStrictModeWarningsInDEV @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121638
commitRootImpl @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120922
unstable_runWithPriority @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:124268
runWithPriority$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109565
commitRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120907
finishSyncRender @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120333
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120319
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118053 The above error occurred in the <CardItemSwitcher> component:
    in CardItemSwitcher (created by CardItem)
    in td (created by CardItem)
    in tr (created by CardItem)
    in CardItem (created by Card)
    in tbody (created by Card)
    in table (created by Card)
    in div (created by Card)
    in Card (created by withComponents(Card))
    in withComponents(Card) (created by AlbumsList)
    in div (created by AlbumsList)
    in div (created by AlbumsList)
    in AlbumsList (created by withAlbum)
    in withAlbum (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in AccessControl (created by withMessages(AccessControl))
    in withMessages(AccessControl) (created by Context.Consumer)
    in ErrorCatcher (created by Context.Consumer)
    in withRouter(ErrorCatcher) (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in div (created by Dashboard)
    in Dashboard (created by Layout)
    in div (created by Container)
    in Container (created by Layout)
    in div (created by Layout)
    in Layout (created by Context.Consumer)
    in Route (created by RouteWithLayout)
    in RouteWithLayout (created by App)
    in Switch (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorCatcher.
logCapturedError @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118053
logError @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118090
callback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119270
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:111016
commitUpdateQueue @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:111037
commitLifeCycles @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:118384
commitLayoutEffects @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121329
callCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98714
invokeGuardedCallbackDev @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98763
invokeGuardedCallback @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:98818
commitRootImpl @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:121067
unstable_runWithPriority @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:124268
runWithPriority$1 @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:109565
commitRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120907
finishSyncRender @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120333
performSyncWorkOnRoot @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120319
scheduleUpdateOnFiber @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:119714
updateContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:122899
(anonymous) @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123284
unbatchedUpdates @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:120429
legacyRenderSubtreeIntoContainer @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123283
hydrate @ modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:123349
(anonymous) @ start.jsx:47
(anonymous) @ client.js:8
(anonymous) @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:1234
Promise.then (async)
Promise.then @ promise.js?hash=bcc278416465049d96746a94376f34245ad33b8c:132
onPageLoad @ client.js:8
(anonymous) @ start.jsx:35
maybeReady @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:938
loadingCompleted @ meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d:950
modules.js?hash=b4642265c5ca51bf49e5ba4c217056bcfe0013df:47671 Warning: Failed prop type: The prop `dismissFlash` is marked as required in `Flash`, but its value is `undefined`.
    in Flash (created by ErrorCatcherContents)
    in ErrorCatcherContents (created by ErrorCatcher)
    in ErrorCatcher (created by Context.Consumer)
    in withRouter(ErrorCatcher) (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by Context.Consumer)
    in div (created by Dashboard)
    in Dashboard (created by Layout)
    in div (created by Container)
    in Container (created by Layout)
    in div (created by Layout)
    in Layout (created by Context.Consumer)
    in Route (created by RouteWithLayout)
    in RouteWithLayout (created by App)
    in Switch (created by App)
    in div (created by App)
    in IntlProvider (created by App)
    in App (created by Context.Consumer)
    in withRouter(App) (created by withCookies(withRouter(App)))
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in withCookies(withRouter(App)) (created by Context.Consumer)
    in ApolloConsumer (created by withApollo(withCookies(withRouter(App))))
    in withApollo(withCookies(withRouter(App))) (created by withUpdateUser)
    in withUpdateUser (created by withLocaleData)
    in withLocaleData (created by withSiteData)
    in withSiteData (created by withCurrentUser)
    in withCurrentUser (created by AppGenerator)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by AppGenerator)
    in CookiesProvider (created by AppGenerator)
    in ApolloProvider (created by AppGenerator)
    in AppGenerator (created by Main)
    in Main
    

@eric-burel
Copy link
Contributor

Yes you have server/client discrepancies but I cannot tell which just from this log, you need to check the server terminal

@webface
Copy link
Author

webface commented Apr 9, 2021

Also the errors are only thrown on the /albums route. getting warm

import React from 'react';
import { Helmet } from 'react-helmet';
import { Components, withMulti, withCurrentUser, registerComponent } from 'meteor/vulcan:core';
import Users from 'meteor/vulcan:users';

import Albums from '../../modules/albums/collection.js';

{
  /* These are "props". They are variables for the component that are passed by the components parent. 
  In this case, to create the parent we wrapped the component in "Higer Order Compoents" (See the Higer Order Compoents section below.) 
    By doing this, we can pass on those props to the children of he HOCs and give them access to the props... */
}
const AlbumsList = ({ results = [], currentUser, loading, loadMore, count, totalCount }) => (
  <div style={{ maxWidth: '500px', margin: '20px auto' }}>
    {/* First, this is a Helment tag. It's a React package that loads head tags. We're using it to load the Bootstrap stylesheet. 
      This is not Vulcan specific but it is an easy way to add tags to the head... */}
    


    {/* ... We have a test for the loding variable (See the "Higher Order Components" section at the bottom and then the "props" section at the top.)... */}
    {loading ? (
      <Components.Loading />
    ) : (
      <div className="albums">
        {/* new document form - this if for inserting new documents. Because the collection has the schema, when we generate the form, it know what the colleciton should look like
          You only need to specify the colleciton. You don't need to code any of the form. Validation will work and it will show you fields based on your user permission...*/}

        {Users.canCreate({ collection: Albums, user: currentUser }) ? (
          <div
            style={{
              marginBottom: '20px',
              paddingBottom: '20px',
              borderBottom: '1px solid #ccc',
            }}
          >
            <h4>Create New Album</h4>
            <Components.SmartForm collection={Albums} />
          </div>
        ) : null}

        {/* documents list - this is another small utility in Vulcan and it will display it as a card... */}

        {results.map(album => (
          <Components.Card
            fields={['name', 'releaseDate','downloads', 'genresIds']}
            key={album._id}
            collection={Albums}
            document={album}
            currentUser={currentUser}
          />
        ))}

        {/* load more - this is the load more button. On click we trigger the loadMore function which is passed as a prop by withList... */}

        {totalCount > results.length ? (
          <a
            href="#"
            onClick={e => {
              e.preventDefault();
              loadMore();
            }}
          >
            Load More ({count}/{totalCount})
          </a>
        ) : (
          <p>No more items.</p>
        )}
      </div>
    )}
  </div>
);

// ...this is where we specify how to load the data in the options object that we pass to withList
// if you want, you can specify many more options here, like how often to look for data or what fields to query from, filtering and sorting options. ...
const options = {
  collection: Albums,
  limit: 5,
  fragmentName: 'AlbumItem',
};



// These two functions (withList & withCurrentUser) are Higher Order Components (HOC) and by wrapping our component with this we can give it "props". (See the "props" section at the top.)
registerComponent({ name: 'AlbumsList', component: AlbumsList, hocs: [withCurrentUser, [withMulti, options]] });

@webface
Copy link
Author

webface commented Apr 9, 2021

turns out genresIds should be genres

{results.map(album => (
          <Components.Card
            fields={['name', 'releaseDate','downloads', 'genres']}
            key={album._id}
            collection={Albums}
            document={album}
            currentUser={currentUser}
          />
        ))}
        

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants