Page Not Found error. Downloaded build working in local but not on netlify site

[sg19repos]

This is my first netlify app with Webpack config, and second one using react. When deployed code from github repo, it’s working seamlessly. But when I dropped my react app folder into this drop pane,

it started deploying, then got published, then when opened, Page Not Found

Earlier it prompted me to change the babel config in console. I changed it and is now working in local. However, build is super quick, and is showing Page Not Found

This is the site - https://gracious-roentgen-c5c8be.netlify.app/

Publish Status -

Published deploy
Production. Today at 10:38 AM Download ready
Preview deploy

Deploy log -

10:38:22 AM: Starting post processing
10:38:22 AM: Post processing - HTML
10:38:23 AM: Post processing - redirect rules
10:38:23 AM: Post processing - header rules
10:38:23 AM: Post processing done
10:38:23 AM: Site is live

Deploy Summary -

2 new files uploaded
1 generated page and 1 asset changed.
Congratulations! No insecure mixed content found in your files.

Overview -

When I downloaded the deployed build, it is working perfectly fine in my local

Here’s my webpack config (I’m not a Webpack expert, please correct me if wrong)

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: ['./src/index.js', '@babel/polyfill'],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                    },
                },
            },

            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },

            {
                test: /\.(jpe?g|gif|png|svg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            },

            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'assets/images/',
                        },
                    },
                ],
            },

            // {
            //     loader: 'babel-loader',
            //     options: {
            //         presets: ['@babel/react', '@babel/env', '@babel/preset-env'],
            //     },
            // },
        ],
        // loaders: [{ test: /\.jsx?$/, loader: 'babel' }],
    },

    devServer: {
        host: '192.168.1.10', //your ip address,
        // host: '0.0.0.0', //your ip address,
        historyApiFallback: true,
        contentBase: '././src',
        port: 8080,
        disableHostCheck: true,
    },

    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve('./dist/index.html'),
        }),
    ],

    devServer: {
        // contentBase: './dist',
        contentBase: './build',
        hot: true,
    },
};

Here’s my package.json:

{
    "name": "dljalpha",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",

    "scripts": {
        "start": "webpack-dev-server --mode development --open --hot --host 0.0.0.0",
        "test": "jest",
        "build": "webpack --mode production"
    },

    "keywords": [],
    "author": "",
    "license": "ISC",

    "devDependencies": {
        "@babel/core": "^7.8.7",
        "@babel/polyfill": "^7.10.1",
        "@babel/preset-env": "^7.10.2",
        "@babel/preset-react": "^7.10.4",
        "axios-mock-adapter": "^1.18.1",
        "babel-eslint": "^10.1.0",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.5.3",
        "enzyme": "^3.11.0",
        "enzyme-adapter-react-16": "^1.15.2",
        "eslint": "^6.8.0",
        "eslint-config-airbnb": "^18.1.0",
        "eslint-config-prettier": "^6.11.0",
        "eslint-loader": "^4.0.2",
        "eslint-plugin-import": "^2.20.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.1.3",
        "eslint-plugin-react": "^7.19.0",
        "eslint-plugin-react-hooks": "^2.5.0",
        "file-loader": "^6.0.0",
        "identity-obj-proxy": "^3.0.0",
        "jest": "^26.0.1",
        "prettier": "^2.0.5",
        "react-hot-loader": "^4.12.19",
        "redux-mock-store": "^1.5.4",
        "style-loader": "^1.2.1",
        "url-loader": "^4.1.0",
        "webpack": "^4.42.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.10.3"
    },

    "dependencies": {
        "@material-ui/core": "^4.10.2",
        "@material-ui/icons": "^4.9.1",
        "@material-ui/lab": "^4.0.0-alpha.56",
        "axios": "^0.19.2",
        "core-js": "^3.6.5",
        "html-webpack-plugin": "^4.3.0",
        "husky": "^4.2.5",
        "prop-types": "^15.7.2",
        "react": "^16.13.0",
        "react-dom": "^16.13.0",
        "react-intl": "^4.6.3",
        "react-redux": "^7.2.0",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-share": "^4.2.1",
        "react-test-renderer": "^16.13.1",
        "recompose": "^0.30.0",
        "redux": "^4.0.5",
        "redux-saga": "^1.1.3",
        "regenerator-runtime": "^0.13.5"
    }
}

Please guide. Thanks

[perry]

Hi there,

Did you see this guide yet? This is the best place to start for “Page Not Found” issues.

[Support Guide] I’ve deployed my site but I still see "Page not found”

Last reviewed by Netlify Support - August, 2023 Netlify attempts to lookup a file based on several xor filters, and when all of these fail, we end up serving a 404 page. For example, a request made to /example/ would check /example/index.html, /example.html, /example/home.html and several other combinations (not necessarily in the same order) before hitting the 404. However, in case you were not expecting a 404 at a particular URL, you might be interested in finding out the reason and potentia…

If you are still seeing issues after following the troubleshooting steps in this guide, please let us know!

[sg19repos]

I found my issue was with build. I thought netlify would do a build if I simply drop my folder in it. But I realized and generated the ./dist folder after doing build and then drag-n-drop is working fine now.
I could see my site.

But I still see the images not getting loaded in site. I see no assets folder under the ./dist folder -

I tried several changes in my webpack.config.js. Here it is:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: ['./src/index.js', '@babel/polyfill'],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-env'],
                    },
                },
            },
            {
                test: /\.css$/i,
                exclude: /node_modules/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ],
            },
            {
                test: /\.(gif|png|jpe?g)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // name: '[name].[ext]',
                            // name: '[path][name].[hash].[ext]',
                            name: '/src/assets/images/[hash].[ext]',
                            // outputPath: 'src/assets/images/',
                        },
                    },
                ],
            },
            
        ],
        
    },
    devServer: {
        host: '192.168.1.10', //your ip address,
        historyApiFallback: true,
        contentBase: './build',
        disableHostCheck: true,
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            inject: true,
            template: path.resolve(__dirname, 'index.html'),
        }),
    ],
    devServer: {
        contentBase: './build',
        hot: true,
    },
};

And I try to access my images in JSX like this -
import { HeaderLogo } from '../../assets/images/image_name.png';

The same is working fine in local. Not sure what causing issue in prod. I know something is wrong with my file-loader path. But not sure where to correct.

Please correct my understanding