Npm run build failure with next.

[dom-linq]

Hi, I am not able to build my react app because of an error with apollo.

When running npm run build I see the following issue -

Creating an optimized production build

Compiled successfully.


> Build error occurred
{ Invariant Violation:
fetch is not found globally and no fetcher passed, to fix pass a fetch for
your environment like https://www.npmjs.com/package/node-fetch.

For example:
import fetch from 'node-fetch';
import { createHttpLink } from 'apollo-link-http';

const link = createHttpLink({ uri: '/graphql', fetch: fetch });
    at new InvariantError (/home/dsenese/apps/linq-bundle/node_modules/ts-invariant/lib/invariant.js:16:28)
    at Object.exports.checkFetcher (/home/dsenese/apps/linq-bundle/node_modules/apollo-link-http-common/lib/index.js:65:15)
    at Object.exports.createHttpLink (/home/dsenese/apps/linq-bundle/node_modules/apollo-link-http/lib/httpLink.js:9:31)
    at new HttpLink (/home/dsenese/apps/linq-bundle/node_modules/apollo-link-http/lib/httpLink.js:140:42)
    at new DefaultClient (/home/dsenese/apps/linq-bundle/node_modules/apollo-boost/lib/bundle.cjs.js:133:20)
    at Module.1TCz (/home/dsenese/apps/linq-bundle/.next/server/static/SimzayPPCfOBGr_I2PXmC/pages/_app.js:142:16)
    at __webpack_require__ (/home/dsenese/apps/linq-bundle/.next/server/static/SimzayPPCfOBGr_I2PXmC/pages/_app.js:23:31)
    at Object.0 (/home/dsenese/apps/linq-bundle/.next/server/static/SimzayPPCfOBGr_I2PXmC/pages/_app.js:99:18)
    at __webpack_require__ (/home/dsenese/apps/linq-bundle/.next/server/static/SimzayPPCfOBGr_I2PXmC/pages/_app.js:23:31)
    at /home/dsenese/apps/linq-bundle/.next/server/static/SimzayPPCfOBGr_I2PXmC/pages/_app.js:91:18 framesToPop: 1, name: 'Invariant Violation' }
Automatically optimizing pages .npm ERR! code ELIFECYCLE

These are my dependencies - 

"dependencies": {
    "@koa/cors": "^2.2.3",
    "@shopify/app-bridge-react": "^1.12.0",
    "@shopify/koa-shopify-auth": "^3.1.56",
    "@shopify/koa-shopify-graphql-proxy": "^3.3.1",
    "@shopify/koa-shopify-webhooks": "^1.1.13",
    "@shopify/polaris": "^3.21.1",
    "@shopify/polaris-icons": "^3.8.0",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.7",
    "aws-sdk": "^2.592.0",
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "chart.js": "^2.9.3",
    "co-body": "^6.0.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "graphql": "^14.5.8",
    "isomorphic-fetch": "^2.2.1",
    "js-cookie": "^2.2.1",
    "koa": "^2.11.0",
    "koa-body": "^4.1.1",
    "koa-cors": "0.0.16",
    "koa-lusca": "^2.2.0",
    "koa-router": "^7.4.0",
    "koa-session": "^5.12.3",
    "koa-session2": "^2.2.10",
    "koa-xframe": "^0.2.0",
    "koa2-cors": "^2.0.6",
    "mongodb": "^3.4.0",
    "mongoose": "^5.8.1",
    "morgan": "^1.9.1",
    "next": "^9.3.4",
    "node-uuid": "^1.4.8",
    "react": "^16.12.0",
    "react-apollo": "^2.5.8",
    "react-chartjs-2": "^2.9.0",
    "react-dom": "^16.12.0",
    "shopify-prime": "^2.14.0",
    "store-js": "^2.0.4"
  }

Anyone else have this issue? Thanks in advance.

[achieveapplabs]

@dom-linq ,

I think the error is trying to say it can't find fetch on your system. Try downloading and installing node-fetch.

npm install --save node-fetch

Try that see if it works.

Regards,

Sam

[dom-linq]

@achieveapplabs 

Thanks for the input, that doesn't seem to resolve the issue. 

I am still getting the same results with node fetch installed.

Thanks,

Dom

[achieveapplabs · Accepted solution]

Try the following solution:

• install node-fetch
• const fetch = require('node-fetch').default;
• pass fetch to ApolloClient constructor

const client = new ApolloClient({
  uri: 'http://localhost:8000/graphql',
  fetch: fetch
});

 Solution found here: https://github.com/apollographql/apollo-client/issues/4892

[dom-linq]

@achieveapplabs 

That worked! Thanks for the help on this and the quick responses. 

[dom-linq]

@achieveapplabs 

This is a continuation of the topic that maybe you can help with. I am able to build properly but when running npm run start I get the following issue with apollo client request.

When running the app with npm run dev everything works as expected. This only happens when running the compiled application. 

This is what my apollo client initialization looks like currently -

const authLink = setContext((_, { headers }) => {
  return {
      headers: {
          ...headers,
          // authorization: Cookies.get('accessToken') ? `Bearer ${Cookies.get('accessToken')}` : "",
      }
  }
})

