travis-r6s / gridsome-plugin-flexsearch

Add lightning fast search to Gridsome with FlexSearch
24 stars 7 forks source link

(node:4305) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'constructor' of undefined #42

Closed renepardon closed 4 years ago

renepardon commented 4 years ago

Hello, just wanted to test this plugin to see if it fits my needs but got this nice stack trace as soon as I add it to gridsome.config:

Initializing plugins...
Load sources - 0.04s
Create GraphQL schema - 0.08s
Create pages and templates - 0.12s
Generate temporary code - 0.05s
(node:4305) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'constructor' of undefined
    at F (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:14:485)
    at w.s (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:23:225)
    at w.s (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:23:279)
    at w.add (/Users/renepardon/.../node_modules/flexsearch/dist/flexsearch.node.js:21:84)
    at Object.fn (/Users/renepardon/.../node_modules/gridsome-plugin-flexsearch/gridsome.server.js:126:12)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:4305) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:4305) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
noxify commented 4 years ago

@renepardon could you please share some more details with us?

It would be good if you can share the information from gridsome info. Maybe also your current gridsome.config.js would be helpful to reproduce the issue.

renepardon commented 4 years ago

Hello @noxify of course, should not be a secret ;)

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 77.0.1
    Safari: 12.1.1
  npmPackages:
    @gridsome/plugin-google-analytics: ^0.1.0 => 0.1.0
    @gridsome/plugin-sitemap: ^0.2.3 => 0.2.3
    @gridsome/source-filesystem: ^0.6.2 => 0.6.2
    @gridsome/transformer-remark: ^0.4.0 => 0.4.0
    gridsome: ^0.7.9 => 0.7.12
    gridsome-plugin-flexsearch: ^1.0.1 => 1.0.1
    gridsome-plugin-matomo: ^0.1.0 => 0.1.0
    gridsome-plugin-ogp: ^0.0.14 => 0.0.14
    gridsome-plugin-pwa: ^0.0.18 => 0.0.18
    gridsome-plugin-robots-txt: ^1.0.2 => 1.0.2
renepardon commented 4 years ago

and the gridsome.config.js:

module.exports = {
  siteName: 'not so relevant to debug',
  siteUrl: 'https://sag.ich.net',
  titleTemplate: '%s',
  icons: [
    {
      'src': 'logo-192.png',
      'sizes': '192x192',
    },
    {
      'src': 'logo-512.png',
      'sizes': '512x512',
    },
  ],
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        baseDir: './pages',
        path: '**/*.md',
        typeName: 'StaticPage',
        resolveAbsolutePaths: true,
        remark: {
          externalLinksTarget: '_blank',
          externalLinksRel: ['nofollow', 'noopener', 'noreferrer'],
        },
      },
    },
    {
      use: 'gridsome-plugin-pwa',
      options: {
        title: 'not so relevant to debug',
        disableServiceWorker: false,
        serviceWorkerPath: 'service-worker.js',
        cachedFileTypes: 'js,json,css,html,png,jpg,jpeg,svg,gif',
        startUrl: '/',
        display: 'standalone',
        statusBarStyle: 'default',
        manifestPath: 'manifest.json',
        shortName: 'whatever',
        categories: ['contractor', 'service provider'],
        lang: 'de-DE',
        themeColor: '#5478a8',
        backgroundColor: '#ffffff',
        icon: './static/logo-512.png', // must be provided
        msTileImage: '',
        msTileColor: '#5478a8',
      },
    },
    {
      use: '@gridsome/plugin-google-analytics',
      options: {
        id: 'UA-122576121-1',
      },
    },
    {
      use: '@gridsome/plugin-sitemap',
      options: {
        cacheTime: 600000,
      },
    },
   /* {
      use: 'gridsome-plugin-flexsearch',
      options: {
        searchFields: ['title', 'tags'],
        collections: [
          {
            typeName: 'Post',
            indexName: 'Post',
            fields: ['id', 'title', 'path', 'image']
          },
          {
            typeName: 'Collection',
            indexName: 'Collection',
            fields: ['id', 'title', 'path']
          }
        ]
      }
    },*/
    {
      use: 'gridsome-plugin-ogp',
    },
  ],
  css: {
    loaderOptions: {
      scss: {},
    },
  },
  // chainWebpack: config => config.mode('development'),
  devServer: {
    host: '0.0.0.0',
    port: 8080,
  },
}
renepardon commented 4 years ago

