javascript - React 应用程序在本地运行,但在推送到 heroku(产品)时因意外令牌“<”而失败
问题描述
我一直在重构我的 webpack 配置有两个原因。首先,extract-text-webpack-plugin
从它中删除,因为它已被弃用,显然我应该使用它来MiniCssExtractPlugin
代替 css。splitChunks
其次,为我的代码和 node_modules 中的所有内容创建一个单独的 js 和 css 文件似乎是个好主意。它似乎工作得很好,保存了一个问题,当我运行 heroku push 然后尝试加载我的应用程序时,浏览器Uncaught SyntaxError: Unexpected token '<'
在控制台中抛出一个错误,我得到一个空白页面。
- 它在开发服务器下运行良好。
- 它在 heroku local 下运行良好。
- 我浏览了 heroku 的故障排除页面,没有看到任何版本控制、gitignore、node_modules 等。
- 我今天花了一半的时间在谷歌上搜索这个错误并阅读其他堆栈溢出文章无济于事。似乎基本问题与期望 js 的浏览器有关,但它正在获取 html。与没有正确转换有关吗?所以我在想我的 babel 配置和现在的多个文件可能发生了一些事情,但承认我不知道我是否在正确的轨道上(例如
vendor.build.js
文件没有正确地转译?)。 - 所以我怀疑这个问题与以某种方式拆分我的输出文件有关..
对我来说唯一看起来不同的是当我运行开发构建与生产构建时生成的文件,尽管我不确定这是否是问题的根源。显然我做错了什么,但我不知道是什么。
浏览器错误截图:
这是意外令牌错误指向的内容vendors.bundle.js
。这是我的应用程序的index.html
文件顺便说一句:
在我进行上述重构练习后,基于以下 webpack 配置,开发构建会生成 4 个文件:
产品构建会产生更多文件:
我的webpack.config.js
文件如下所示:
const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
process.env.NODE_ENV = process.env.NODE_ENV || "development";
if (process.env.NODE_ENV === "test") {
require("dotenv").config({ path: ".env.test" });
} else if (process.env.NODE_ENV === "development") {
require("dotenv").config({ path: ".env.development" });
}
module.exports = (env) => {
const isProduction = env === "production";
return {
entry: ["babel-polyfill", "./src/app.js"],
output: {
path: path.join(__dirname, "public", "dist"),
filename: "bundle.js",
},
optimization: {
splitChunks: {
cacheGroups: {
default: false,
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
},
},
},
},
mode: isProduction ? 'production' : 'development',
module: {
rules: [
{
loader: "babel-loader",
test: /\.js$/,
exclude: /node_modules/,
},
{
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
sourceMap: !isProduction,
},
},
{
loader: "css-loader",
options: {
sourceMap: !isProduction,
},
},
{
loader: "less-loader",
options: {
sourceMap: !isProduction,
modifyVars: {
"primary-color": "#1c88bf",
"link-color": "#1c88bf",
"border-radius-base": "2px",
},
javascriptEnabled: true,
},
}
],
},
{
test: /\.s?css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
sourceMap: !isProduction,
},
},
{
loader: "css-loader",
options: {
sourceMap: !isProduction,
},
},
{
loader: "sass-loader",
options: {
sourceMap: !isProduction,
},
},
],
},
{
test: /\.(svg|eot|ttf|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/",
},
},
},
],
},
plugins: [
// new BundleAnalyzerPlugin(),
new MiniCssExtractPlugin({ filename: '[name].css'}),
new webpack.DefinePlugin({
"process.env.FIREBASE_API_KEY": JSON.stringify(process.env.FIREBASE_API_KEY),
"process.env.FIREBASE_AUTH_DOMAIN": JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
"process.env.FIREBASE_DATABASE_URL": JSON.stringify(process.env.FIREBASE_DATABASE_URL),
"process.env.FIREBASE_PROJECT_ID": JSON.stringify(process.env.FIREBASE_PROJECT_ID),
"process.env.FIREBASE_STORAGE_BUCKET": JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET),
"process.env.FIREBASE_MESSAGING_SENDER_ID": JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID),
}),
],
devtool: isProduction ? "source-map" : "inline-source-map",
devServer: {
contentBase: path.join(__dirname, "public"),
historyApiFallback: true,
publicPath: "/dist/",
},
};
};
我的.babelrc
档案值多少钱..
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "es",
"style": "true"
}
]
]
}
解决方案
看来您对 js 文件的调用正在返回您的 index.html,这就是浏览器抱怨<
. 检查是否有一些路由配置错误,如果没有命中会返回 index.html,然后查找它不匹配的原因。
推荐阅读
- javascript - React 卸载同级中的条件渲染
- django - Django - 如何结合 select_related 和 prefetch_related 以减少查询次数
- python - 如何将数据标签添加到 seaborn barplot?
- python - Pandas:使用另一列作为源替换值
- react-native-android - React Native Android TV 专注于 Flatlist 项目
- azure - Azure 警报出站 ips
- javascript - 许多命名空间路径上的套接字 io.
- python - 我们能够修剪预训练的模型吗?示例:MobileNetV2
- html - 为 div 制作自己的滚动条
- airflow - 气流 - 如果传感器发生故障,则跳过 DAG