英文:
Webpack throws an error when refreshing the page on a dynamic route
问题
I use React Router + Webpack in my project. When I try to refresh the page on a dynamic route it throws this error:
> Refused to execute script from 'http://localhost:3000/history/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Mind you, bundle.js exists in the root of the project, not history thus the error. The problem is obviously in the Webpack config. It searches for bundle inside a relative dir and ofc can't find one on a dynamic route. But how does one specify an absolute path? I played around a bit but couldn't put my finger on it. Here's the config:
module.exports = {
mode: 'development',
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
entry: {
bundle: path.resolve(__dirname, 'src/index.tsx'),
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
clean: true,
assetModuleFilename: '[name][ext]',
},
devServer: {
static: {
directory: path.resolve(__dirname, 'build'),
},
port: 3000,
open: true,
hot: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.tsx?/,
use: 'babel-loader',
},
{
test: /\.scss/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlPlugin({
template: path.resolve(__dirname, 'public/index.html'),
}),
new RefresherPlugin(),
],
};
英文:
I use React Router + Webpack in my project. When I try to refresh the page on a dynamic route it throws this error:
> Refused to execute script from 'http://localhost:3000/history/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
Mind you, bundle.js exists in the root of the project, not history thus the error. The problem is obviously in the Webpack config. It searches for bundle inside a relative dir and ofc can't find one on a dynamic route. But how does one specify an absolute path? I played around a bit but couldn't put my finger on it. Here's the config:
module.exports = {
mode: 'development',
resolve: {
extensions: ['.ts', '.tsx', '.js'],
},
entry: {
bundle: path.resolve(__dirname, 'src/index.tsx'),
},
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
clean: true,
assetModuleFilename: '[name][ext]',
},
devServer: {
static: {
directory: path.resolve(__dirname, 'build'),
},
port: 3000,
open: true,
hot: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.tsx?/,
use: 'babel-loader',
},
{
test: /\.scss/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlPlugin({
template: path.resolve(__dirname, 'public/index.html'),
}),
new RefresherPlugin(),
],
};
答案1
得分: 0
在webpack.config.js文件的输出部分添加publicPath
:
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
publicPath: '/',
clean: true,
assetModuleFilename: '[name][ext]',
}
英文:
Add publicPath
in the output section of the webpack.config.js file
output: {
path: path.resolve(__dirname, 'build'),
filename: '[name].js',
publicPath: '/',
clean: true,
assetModuleFilename: '[name][ext]',
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论