May I also ask if there is a way to search content of file based component pages? Most of the pages are not coming from a CMS/GraphQL etc. They are just hard coded. I would like to search them as well. Or at least the corresponding meta data which I add like this:

export default {
    metaInfo ()
    {
      return {
        title: 'title goes here',
        ...this.$ogp({
          title: 'title goes here,
          description: 'my amazing description',
          image: 'https://sag.ich.net/images/social-card.jpg',
          appId: '0815', // facebook app id
        }),
        bodyAttrs: {
          class: 'stretched',
        },
      }
    },

kind regards

noxify commented 4 years ago

If I'm not wrong, you're using gridsome 0.7.12.

Could you please upgrade to a newer version, since the plugin requires >0.7.15 with plugin version >=1.0.0.

Requires at least Gridsome v0.7.3, versions >= 0.1.21 requires Gridsome > 0.7.15.

In case you need a reference implementation, you can checkout

I'm using the plugin, too - but haven't seen this kind of issue.

renepardon commented 4 years ago

I updated to latest gridsome version: "gridsome": "^0.7.17",

Now I get this error: ;(

TypeError: Cannot read property 'constructor' of undefined

with this stacktrace:

 at F (/Users/.../node_modules/flexsearch/dist/flexsearch.node.js:14:485)
    at w.s (/Users/.../node_modules/flexsearch/dist/flexsearch.node.js:23:225)
    at w.s (/Users/.../node_modules/flexsearch/dist/flexsearch.node.js:23:279)
    at w.add (/Users/.../node_modules/flexsearch/dist/flexsearch.node.js:21:84)
    at Object.fn (/Users/.../node_modules/gridsome-plugin-flexsearch/gridsome.server.js:126:12)

gridsome info:

System:
    OS: macOS Mojave 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 14.2.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.106
    Firefox: 77.0.1
    Safari: 12.1.1
  npmPackages:
    @gridsome/plugin-google-analytics: ^0.1.0 => 0.1.1
    @gridsome/plugin-sitemap: ^0.2.3 => 0.2.3
    @gridsome/source-filesystem: ^0.6.2 => 0.6.2
    @gridsome/transformer-remark: ^0.4.0 => 0.4.0
    gridsome: ^0.7.17 => 0.7.17
    gridsome-plugin-flexsearch: ^1.0.1 => 1.0.1
    gridsome-plugin-matomo: ^0.1.0 => 0.1.0
    gridsome-plugin-ogp: ^0.0.14 => 0.0.14
    gridsome-plugin-pwa: ^0.0.18 => 0.0.18
    gridsome-plugin-robots-txt: ^1.0.2 => 1.0.2
noxify commented 4 years ago

Any chance to get access to your repo?

renepardon commented 4 years ago

sorry, this is a customer project in my private GIT server.

renepardon commented 4 years ago

If there is something else i could provide, just tell me. I cleared _nodemodules and did a fresh yarn install which resulted in the above gridsome info output.

renepardon commented 4 years ago

ok, found it: when I remove collections key from the configuration, then it builds without further error..

noxify commented 4 years ago

but your search isn't working now - or?

renepardon commented 4 years ago

I have my data security page with typeName StaticPage. If I configure this one within collections it works perfectly and fast. The only question left now is, how I'm able to search my file based components (pages). Because they are not within a collection and developed programmatically. :)

Maybe there is a way to create a collection out of the html contents from file based pages which are searchable as well then? or at least from the meta information?

noxify commented 4 years ago

@renepardon - Maybe creating a new issue for this question is a better idea? Your initial problem is solved?

keeev commented 4 years ago

I have my data security page with typeName StaticPage. If I configure this one within collections it works perfectly and fast. The only question left now is, how I'm able to search my file based components (pages). Because they are not within a collection and developed programmatically. :)

Maybe there is a way to create a collection out of the html contents from file based pages which are searchable as well then? or at least from the meta information?

Sorry if I comment on this closed issue but currently I seem to have the same problem. With collections added in gridsome.config.js it doesn't work and throws the same error like you mentioned. If I remove it, it, of course, doesn't work at all. This is how I query the data, this also may be the problem.

Just wondering:

travis-r6s commented 4 years ago

@keeev You have the same issue in that you are trying to search through manually created pages?

keeev commented 4 years ago

@thetre97 nope, in my case they are automatically generated by Gridsome I guess? I have an Events-Page that has a page-query in it which renders cards:

<page-query>
  query ($page: Int) {
  allEvent(perPage: 10, page: $page) @paginate {
    pageInfo {
      totalPages
      currentPage
    }
    edges {
      node {
        id
        name
        handle
        subtitle
        description
        isVerified
        image
        createdAt
        updatedAt
        toolCategoryId
      }
    }
  }
}
</page-query>

I adapted my code according to your shopify-starter repo but it still throws the same error as soon as I add the collections. Maybe it's just my lack of knowledge for Gridsome or GraphQL but I guess the returned flexsearch.json looks like it would at least try to fill name, handle, subtitle and description (see screenshot at the end).

I can create a new issue if you want, just let me know.

Some info:

TypeError: Cannot read property 'constructor' of undefined

gridsome.config.js

...
{
      use: 'gridsome-plugin-flexsearch',
      options: {
        flexsearch: {
          profile: 'match'
        },
        collections: [
          {
            typeName: 'Events',
            //indexName: 'Events',
            fields: ['name', 'handle', 'subtitle', 'description']
          },
        ],
        searchFields: ['name', 'handle', 'subtitle', 'description']
      }
    },
...

gridsome info

npmPackages:
    @gridsome/plugin-sitemap: ^0.4.0 => 0.4.0 
    @gridsome/source-airtable: 0.2.0 => 0.2.0 
    gridsome: ^0.7.17 => 0.7.17 
    gridsome-plugin-flexsearch: ^1.0.1 => 1.0.1 
  npmGlobalPackages:
    @gridsome/cli: 0.3.3
Screenshot 2020-07-07 18 35 51
travis-r6s commented 4 years ago

@keeev It generally throws that error if it can't find that collection/typeName - are you sure it's not the singular Event for example?

keeev commented 4 years ago

@thetre97 that's a good question. I used the airtable-starter which, as it looks like, loads as many edges as requested via the pagination:

Screenshot 2020-07-08 13 13 29

Could it be a problem, that the page-query actually has nothing to do with the collection I request in the config?
Maybe it's just my bad because I'm not that familiar with basic Gridsome/GraphQL stuff so far.

travis-r6s commented 4 years ago

@keeev That is right yes - it isn't really anything to do with the query as such. It needs the GraphQL typename of those nodes. You can find this out in the GraphQL explorer, or by adding the __typename field inside the query (node { id, __typename }), but as your query is allEvent I am guessing the typename is Event.

Try using Event as the typeName config option, and let me know if that works.

keeev commented 4 years ago

@thetre97 ha, perfect. That worked thanks. Guess it's a good idea to re-read the documentation of Gridsome and collections anyway.

Unfortunately the GraphQL explorer doesn't work for my starter at the moment due to

"error": "Unexpected token < in JSON at position 0"

But as soon as I have fixed that I will definitely check that.

Thanks for maintaining the plugin. This saved me so much time while prototyping an idea. Great work. 🙌🏼