Deploying NextJS powered-WordPress to Netlify

Support
, , ,
#1

Hello,

I have a website with front-end NextJs and back-end WordPress. I deployed the WordPress to WebHost, and I add the URL to .env in NextJS, but when I add this URL and run>npm run build,
I get this error:

./node_modules/node-fetch/lib/index.js
Module not found: Can’t resolve ‘encoding’ in ‘C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next\node_modules\node-fetch\lib’

Build error occurred
Error: Unexpected token < in JSON at position 0
at new ApolloError (C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:5333:28)
at C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:50424:19
at C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:71860:69
at new Promise ()
at Object.error (C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:71860:21)
at notifySubscription (C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:70038:18)
at onNotify (C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:70077:3)
at SubscriptionObserver.error (C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:70138:7)
at C:\Users\SONY\Local Sites\newbeginnings\app\public\wp-content\themes\new-beginning-next.next\serverless\pages[…slug].js:71848:68
at Array.forEach () {
type: ‘ApolloError’,
graphQLErrors: ,
networkError: {
name: ‘ServerParseError’,
response: { size: 0, timeout: 0 },
statusCode: 404,
bodyText: ‘<!doctype html>\n’ +
‘\n’ +
‘\n’ +
’ \n’ +
'… with the rest of html error page

Am I missing something that should be added?

In package.json the script section is:

“scripts”: {

"build": "next build",

"dev": "next dev",

"start": "next start",

"postbuild": "next-on-netlify",

"export": "next export",

"deploy": "npm run build && npm run export",

"svg": "svgr -d src/components/icons src/components/icons/svgs",

"cypress:open": "cypress open",

"cypress:run": "cypress run --browser chrome"

},

I would appreciate it if anyone could help me deploy this website.
Thanks in advance

#2

Try adding the encode module to your package.json’s dependencies. Considering you’re using this: encoding - npm, you need to add it to your dependencies list.

#3

Thanks for your reply, yes, It only makes the Module not found error to be gone after installing encode.
But, the Network error and 404 still there, I am using @apollo/client and in client.js
after some research, I added createNetworkInterface, but now the error is

Build error occurred
TypeError: Object(…) is not a function

This is client.js
import { ApolloClient, InMemoryCache, createHttpLink, createNetworkInterface } from ‘@apollo/client’;

const defaultOptions = {
watchQuery: {
fetchPolicy: “no-cache”,
errorPolicy: “ignore”,
},
query: {
fetchPolicy: “no-cache”,
errorPolicy: “all”,
},
};

const cache = new InMemoryCache({
resultCaching: false,
});

const link = createHttpLink({
uri: ${process.env.WORDPRESS_LOCAL_API_URL},
})

const client = new ApolloClient({
link,
cache,
defaultOptions,
networkInterface: createNetworkInterface({
uri: ${process.env.WORDPRESS_LOCAL_API_URL},
})
});

export default client;

#4

404 is caused when Netlify can’t find an index.html in the root of your publish folder. You’re probably using the command npm run deploy and the publish path as out, right?

About the client.js file, I’m not sure. I don’t use NextJS and its syntax so often, so I can’t comment on what’s wrong there.

#5

I fixed this error as It turns out it is permalinks issue in wordpress, and now when I am trying to deploy to neltify I am getting this error

Error: request to https://nctindia.000webhostapp.com/graphql failed, reason: getaddrinfo EAI_AGAIN nctindia.000webhostapp.com
7:22:05 PM: at new ApolloError (/opt/build/repo/.next/serverless/pages/[…slug].js:5968:28)
7:22:05 PM: at /opt/build/repo/.next/serverless/pages/[…slug].js:52546:19
7:22:05 PM: at /opt/build/repo/.next/serverless/pages/[…slug].js:75213:69
7:22:05 PM: at new Promise ()
7:22:05 PM: at Object.error (/opt/build/repo/.next/serverless/pages/[…slug].js:75213:21)
7:22:05 PM: at notifySubscription (/opt/build/repo/.next/serverless/pages/[…slug].js:73097:18)
7:22:05 PM: at onNotify (/opt/build/repo/.next/serverless/pages/[…slug].js:73136:3)
7:22:05 PM: at SubscriptionObserver.error (/opt/build/repo/.next/serverless/pages/[…slug].js:73197:7)
7:22:05 PM: at /opt/build/repo/.next/serverless/pages/[…slug].js:75201:68
7:22:05 PM: at Array.forEach () {
7:22:05 PM: type: ‘ApolloError’,
7:22:05 PM: graphQLErrors: ,
7:22:05 PM: networkError: {
7:22:05 PM: message: ‘request to https://newwebsite.000webhostapp.com/graphql failed, reason: getaddrinfo EAI_AGAIN newwebsite.000webhostapp.com’,
7:22:05 PM: type: ‘system’,
7:22:05 PM: errno: ‘EAI_AGAIN’,
7:22:05 PM: code: ‘EAI_AGAIN’
7:22:05 PM: }
7:22:05 PM: }

I think the problem still with the permalink, because I have blog post with url like this:
localhost/blog/new-post

Do you have any idea how that could be fixed?

I appreciate your help, thank you

#6

It seems like the address http://nctindia.000webhostapp.com/ is not reachable. See this: javascript - What's the source of Error: getaddrinfo EAI_AGAIN? - Stack Overflow

1 Like
#7

Thanks, it was an issue with permalinks in wordpress