Next.js with tabletop

[johnstew]

Bug report

Describe the bug

I'm trying to import Tabletop.js and getting some require errors around it. It appears the client bundle is looking for server side packages.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Install tabletop in Next.js project
2. Invoke Tabletop.init(...)
3. Run next dev

import Tabletop from 'tabletop';

function getData() {
  return new Promise(resolve => {
    Tabletop.init({
      key: 'magical-fake-key',
      callback: data => resolve(data),
      simpleSheet: true
    });
  });
}

export default class index extends React.Component {
  static async getInitialProps() {
    try {
      const data = await getData();
      if (data.length === 0) {
        console.log('Data is missing, :(');
      }
      const processedData = processData(data);
      return { cmsData: processedData };
    } catch (error) {
      console.error(error);
    }
    return { cmsData: {} };
  }

  ...
}

Expected behavior

Tabletop has a server side component and a client side component. So I think I was hoping this would work realizing that it might not 😄

Screenshots

Errors I get when trying to do this.

System information

• OS: macOs
• Version of Next.js: 7.0.2

Additional context

I got around this by creating a custom express server but I'd really love to not have to do that given that Now v2 doesn't really recommend this approach to deploy. https://spectrum.chat/?thread=ebd1f14e-cacb-48cb-9df1-97b4ceca6b87

[timneutkens]

The correct way to handle this is creating an external API and fetch that API from Next.js, because Next.js will need to be able to fetch data on both the server + client side, if you use <Link> getInitialProps is executed on the client side.