Menu
Refused to execute script from 'http://localhost:8080/edit/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I am using react-router and i got this error while using
<Route path="/edit/:id" component={EditExpensePage} />
it is working fine with just /edit but giving error on /edit/:id. I don't understand why this is happening. Here are the files: This is the AppRouter file.
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Header from './../components/Header';
import ExpenseDashboardPage from './../components/ExpenseDashboardPage';
import AddExpenses from './../components/AddExpensePage';
import EditExpensePage from './../components/EditExpensePage';
import NotFoundPage from './../components/NotFoundPage';
import HelpPage from './../components/HelpPage';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header />
<Switch>
<Route path="/" component={ExpenseDashboardPage} exact={true} />
<Route path="/create" component={AddExpenses} />
<Route path="/edit/:id" component={EditExpensePage} />
<Route path="/help" component={HelpPage} />
<Route component={NotFoundPage} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
This is the EditExpenses file:
import React from 'react';
const EditExpensePage = (props) => {
console.log(props);
return (
<div>
<p>Edit your expenses Here</p>
</div>
);
}
export default EditExpensePage;
Here is my Webpack config file:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devtool: 'cheap-module-eval-source-map',
devServer: {
historyApiFallback: true
}
}
And also the index.html file generated by new HtmlWebpackPlugin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Expensify</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
Please Help me in resolving this issue.
407
To fix the issue, go into Salesforce and select Setup - > Security Controls - > Session Settings and then uncheck the Enable Content Sniffing protection checkbox under the Content Sniffing protection section.
A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.
Try changing
<script type="text/javascript" src="bundle.js"></script>
To
<script type="text/javascript" src="/bundle.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
