Reputation: 2857
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
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