Deployment and Netlify Build Image Errors

Support
, , ,
#1

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 :slight_smile:

Link to build - https://app.netlify.com/sites/prop-pack/deploys/5e5405c14468531a442e3693

#2

Hi, @alicia-proppack, and welcome to our Netlify community site. :+1:

Looking over the deploy log, I don’t see enough information to determine with 100% certainty what the issue is.

One possible cause is that a file is being reference using a different case/capitalization than it exists on the filesystem.

MacOS uses (in most cases) a case-insensitive filesystem. Our build system is Linux and most commonly used Linux filesystems are case sensitive.

This means on MacOS you can reference a files named src/index.html as src/Index.html (upper-case “I” difference) and it will work. On Linux this file will not be found and that is sometime the cause of these “Cannot convert undefined or null to object” errors.

Would you please confirm that there are no files being referenced in the site code which differ in case from their actual filename?

If that doesn’t resolve the issue, please let us know.

#3

Hi @luke,

Thanks for getting back to me.

It was actually an issue with the way I was handling environments in my Webpack file. I changed the set up to use webpack-dotenv and it worked like a charm.