Приложение React запускается локально, но выдает неожиданный токен '<' при нажатии на heroku (prod) - PullRequest
Новая
       146

Приложение React запускается локально, но выдает неожиданный токен '<' при нажатии на heroku (prod)

0 голосов
/ 26 мая 2020

Я реорганизовал конфигурацию своего веб-пакета по двум причинам. Во-первых, чтобы удалить из него extract-text-webpack-plugin, поскольку он устарел, и, по-видимому, я должен использовать MiniCssExtractPlugin вместо css. Во-вторых, казалось хорошей идеей использовать splitChunks, чтобы иметь отдельные файлы js и css для моего кода по сравнению со всем в node_modules. Кажется, он отлично работает, за исключением одной проблемы: когда я запускаю heroku pu sh, а затем пытаюсь загрузить свое приложение, браузер выдает ошибку Uncaught SyntaxError: Unexpected token '<' в консоли, и я получаю пустую страницу.

  • Он отлично работает под dev-сервером.
  • Он отлично работает под heroku local.
  • Я просмотрел страницу устранения неполадок heroku и ничего не вижу с контролем версий, gitignore, node_modules, et c.
  • Я потратил половину сегодняшнего дня на поиск в Google этой ошибки и чтение других статей о переполнении стека, но безрезультатно. Кажется, что основная проблема c связана с браузером, ожидающим js, но получающим html. что-то делать с неправильной трансплантацией? Итак, я подумал, что, возможно, что-то происходит с моей конфигурацией babel и теперь несколькими файлами, но признаю, что не знаю, на правильном ли я пути (например, vendor.build.js файл не переносится должным образом?).
  • Итак, я подозреваю, что проблема связана с каким-то образом разбиением моих выходных файлов. производственная сборка, хотя я не уверен, что это источник проблемы или нет. Ясно, что я делаю что-то не так, но я не понимаю, что именно.

    снимок экрана с ошибкой браузера:

    enter image description here

    вот на что указывает неожиданная ошибка токена в vendors.bundle.js. Это файл index.html моего приложения, кстати:

    here is what the unexpected token error is pointing to in vendors.bundle.js

    после выполнения вышеупомянутого упражнения по рефакторингу и на основе приведенной ниже конфигурации веб-пакета сборка dev создает 4 файла:

    enter image description here

    Производственная сборка создает больше файлов:

    enter image description here

    my 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"
      }
    ]
  ]
}

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Оказывается, проблема в моем случае заключалась в том, что указанные выше имена файлов в сборках для разработки и производства различались (см. Скриншоты выше). Следовательно, мой index. html ссылался на неправильные имена файлов для производственной сборки (см. Выше index. html script tags).

Я в конечном итоге исправил это с двумя изменениями. Во-первых, я исправил конфигурацию своего веб-пакета, чтобы выводить одни и те же имена файлов для сборок dev и prod. Мне не сразу было понятно, как это сделать (я не был уверен, почему dev использовал vendors.bundle.js, а prod использовал 1.bundle.js), но в итоге все оказалось тривиальным. В разделе вывода мне просто пришлось изменить параметр имени файла с "bundle.js" на "[name].js".

новые имена файлов:

enter image description here

изменение webpack.config.js: 

    output: {
      path: path.join(__dirname, "public", "dist"),
      filename: "[name].js",
    },

Затем я построил сборки dev и prod, чтобы убедиться, что имена файлов теперь совпадают. Как только я понял, что это так, я изменил свой index.html, чтобы использовать эти два имени файла из предыдущих .. 

  <script src="/dist/vendors.js"></script>
  <script src="/dist/main.js"></script>
0 голосов
/ 26 мая 2020

Похоже, что ваш вызов файла js возвращает ваш index. html, поэтому браузер жалуется на файл <. Проверьте, не настроена ли некоторая неправильно настроенная маршрутизация, которая вернет index. html, если ничего не сработает, а затем найдите, почему он не соответствует.

...