构建时发生错误:vendors.js:21未捕获的TypeError:超级表达式必须为null或函数,且未定义

时间:2019-05-13 10:06:18

标签: javascript reactjs webpack

因此,在构建用于生产的代码时,webpack出现了问题(此错误仅在为prod进行构建时附加,而在将webpack与devServer一起使用时不会附加)。

这是错误:

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

(例如,在使用http-server启动构建的项目后,此错误出现在浏览器的控制台中)

我不认为此错误是由于我的webpack配置所致,因为我在许多其他项目中都使用了此配置,并且从未遇到过问题。

但是我留给你(以防万一):

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配置中有一些打字稿依赖关系,但没有任何支持。这是因为我在此项目中部分使用了打字稿,但问题并非出自这里。我删除了webpack配置和项目中的所有ts集成,问题仍然存在。

我正在使用yarn,因此我尝试删除了yarn.lock文件,但没有帮助。

此错误并非来自我的代码。我只测试了其中带有h1的一个组件,但不能解决问题。

0 个答案:

没有答案