Npm run build failure with next.

Solved
Highlighted
Shopify Partner
17 1 5

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.

0 Likes
Highlighted
Shopify Partner
191 13 36

@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

Shopify Themes and Custom Apps | hello@achieveapplabs.com
0 Likes
Highlighted
Shopify Partner
17 1 5

@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

0 Likes
Highlighted

Success.

Shopify Partner
191 13 36

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

Shopify Themes and Custom Apps | hello@achieveapplabs.com
2 Likes
Highlighted
Shopify Partner
17 1 5

@achieveapplabs 

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

1 Like
Highlighted
Shopify Partner
17 1 5

@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.

 

Screen Shot 2020-04-06 at 2.37.00 PM.png

 

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!

0 Likes
Highlighted
Shopify Partner
191 13 36
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.
Shopify Themes and Custom Apps | hello@achieveapplabs.com
1 Like
Highlighted
Shopify Partner
17 1 5

@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 });
1 Like
Highlighted
Shopify Partner
191 13 36

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

Shopify Themes and Custom Apps | hello@achieveapplabs.com
1 Like