1

I've tried looking at related answers like this, but they're all pretty disparate so hoping someone can guide me a bit. I'm pretty new to webpack, and have just updated my flask app to a new bootstrap theme. I'm suddenly getting the error in the docker build, at the command yard run. What's funny is a previous git commit built fine, and when I have reverted to that it now gets the same error as well.

TypeError: previousExtractedCommentsSource.replace is not a function
at Object.callback (/app/assets/node_modules/terser-webpack-plugin/dist/index.js:320:43)
at enqueue (/app/assets/node_modules/terser-webpack-plugin/dist/index.js:450:14)

This answer suggests it could be a code typo, but if it was how would I go about finding it?

My webpack.config.js, in case it is helpful:

var { merge } = require('webpack-merge');
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
var TerserPlugin = require('terser-webpack-plugin');

var common = {
  watchOptions: {
    poll: (process.env.WEBPACK_WATCHER_POLL || 'true') === 'true'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: 'babel-loader'
      },
      {
        test: [/\.scss$/, /\.css$/],
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        exclude: /fonts/,
        loader: 'file-loader?name=/images/[name].[ext]'
      },
      {
        test: /\.(ttf|eot|svg|woff2?)$/,
        exclude: /images/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
            publicPath: '../fonts'
          }
        }]
      }
    ]
  },
  optimization: {
    minimizer: [
      new TerserPlugin({cache: true, parallel: true, sourceMap: false}),
      new OptimizeCSSAssetsPlugin({})
    ]
  }
};

module.exports = [
  merge(common, {
    entry: [
      __dirname + '/app/app.scss',
      __dirname + '/app/app.js'
    ],
    output: {
      path: __dirname + '/../public',
      filename: 'js/app.js'
    },
    resolve: {
      modules: [
        '/node_modules',
        __dirname + '/app'
      ]
    },
    plugins: [
      new CopyWebpackPlugin({patterns: [{from: __dirname + '/static'}]}),
      new MiniCssExtractPlugin({filename: 'css/app.css'}),
      new webpack.ProvidePlugin({$: 'jquery', jQuery: 'jquery'}),
    ]
  })
];

I'd appreciate any help. Thanks

buttchurch
  • 41
  • 1
  • 5

1 Answers1

-1

In my case, adding type: "asset/resource", after

        test: /\.(png|jpg|gif|svg)$/,
        exclude: /fonts/,
        loader: 'file-loader?name=/images/[name].[ext]'

solved the problem.

Unsolved Cypher
  • 1,025
  • 10
  • 24