const httpLink = new createHttpLink({
    credentials: 'same-origin',
    headers: {
      accept: '*/*', 
      'Content-Type': 'application/graphql',
      'Access-Control-Allow-Origin': '*',
      // "X-Shopify-Access-Token": Cookies.get('accessToken')
    },
    fetch,
    ssrMode: !process.browser,
    // uri: `https://${Cookies.get('shopOrigin')}/admin/api/2019-04/graphql.json`,
})

const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

Any help is appreciated, thanks!

[achieveapplabs]

Hello,

First thing that comes to mind is your environment variables because of Dev and Prod. Can we see your full package.json the part with scripts so I can see what npm run start actually does. Also curious if perhaps your NGROK url has changed. Sometimes that happens to us and we don’t update our environment variables.

[dom-linq]

@achieveapplabs 

Thanks for the quick response again! I have it figured out actually, it was obvious once I noticed my startup scripts.

What I had previously -

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build && next export",
    "start": "next start"

I needed it to point to the server.js file -

scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "node server.js",
    "build": "next build && next export",
    "start": "node server.js"

And then have the server.js handle the production environment based on the NODE_ENV.

server.js -

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });

[achieveapplabs]

Hi @dom-linq ,

Oh ok so next start probably runs webpack hotreload or some other server that listens for your route. Anyways happy you got it working!

Regards,

Sam

[elishakay]

Followed the exact steps mentioned above and still getting an error:

Please help. Error below:

Warning: Built-in CSS support is being disabled due to custom CSS configuration
being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

Creating an optimized production build

Compiled successfully.

> Build error occurred
{ Error: ENOENT: no such file or directory, mkdir 'C:\Users\Elisha\Desktop\Shopify\shopify-community-app\Admin-Frontend\.next\export\_next\vabT7kGJh69xwlG5SXoJ_'
errno: -4058,
code: 'ENOENT',
syscall: 'mkdir',
path: 'C:\\Users\\Elisha\\Desktop\\Shopify\\shopify-community-app\\Admin-Frontend\\.next\\export\\_next\\vabT7kGJh69xwlG5SXoJ_' }
Automatically optimizing pages .npm ERR! code ELIFECYCLE

My _app.js:

import App from 'next/app';
import Head from 'next/head';
import { AppProvider } from '@shopify/polaris';
import { Provider } from '@shopify/app-bridge-react';
import Cookies from "js-cookie";
import '@shopify/polaris/styles.css';
import translations from '@shopify/polaris/locales/en.json';
import ApolloClient from 'apollo-boost';
import { ApolloProvider } from 'react-apollo';
const fetch = require('node-fetch').default;

const client = new ApolloClient({
uri: 'http://localhost:8000/graphql',
fetch: fetch
});

class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };

return (
<React.Fragment>
<Head>
<title>Sample App</title>
<meta charSet="utf-8" />
</Head>
<Provider config={config}>
<AppProvider>
<ApolloProvider client={client}>
<Component {...pageProps} app={config} />
</ApolloProvider>
</AppProvider>
</Provider>
</React.Fragment>
);
}
}

export default MyApp;

My Package.json:

{
"name": "sample-embedded-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node server.js",
"build": "next build && next export",
"start": "node server.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@editorjs/checklist": "^1.1.0",
"@editorjs/code": "^2.5.0",
"@editorjs/delimiter": "^1.1.0",
"@editorjs/editorjs": "^2.18.0",
"@editorjs/embed": "^2.3.1",
"@editorjs/header": "^2.5.0",
"@editorjs/image": "^2.4.2",
"@editorjs/inline-code": "^1.3.1",
"@editorjs/link": "^2.2.1",
"@editorjs/list": "^1.5.0",
"@editorjs/marker": "^1.2.2",
"@editorjs/paragraph": "^2.7.0",
"@editorjs/quote": "^2.3.0",
"@editorjs/raw": "^2.1.2",
"@editorjs/simple-image": "^1.3.3",
"@editorjs/table": "^1.2.2",
"@editorjs/warning": "^1.1.1",
"@shopify/app-bridge-react": "^1.21.3",
"@shopify/koa-shopify-auth": "^3.1.61",
"@shopify/koa-shopify-graphql-proxy": "^4.0.0",
"@shopify/koa-shopify-webhooks": "^2.4.2",
"@shopify/polaris": "^4.21.0",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"apollo-boost": "^0.4.7",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"cross-fetch": "^3.0.4",
"dotenv": "^8.2.0",
"graphql": "^15.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"koa": "^2.11.0",
"koa-logger": "^3.2.1",
"koa-router": "^8.0.8",
"koa-session": "^6.0.0",
"moment": "^2.27.0",
"mongoose": "^5.9.21",
"morgan": "^1.10.0",
"next": "^9.3.6",
"node-fetch": "^2.6.0",
"react": "^16.13.1",
"react-apollo": "^3.1.5",
"react-dom": "^16.13.1",
"react-editor-js": "^1.6.2",
"react-toggle-button": "^2.2.0",
"store-js": "^2.0.4"
}
}