VulcanJS / Vulcan

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

Relations hasMany bug. #2709

Closed webface closed 3 years ago

webface commented 3 years ago

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 () at walk (/tools/isobuild/builder.js:656:34) at /tools/isobuild/builder.js:734:11 at Array.forEach () 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 () 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

webface commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

webface commented 3 years ago

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 commented 3 years ago

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}
          />
        ))}