Netlify deployment crashes because app.tsx fails to load all my pages


I have a React project that works perfectly fine in development. I have pushed the repo to github, connected it to Netlify and launched a deployment.

The deployment fails because it can’t find any page from app.tsx (they are imported as aliases).

The log is:

12:39:06 PM: $ yarn build
12:39:06 PM: yarn run v1.22.4
12:39:06 PM: $ webpack --node-env production
12:39:07 PM: Failed to load ./.env.
12:39:42 PM: assets by status 1.35 MiB [cached] 41 assets
12:39:42 PM: Entrypoint main = 941.e941524a4fcef9548d1f.bundle.js main.e1e4578451da67fb40a4.bundle.js 2 auxiliary assets
12:39:42 PM: orphan modules 1.47 MiB [orphan] 778 modules
12:39:42 PM: runtime modules 8.87 KiB 13 modules
12:39:42 PM: cacheable modules 2.51 MiB
12:39:42 PM:   modules by path ./node_modules/ 1.84 MiB 262 modules
12:39:42 PM:   modules by path ./src/ 682 KiB
12:39:42 PM:     modules by path ./src/components/ 109 KiB 16 modules
12:39:42 PM:     modules by path ./src/pages/ 349 KiB 12 modules
12:39:42 PM:     modules by path ./src/containers/ 54 KiB 10 modules
12:39:42 PM:     modules by path ./src/utils/ 28.7 KiB 8 modules
12:39:42 PM:     modules by path ./src/api/ 77.2 KiB 2 modules
12:39:42 PM:     modules by path ./src/stores/*.ts 2.88 KiB 2 modules
ERROR in ./src/app.tsx 6:0-30
Module not found: Error: Can't resolve 'pages/home' in '/opt/build/repo/src'
resolve 'pages/home' in '/opt/build/repo/src'
  Parsed request is a module
  using description file: /opt/build/repo/package.json (relative path: ./src)
    aliased with mapping 'pages': '/opt/build/repo/src/pages' to '/opt/build/repo/src/pages/home'
      using description file: /opt/build/repo/package.json (relative path: ./src)

My webpack config is:

/* eslint-env node */
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const Dotenv = require("dotenv-webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

const isProductionMode = (mode) => mode === "production";

module.exports = (env) => {
  const nodeEnv = env.WEBPACK_SERVE ? "development" : "production";
  return {
    mode: nodeEnv,
    entry: "./src/index.tsx",
    output: {
      path: path.join(__dirname, "./build"),
      filename: "[name].[contenthash].bundle.js",
      publicPath: "/",
      clean: true,
    resolve: {
      extensions: [".ts", ".tsx", ".js", "jsx", ".json"],
      alias: {
        api: path.resolve(__dirname, "src/api/"),
        assets: path.resolve(__dirname, "src/assets/"),
        components: path.resolve(__dirname, "src/components/"),
        containers: path.resolve(__dirname, "src/containers/"),
        data: path.resolve(__dirname, "src/data/"),
        i18n: path.resolve(__dirname, "src/i18n/"),
        models: path.resolve(__dirname, "src/models/"),
        pages: path.resolve(__dirname, "src/pages/"),
        routes: path.resolve(__dirname, "src/routes/"),
        src: path.resolve(__dirname, "src/"),
        stores: path.resolve(__dirname, "src/stores/"),
        utils: path.resolve(__dirname, "src/utils/"),
    module: {
      rules: [
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: { loader: "babel-loader" },
        { test: /\.css$/, use: ["style-loader", "css-loader"] },
        { test: /\.(png|jpg|jpeg|woff2)$/, use: ["file-loader"] },
          test: /\.svg$/,
          use: [
            { loader: "babel-loader" },
              loader: "react-svg-loader",
              options: {
                jsx: true,
    devServer: {
      historyApiFallback: true,
      port: 3000,
      inline: true,
      hot: true,
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html",
        favicon: path.join(__dirname, "./src/assets/images/favicon.png"),
      new Dotenv(),
    optimization: {
      minimize: isProductionMode(nodeEnv),
      minimizer: isProductionMode(nodeEnv)
        ? [new TerserPlugin(), new CssMinimizerPlugin()]
        : [],
      splitChunks: {
        chunks: "all",

The app.tsx page imports look like this (run perfectly fine locally):

const Contact = lazy(() => import("pages/Contact"));
const Infos = lazy(() => import("pages/Infos"));
const Home = lazy(() => import("pages/Home"));

// etc.

What is wrong here?

Hi @ANhs, this thread exists so this building issue can hopefully get resolved with the help of Netlify’s community. I’m afraid this is not the right place to promote your website. Best of luck with your projects though.

Now let’s please focus on the topic. Does anyone see why the build fails here?

1 Like

hey @DoneDeal0 - i have removed that spammer - you are totally right, they shouldn’t be promoting their sites in here!

As far as your problem goes, i have two ideas:

a.) it might be case sensitivity:

b.) there might be a dependency descrepancy - are you using the exact same versions of everything on our servers that you are locally?


Hi Perry, thanks for your help and your time, I appreciate it. I can’t believe I made a case mistake on an import. It was well hidden. Just one line over thousands, but it was enough to screw up the build haha! Thanks again!

1 Like