Vercel 上的 React 应用程序 - 添加 Web Worker 后出现 404 未找到错误
React app on Vercel - 404 not found error after adding Web Worker
我已将我的 React 应用程序部署到 Vercel,在我添加网络工作者和后台任务之前它一直在工作。
该应用程序仍然构建和部署没有错误,但是当我访问 url 时,我收到 404 未找到错误。
它在本地仍然运行良好。
我假设这是我使用 React-App-Rewired 设置网络工作者的方式。
我使用 Rewired 来避免 'ejecting' 我的应用程序,它让我创建了一个配置-overrides.js(我认为这是覆盖 Webpack 中的默认值)
配置-override.js
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
})
return config;
}
我认为问题是 Vercel 没有正确找到文件路径。
我尝试了一些方法来解决这个问题,我在这里找到了:https://github.com/webpack-contrib/worker-loader/issues/176
喜欢在返回配置之前添加这一行:
config.output.globalObject = '(self || this)'
看起来使用 Next.js 的人遇到了类似的问题,他们是这样解决的:
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.worker\.js$/,
loader: 'worker-loader',
options: {
name: 'static/[hash].worker.js',
publicPath: '/_next/'
}
})
config.output.globalObject = `(typeof self !== 'undefined' ? self : this)`
return config
}
}
但我没有使用 Next。
package.json 个脚本。
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom-fourteen",
"eject": "react-scripts eject"
},
一张图片,你可以看到我的文件结构(同样它在本地工作,所以我认为一切都设置好了)
这是我用来设置 React-App-Rewired 和网络工作者的教程:https://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-and-not-ejecting-in-the-attempt-3718d2a1166b
感谢任何帮助。谢谢!!
我需要将这一行添加到我的辅助函数第一行的正上方
/* eslint-disable-next-line no-restricted-globals */
let mytimer;
/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function(evt) {
clearInterval(mytimer);
if(evt.data.message === 'pause' || evt.data.message === 'stop' || evt.data.message === 'skip'){
postMessage(evt.data.time)
}
if (evt.data.message == "start" || evt.data.message == "break") {
var i = evt.data.time;
mytimer = setInterval(function() {
i--;
postMessage(i);
}, 1000);
}
};
我的配置中也有这个-overrides.js
config.output.globalObject = 'this';
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
})
config.output.globalObject = 'this';
return config;
}
我已将我的 React 应用程序部署到 Vercel,在我添加网络工作者和后台任务之前它一直在工作。
该应用程序仍然构建和部署没有错误,但是当我访问 url 时,我收到 404 未找到错误。
它在本地仍然运行良好。
我假设这是我使用 React-App-Rewired 设置网络工作者的方式。
我使用 Rewired 来避免 'ejecting' 我的应用程序,它让我创建了一个配置-overrides.js(我认为这是覆盖 Webpack 中的默认值)
配置-override.js
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
})
return config;
}
我认为问题是 Vercel 没有正确找到文件路径。
我尝试了一些方法来解决这个问题,我在这里找到了:https://github.com/webpack-contrib/worker-loader/issues/176
喜欢在返回配置之前添加这一行:
config.output.globalObject = '(self || this)'
看起来使用 Next.js 的人遇到了类似的问题,他们是这样解决的:
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.worker\.js$/,
loader: 'worker-loader',
options: {
name: 'static/[hash].worker.js',
publicPath: '/_next/'
}
})
config.output.globalObject = `(typeof self !== 'undefined' ? self : this)`
return config
}
}
但我没有使用 Next。
package.json 个脚本。
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom-fourteen",
"eject": "react-scripts eject"
},
一张图片,你可以看到我的文件结构(同样它在本地工作,所以我认为一切都设置好了)
这是我用来设置 React-App-Rewired 和网络工作者的教程:https://medium.com/@danilog1905/how-to-use-web-workers-with-react-create-app-and-not-ejecting-in-the-attempt-3718d2a1166b
感谢任何帮助。谢谢!!
我需要将这一行添加到我的辅助函数第一行的正上方
/* eslint-disable-next-line no-restricted-globals */
let mytimer;
/* eslint-disable-next-line no-restricted-globals */
self.onmessage = function(evt) {
clearInterval(mytimer);
if(evt.data.message === 'pause' || evt.data.message === 'stop' || evt.data.message === 'skip'){
postMessage(evt.data.time)
}
if (evt.data.message == "start" || evt.data.message == "break") {
var i = evt.data.time;
mytimer = setInterval(function() {
i--;
postMessage(i);
}, 1000);
}
};
我的配置中也有这个-overrides.js
config.output.globalObject = 'this';
module.exports = function override(config, env) {
config.module.rules.push({
test: /\.worker\.js$/,
use: { loader: 'worker-loader' },
})
config.output.globalObject = 'this';
return config;
}