Ошибка при сборке: vendors.js: 21 Uncaught TypeError: Супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным - PullRequest
0 голосов
/ 13 мая 2019

Итак, у меня проблема с веб-пакетом, когда я создаю свой код для производства (эта ошибка добавляется только при сборке для prod, она не добавляется, когда я использую веб-пакет с devServer).

Вот ошибка:

vendors.js:21 Uncaught TypeError: Super expression must either be null or a function, not undefined

(эта ошибка появляется в консоли моего браузера после запуска встроенного проекта, например, с http-server)

Я не думаю, что эта ошибка из-за моей конфигурации веб-пакета, потому что я использовал эту конфигурацию во многих других проектах и ​​никогда не имел проблемы.

Но я оставляю это вам (на всякий случай):

const path = require('path');

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const host = 'localhost';
const port = 3000;

const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  mode: 'development',
  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src/')
    }
  },
  // Inputs
  entry: {
    app: [
      // Styles
      './src/styles/index.sass',
      // JS
      './src/index.js'
    ]
  },
  // Outputs
  output: {
    filename: 'app.js',
    chunkFilename: 'vendors.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    },
    minimizer: [
      new TerserPlugin(),
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: false
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  // Modules
  module: {
    rules: [
      // JS
      {
        test: /\.js$/,
        exclude: /node_modules|src\/modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true
            }
          }
        ]
      },
      // CSS / SASS / SCSS
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: () => [require('autoprefixer')],
              sourceMap: true
            }
          },
          // SASS
          'sass-loader'
        ]
      },
      // Inages
      {
        test: /\.(png|svg|jpg|gif|eot|woff|woff2|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'assets/'
            }
          }
        ]
      }
    ]
  },
  devServer: {
    overlay: true,
    stats: 'minimal',
    progress: true,
    inline: true,
    open: true,
    historyApiFallback: true,
    host: host,
    port: port
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/index.html',
      filename: './index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ]
};

Я думаю (но я, вероятно, ошибаюсь), проблема связана с моими зависимостями (возможно, конфликт между множественными пакетами):

{
  "name": "react-modele",
  "private": false,
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "*",
    "@babel/plugin-proposal-class-properties": "*",
    "@babel/plugin-proposal-object-rest-spread": "*",
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "@babel/preset-typescript": "^7.3.3",
    "@types/react": "^16.8.17",
    "@types/source-map": "0.5.2",
    "@typescript-eslint/eslint-plugin": "^1.7.0",
    "@typescript-eslint/parser": "^1.7.0",
    "autoprefixer": "*",
    "babel-eslint": "*",
    "babel-loader": "*",
    "chai": "*",
    "css-loader": "*",
    "enzyme": "*",
    "enzyme-adapter-react-16": "*",
    "eslint": "*",
    "eslint-config-airbnb": "*",
    "eslint-config-prettier": "*",
    "eslint-import-resolver-webpack": "*",
    "eslint-plugin-import": "*",
    "eslint-plugin-jsx-a11y": "*",
    "eslint-plugin-prettier": "*",
    "eslint-plugin-react": "*",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "*",
    "ignore-styles": "*",
    "jsdom": "*",
    "mini-css-extract-plugin": "*",
    "mocha": "*",
    "node-sass": "*",
    "optimize-css-assets-webpack-plugin": "*",
    "postcss": "*",
    "postcss-loader": "*",
    "prettier": "*",
    "sass-loader": "*",
    "style-loader": "*",
    "tslint": "^5.16.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.0.0",
    "uglifyjs-webpack-plugin": "*",
    "webpack": "^4.31.0",
    "webpack-cli": "*",
    "webpack-dev-server": "*"
  },
  "scripts": {
    "test": "NODE_PATH=./ mocha --require babel-core/register --require tests/.setup.js tests/**/*.test.js",
    "start": "webpack-dev-server",
    "clean": "rm -rf dist",
    "clean:all": "rm -rf dist node_modules",
    "build:dev": "NODE_ENV=development webpack",
    "build:dev:win": "set NODE_ENV=development && webpack",
    "build:prod": "NODE_ENV=production webpack --mode production",
    "build:prod:win": "set NODE_ENV=production && webpack --mode production",
  },
  "dependencies": {
    "@babel/polyfill": "*",
    "axios": "*",
    "classnames": "*",
    "http-server": "^0.11.1",
    "prop-types": "*",
    "react": "16.7.0-alpha.2",
    "react-burger-menu": "^2.6.10",
    "react-dom": "16.7.0-alpha.2",
    "react-icons": "^3.6.1",
    "react-image-puzzle": "^0.1.1",
    "react-redux": "*",
    "react-responsive": "^6.1.2",
    "react-router-dom": "^5.0.0",
    "redux": "*",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.86.0",
    "slugify": "^1.3.4",
    "url-loader": "^1.1.2"
  }
}

Да, в моей конфигурации webpack есть некоторые зависимости от машинописного текста, но они не поддерживаются. Это потому, что я частично использую машинопись в этом проекте, но проблема не в этом. Я удалил каждую интеграцию ts в своем конфиге веб-пакета и моем проекте, и проблема все еще здесь.

Я использую пряжу, поэтому я попытался удалить файл yarn.lock, но это не помогло.

Эта ошибка не из моего кода. Я тестировал только один компонент с h1, но это не решает проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...