score:16
if you use webpack in your project, please add output.publicpath = '/'
and devserver.historyapifallback = true
in your webpack config file.
more info: react-router urls don't work when refreshing or writting manually
score:-1
i had similar issue. had to remove the contentbase
line from devserver
configuration in webpack.config.js
.
this is my webpack.config.js
:
var path = require("path");
module.exports = {
devtool: 'inline-source-map',
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
publicpath: "/assets/",
filename: "bundle.js"
},
devserver: {
port: 9002
},
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader' }
]
}
};
score:0
i struggled a couple hours to fix this issue. there is a just simple code that you have to add. just follow the instruction of below. if you face problem to browse from specific url to another url, you will be able to fix that also. if you would like to configure from webpack config file, then write below's code.
devserver: {
historyapifallback: true
}
and if you would like to run by cli command, then use the below's code.
"start": "webpack-dev-server --history-api-fallback"
it worked for me. i had not to do anything else to fix this issue like meta tag or something else.
score:0
if you're using rails and webpacker and get this error, note that the initializer config/initializers/content_security_policy.rb
has a content security policy for rails.env.development
. changing :https
to :http
on that line solved the error for me. (and remember that localhost is not the same as 127.0.0.1 as far as the csp is concerned.)
score:0
adding output: { ..., publicpath: "/", }
and devserver: { historyapifallback: true }
worked
in webpack.config.js
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "public"),
filename: "main.js",
publicpath: "/", // ++
},
target: "web",
devserver: {
port: "6060",
static: ["./public"],
open: true,
hot: true,
livereload: true,
historyapifallback: true, // ++
},
resolve: {
extensions: [".js", ".jsx", ".json", ".ts"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
// css rules
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
Source: stackoverflow.com
Related Query
- Webpack dev server React Content Security Policy error
- Why do I get the "default-src: 'none'" Content Security Policy error on React PWA app after I've set up express-csp-header?
- How to configure webpack dev server with react router dom v4?
- Content security policy in React app didn't block online script
- How to enable webpack Content Security Policy in React?
- React Webpack Dev Server main.js not found
- React not rendering on Webpack Dev server
- Can I use relative path with webpack dev server - react js
- webpack dev server does not show the content
- Typescript Webpack React compilation resulting in read only file system error, but dev server works fine
- Content Security Policy issue node js react
- Webpack Dev Server with React Hot Loader
- React Router - Content Security Policy directive: "default-src 'self'
- Proxying requests from client react app to server with create-react-app and webpack dev server
- Problem chrome content security policy react extension manifest
- Webpack Dev Server React Subfolder Not Working
- Error Running node server , webpack for React configuration
- React and webpack dev server
- Error when running Express server using nodemon alongside react dev server
- React Router "Content Security Policy directive" error
- Updates in my React application aren't taken into account Webpack dev server
- Webpack dev server + React + Typescript wont inject assets after sources change
- React Electron App - React Leaftlet Content Security Policy errors
- Violating Content Secuirty Policy in Electron app using React and Webpack
- Content Security Policy Error in MERN App (nodemailer)
- Create React App Server Side Rendering SCSS Webpack Error
- How to fix internal server error 500 and refused to load image because of content security policy?
- Image violates the following Content Security Policy directive - Create React App
- How can Content Security Policy default-src: none can be fixed for a React app?
- Invalid Host Header when ngrok tries to connect to React dev server
More Query from same tag
- material-table after open dialog in edit row is closed edit of row
- ReactJS how to limit the input value inline?
- React hooks - async setState update with old state because of closure
- Update React component with placeholder replaced by another component
- Applying a single onChange to all input boxes
- updating state through form inputs
- React Redux Store values immediatly after dispatch
- Custom styling for select all checkbox in antd Table row selection
- Get Error 'Cannot read property 'setState' of undefined' on setState line
- How to return to old state after searching table React Hooks
- change useState when redux state change
- Every Time Require new Port Number in ReactJs Local Server
- How do you set a HTML data- tag for a ReactJS TextField in a form
- How to set a particular state of a parent component from child component in React?
- remove an element from dom in react so as to make another z index element clickable
- How to fix JSX props should not use .bind() Error
- Getting TypeError : `month` must be a valid moment object in mobile Airbnb/react-dates
- Looping through an array of objects and mapping each object them to a single template object
- creating a piano with react.js, use of state unclear
- d3.js + React, node.getBoundingClientRect is not a function
- Is there a way to get these two array Id in this reactjs code?
- google-map-react marker onclick not working
- How to append text(query) to a react-router URL?
- How to remove from am array in React/Redux
- Using different font size in each row in antd react table
- React Select set wrong value
- React router not showing a page
- React Hook redraw component trees on every page resize
- flatMap doesn't work in yarn test javascript
- How to implement a scrollspy in react native with ScrollView?