with-apollo example issue

[rinkusam12]

When setting up graphql for next js for my project, I tried following the example of with-apollo on next js repository. When I run my project although my project don't crash but, I get an error on terminal saying "Error while running getDataFromTree { Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

Here is a screenshot of the error:

[lfades]

@rinkusam12 Can you provide a reproduction of the issue? also are you using apollo hooks?

[rinkusam12]

What I have done is copied the lib folder to my specified project.
Downloaded all the dependencies for the Appolo client according to the package.json file from example folder.
Then customize the _app.js file similar to the example folder.
Although I haven't run any queries yet, I am getting this error message on the terminal and browser run fine.

If you think its a problem with my config file then,
Here is my nextJS config file:

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');
const withPlugin = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const TerserPlugin = require('terser-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const withOffline = require('next-offline');
const nextConfig = {
// target: 'serverless',

// publicRuntimeConfig: false,


// transformManifest: manifest => ['/'].concat(manifest),

webpack(config, { defaultLoaders }) {
      if (!config.plugins) config.plugins = [];
      
      config.optimization.minimizer = [new TerserPlugin({
        })]
        
      config.plugins.push(
          new CompressionPlugin()
      );
      
      config.module.rules.push({
        test: /\.(eot|woff|woff2|ttf|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
            name: '[name].[ext]'
          }
        }
      });

      return config;
  },



workboxOpts: {
      // Trying to set NODE_ENV=production when running yarn dev causes a build-time error so we
      // turn on the SW in dev mode so that we can actually test it
      // generateInDevMode: true,
      swDest: 'static/service-worker.js',
      runtimeCaching: [
        {
          urlPattern: /^https?.*/,
          handler: 'NetworkFirst',
          options: {
            cacheName: 'https-calls',
            networkTimeoutSeconds: 15,
            expiration: {
              maxEntries: 150,
              maxAgeSeconds: 30 * 24 * 60 * 60, // 1 month
            },
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
    
    exportPathMap: async function() {
      return {
        '/': { page: '/' },
      }
    },

}

module.exports = withPlugin([

[
    withSass, {
        cssModules: true,
        cssLoaderOptions: {
            localIdentName: "[local]___[hash:base64:5]",
        }
    }
],

[
    withOptimizedImages, {
        inlineImageLimit: 8192,
    }
],

[
    withCss,{
        cssModules: false
    }
]

], nextConfig);

[rinkusam12]

and no I am not using apollo hooks.

[rinkusam12]

@lfades solved it, It was a problem with AppTree component from the canary branch. So, I tried the code from master branch which is implemented without the AppTree component and it worked fine without any errors.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.