I am getting a build error when deploying to Netlify. I don’t really understand why, the error is:
1:00:55 AM: Executing user command: npm run build
1:00:55 AM: > property-pack-web-platform@1.0.0-alpha.beta build /opt/build/repo
1:00:55 AM: > cross-env NODE_ENV=production webpack --color --progress
1:00:56 AM: /opt/build/repo/node_modules/webpack-cli/bin/cli.js:93
1:00:56 AM: throw err;
1:00:56 AM: ^
1:00:56 AM: TypeError: Cannot convert undefined or null to object
1:00:56 AM: at Function.keys (<anonymous>)
1:00:56 AM: at Object.<anonymous> (/opt/build/repo/webpack.config.js:12:24)
1:00:56 AM: at Module._compile (/opt/build/repo/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
1:00:56 AM: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
1:00:56 AM: at Module.load (internal/modules/cjs/loader.js:1002:32)
1:00:56 AM: at Function.Module._load (internal/modules/cjs/loader.js:901:14)
...
Error running command: Build script returned non-zero exit code: 1
I’m using node v12.16.1 and I have set the node version via the env variables on Netlify. The build works locally (of course).
It looks like a webpack error but as I can not reproduce locally I’m not really sure what to do.
webpack file:
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});
const config = {
mode: isProd ? 'production' : 'development',
entry: {
index: './src/index.tsx',
},
output: {
path: resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'babel-loader',
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'Property Pack',
template: 'src/index.html',
}),
new webpack.DefinePlugin(envKeys)
],
};
if (isProd) {
config.optimization = {
minimizer: [
new TerserWebpackPlugin(),
],
};
} else {
// for more information, see https://webpack.js.org/configuration/dev-server
config.devServer = {
port: 8080,
open: true,
hot: true,
compress: true,
stats: 'errors-only',
overlay: true,
historyApiFallback: true,
};
}
package.json scripts:
"scripts": {
"check-types": "tsc",
"dev": "cross-env NODE_ENV=development webpack-dev-server --color --progress",
"build": "cross-env NODE_ENV=production webpack --color --progress",
"start": "serve dist"
},
babelrc:
{
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": ["last 2 chrome versions"]
},
"corejs": "3.1.3",
"useBuiltIns": "usage"
}],
"@babel/react",
"@babel/typescript"
],
"plugins": [
"babel-plugin-styled-components",
"transform-class-properties"
]
}
I have tried clearing cache and redeploying and have also committed my lock file (it wasn’t committed before).
It’s a react-typescript application.
I have tried debugging using the Netlify Build Image as recommended by [Common Issue] Debugging site builds - I am getting different errors when running the docker container locally, it does not seem to be installing things correctly as I am getting sh: 1: webpack: not found
Would appreciate any help/advice
Link to build - https://app.netlify.com/sites/prop-pack/deploys/5e5405c14468531a442e3693