Npm run build failure with next.

Solved
Highlighted
Shopify Partner
28 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
347 25 50

@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

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
0 Likes
Highlighted
Shopify Partner
28 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
Shopify Partner
347 25 50

This is an 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

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
2 Likes
Highlighted
Shopify Partner
28 1 5

@achieveapplabs 

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

1 Like
Highlighted
Shopify Partner
28 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
347 25 50
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.
Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
1 Like
Highlighted
Shopify Partner
28 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
347 25 50

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

Custom Apps and Themes Support | Email us: hello@achieveapplabs.com | Follow us on Twitter @achieveapplabs | New Monthly Support by Achieve Applabs www.achieveapplabs.com
1 Like
Highlighted
Tourist
8 1 0

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"
}
}

0 Likes