CODEWITHSUNDEEP
webpackreact-routerwebpack-dev-server
danielfrg
danielfrg

Reputation: 2857

Webpack devserver react router BrowerRouter 404

I know this has been asked before but I have been fighting with this for a couple of hours now and I cannot find a working setup for local development setup of using react router with the BrowserRouter and the webpack dev server.

When I go to any route that is not the index.html I get a 404 error. I tried multiple configurations from questions here starting from this blospost https://ui.dev/react-router-cannot-get-url-refresh/ but i cannot make it work.

I do see on the initial console output this:

ℹ ｢wds｣: Project is running at http://localhost:3000/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/danielfrg/workspace/nbviewer.js/dist
ℹ ｢wds｣: 404s will fallback to /
ℹ ｢wdm｣: Hash: 3409aa1e47265f63217d

So I would expect the 404s to fallback to / but its not doing that.

This is my webpack.config.js:

var path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FileManagerPlugin = require("filemanager-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

const extractPlugin = {
    loader: MiniCssExtractPlugin.loader,
};

module.exports = (env, argv) => {
    const IS_PRODUCTION = argv.mode === "production";

    const config_dist = {
        entry: [path.resolve(__dirname, "src", "index.js")],
        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "nbviewer.js",
            publicPath: "/",
        },
        module: {
            rules: [
                {
                    test: /\.(js)$/,
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
                {
                    test: /\.s?[ac]ss$/,
                    use: [extractPlugin, "css-loader", "sass-loader"],
                    // use: ["null-loader"],
                },
                // Bundle Jupyter Widgets and Font Awesome
                {
                    test: /\.(eot|ttf|woff|woff2|svg|png|gif|jpe?g)$/,
                    loader: require.resolve("url-loader"),
                    // loader: require.resolve("file-loader"),
                    // options: {
                    //     name: "[name].[ext]?[hash]",
                    // outputPath: "assets/",
                    // },
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, "src", "index.html"),
            }),
            new MiniCssExtractPlugin({
                filename: "index.css",
            }),
            new FileManagerPlugin({
                onEnd: {
                    copy: [
                        {
                            source: path.resolve(__dirname, "static"),
                            destination: path.resolve(__dirname, "dist"),
                        },
                    ],
                },
            }),
            // new BundleAnalyzerPlugin(),
        ],
        devServer: {
            port: 3000,
            // contentBase: "/",
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/" },
            publicPath: "/",
        },
        node: {
            fs: "empty",
        },
        mode: IS_PRODUCTION ? "production" : "development",
        devtool: "source-map",
    };

    let config = [config_dist];

    return config;
};

Is the solution here to use the proxy as some other questions mention? It looks like some people have it working without that. Thanks for any help!

Upvotes: 1

Views: 4531

Answers (1)

danielfrg
danielfrg

Reputation: 2857

After playing with the different URL I noticed that a base url like: http://localhost:3000/asdf was indeed being redirected, in my case i was testing with files that had an extension so it was always failing.

To fix it I just had to add: disableDotRule: true.

      devServer: {
            port: 3000,
            contentBase: path.resolve(__dirname, "dist"),
            historyApiFallback: { index: "/", disableDotRule: true },
      }

Hope this helps someone in the future!

Upvotes: 4

Related Questions