Issue with import of the __generated__

[smikayel]

Hi there please help to understand what is going on here ...

I'm trying to use React Relay and getting this error in next js application

error - ./pages/edit/[id].js:23:0
Module not found: Can't resolve '..\..\__generated__\IdEditPageQuery.graphql'
Did you mean './..\..\__generated__\IdEditPageQuery.graphql'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
  21 |
  22 |
> 23 | Edit.query = graphql`
  24 |   query IdEditPageQuery($productId: ID!) {
  25 |     viewer {
  26 |       product(id: $productId) {

also let me attach the part of the code :

// @flow
import React from 'react';
import Box from "@material-ui/core/Box";
import { graphql } from 'react-relay';

import type { IdEditPageQueryResponse } from './../../__generated__/IdEditPageQuery.graphql';

type Props = {
  productId: string;
  ...IdEditPageQueryResponse;
};

function Edit(props: Props) {

  return (
    <Box>
      test
    </Box>
  );
}

Edit.query = graphql`
  query IdEditPageQuery($productId: ID!) {
    viewer {
      product(id: $productId) {
        id
        name
        description
        price
        createdAt
      }
    }
  }
`;

export default Edit;

the error is related to the line Edit.query = graphql so how to fix this error ? why it's happening

also let me attach the _app.js file maybe it's will realted to the this ::

here is the _app.js file

// @flow
import React, { Suspense } from 'react';
import App from 'next/app';
import Head from 'next/head';
import { QueryRenderer } from 'react-relay';
import ThemeProvider from '@material-ui/styles/ThemeProvider';
import CssBaseline from '@material-ui/core/CssBaseline';
import { createIntl, createIntlCache, RawIntlProvider } from 'react-intl';
import type { NextComponentType, NextPageContext } from 'next/next-server/lib/utils'; //eslint-disable-line

import theme from '../lib/theme';
import { initEnvironment, createEnvironment } from '../lib/createEnvironment';
import MainContainer from '../components/MainContainer';

if (!Intl.PluralRules) {
  /* eslint-disable global-require */
  require('@formatjs/intl-pluralrules/polyfill');
  require('@formatjs/intl-pluralrules/locale-data/en');
  require('@formatjs/intl-pluralrules/locale-data/ru');
  require('@formatjs/intl-pluralrules/locale-data/it');
  /* eslint-enable */
}

const cache = createIntlCache();

type InitialProps = {
  Component: NextComponentType<NextPageContext, $FlowFixMe, $FlowFixMe>,
  pageProps: $FlowFixMe,
  locale: string,
  messages: { [key: string]: string; },
  relayData: $FlowFixMe,
  token: string,
  records: $FlowFixMe,
};

type Props = {
  Component: NextComponentType<NextPageContext, $FlowFixMe, $FlowFixMe>,
  ctx: $FlowFixMe,
};

export default class MyApp extends App<InitialProps> {
  static async getInitialProps({ Component, ctx }: Props): $FlowFixMe {
    let pageProps = {};
    // $FlowFixMe[prop-missing]
    if (Component.getInitialProps) {
      // $FlowFixMe[not-a-function]
      pageProps = await Component.getInitialProps(ctx);
    }

    // Get the `locale` and `messages` from the request object on the server.
    // In the browser, use the same values that the server serialized.
    const { req } = ctx;
    let locale = 'en';
    let messages = {};
    if (req) {
      // $FlowFixMe
      const getLang = require('../lib/getLang').default; // eslint-disable-line global-require
      ({ locale, messages } = getLang(req));
    } else if (typeof window !== 'undefined') {
      ({ locale, messages } = window.__NEXT_DATA__.props); // eslint-disable-line no-underscore-dangle
    }

    return { pageProps, locale, messages };
  }

  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      if (jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles);
    }
  }

  render(): React$Node {
    const {
      // $FlowFixMe[incompatible-use]
      Component,
      pageProps,
      locale,
      messages,
      relayData,
      token,
      records,
    } = this.props;
    const intl = createIntl(
      {
        locale,
        messages,
      },
      cache,
    );

    if (!Component.query) {
      return <Component {...pageProps} locale={locale} />
    }

    const environment = createEnvironment(
      {
        relayData,
        records,
      },
      JSON.stringify({
        queryID: Component.query.params.name,
        variables: pageProps.variables || {},
      }),
    );

    return (
      <RawIntlProvider value={intl}>
        <Head>
          <meta charSet="utf-8" />
          <title>Products</title>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
          />
        </Head>
        <ThemeProvider theme={theme}>
          <CssBaseline />
          <QueryRenderer
            environment={environment}
            query={Component.query}
            variables={pageProps.variables}
            render={(params) => {
              const { error, props } = params;
              if (props && props.viewer) {

                return (
                  <Suspense fallback={null}>
                    <Component {...pageProps} environment={environment} {...props} locale={locale} />
                  </Suspense>
                );
              }

              if (error) {
                return "Error!";
              }
              return "Loading...";
            }}
          />
        </ThemeProvider>
      </RawIntlProvider>
    );
  }
}

P.S. also let me mention that I have index.js page which is working correct without issues here is code from index.js file

// @flow
import React, { Component } from 'react';
import { graphql } from 'react-relay';

import Box from "@material-ui/core/Box";
import { Button, Link } from '@material-ui/core';
import Typography from "@material-ui/core/Typography";
import ProductCard from "../components/ProductCard";
import type { pages_indexQueryResponse } from '../__generated__/pages_indexQuery.graphql';

type Props = {
  ...pages_indexQueryResponse;
};

function Index(props: Props) {
  return (
    <Box>
      <Box display="flex" alignItems="center" justifyContent="center" m={4}>
        <Typography variant="h1">
          Products
        </Typography>
      </Box>
      <Box display="flex" alignItems="center" justifyContent="center" m={4}>
        <Link href="/create">
          whant to create new product ? 
        </Link>
      </Box>
      <Box display="flex" flexWrap="wrap">
        {props.viewer.products.map(product => (
          <Link href={`/edit/${product.id}`} underline="none" key={product.id}>
            <ProductCard key={product.id} product={product} />
          </Link>

        ))}
      </Box>
    </Box>
  );
}

Index.query = graphql`
  query pages_indexQuery {
    viewer {
      products {
        id
        name
        description
        price
        createdAt
      }
    }
  }
`;

export default Index;