I'm trying to generate a build of our Next.js application that is on a Github repository. We used node 14.19.3 to build the application, and it runs fine on local development.
The package.json of main project is
{
"name": "example-name",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@apollo/client": "^3.6.4",
"graphql": "^16.5.0",
"@our-private-package": "^1.0.7",
"framer-motion": "^2.9.4",
"i18next": "^21.8.0",
"js-cookie": "^2.2.1",
"next": "^12.1.6",
"next-cookies": "^2.0.3",
"ni18n": "^1.0.3",
"prop-types": "^15.7.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-ga": "^3.3.0",
"react-i18next": "^11.16.9",
"react-icons": "^4.3.1",
"react-modal": "^3.11.2",
"react-redux": "^7.2.1",
"react-slick": "^0.27.11",
"react-slider": "^2.0.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sass": "^1.26.11",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"@ermeschultz/chai-arrays": "^2.3.0",
"chai": "^4.2.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.0.0",
"esm": "^3.2.25",
"file-loader": "^6.1.0",
"mocha": "^8.1.3",
"prettier": "^2.1.1",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"url-loader": "^4.1.0"
}
}
Our private package have this package.json file:
{
"name": "@our-private-package",
"version": "1.0.7",
...
"engines": {
"yarn": ">=1.22.0",
"npm": ">=6.14.16",
"node": ">=14"
},
"scripts": {
"prepare": "npm run build",
"start": "node ./build/index.js",
"dev": "ts-node ./src/index.ts",
"build": "tsc --module commonjs"
},
"dependencies": {
"canvas": "^2.9.1",
"canvas-5-polyfill": "^0.1.5"
},
"devDependencies": {
"@types/node": "^17.0.33",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.3",
"react": "^17.0.0",
"react-dom": "^17.0.0",
"ts-node": "^10.7.0",
"typescript": "^4.6.4"
},
"peerDependencies": {
"react": "^17.0.0",
"react-dom": "^17.0.0"
}
}
To create the service, I selected nodejs 14 platform and put these build commands in the app runner user interface:
export VARIABLE=value; npm install; npm run build
*The variable is an env variable necessary to import some private packages.
And this running commands in the app runner user interface:
npm start
The build logs show the message:
"[Build] \u001b[0m\u001b[91mError: The module '/app/node_modules/canvas/build/Release/canvas.node'\n",
"[Build] was compiled against a different Node.js version using\n",
"[Build] NODE_MODULE_VERSION 72. This version of Node.js requires\n",
"[Build] NODE_MODULE_VERSION 83. Please try re-compiling or re-installing\n",
I removed the private package and then project builds successfully on app runner. But I just can't reproduce the same problem on my local machine.
The error on message was reported previously on Stack Overflow, always relating to the use of another version of node than the current used one. It is always solved by reinstalling, rebuilding, and/or clearing the npm cache. But app runner creates the container from scratch.
The interface shows that we are using Node js 14 environment. But it seems running on the Node js 12 platform when running npm run build command. At least for the canvas module build.
It could be a package conflict case. But, why this shows the message like it was build in node 12? Why the same problem does not happens in my local development even if I'm using same node and npm present in App Runner?
It is not a definitive complete answer to the question, but run
yarn install; yarn buildinstead npm make the same code runs on app runner.