Error in production enviroment

I use Sortable-tree in my project, works fine in development enviroment, but after running npm run build I get the following error in the browser console:

main.js:910 Uncaught TypeError: n is not a function at Object.<anonymous> (main.js:910) at t (main.js:28) at Object.<anonymous> (main.js:1062) at t (main.js:28) at Object.<anonymous> (main.js:1029) at t (main.js:28) at main.js:82 at main.js:82 at main.js:2441 at Object../node_modules/react-sortable-tree/dist/main.js (main.js:2441)

this only happen in production enviroment.

How can i fix that?

[mjyoung]

Any update to this? I’m experiencing the same issue:

Webpack config:

webpack.config.prod.js

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const extractCSS = new ExtractTextPlugin('[name].fonts.css');
const extractSCSS = new ExtractTextPlugin('[name].styles.css');

const BUILD_DIR = path.resolve(__dirname, 'build');
const SRC_DIR = path.resolve(__dirname, 'src');

console.warn('BUILD_DIR', BUILD_DIR);
console.warn('SRC_DIR', SRC_DIR);

module.exports = (env = {}) => {
  console.warn('===================');
  console.warn('Running environment: ', env.NODE_ENV);
  console.warn('===================');

  return {
    entry: {
      index: [SRC_DIR + '/index.js'],
    },
    node: {
      child_process: 'empty',
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js',
      chunkFilename: '[name].bundle.js?[chunkhash]',
      publicPath: '/',
    },
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env', 'stage-0'],
            },
          },
        },
        {
          test: /\.html$/,
          loader: 'html-loader',
        },
        {
          test: /\.(scss)$/,
          use: ['css-hot-loader'].concat(
            extractSCSS.extract({
              fallback: 'style-loader',
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    alias: { '../img': '../public/img' },
                  },
                },
                {
                  loader: 'sass-loader',
                },
              ],
            })
          ),
        },
        {
          test: /\.css$/,
          use: extractCSS.extract({
            fallback: 'style-loader',
            use: 'css-loader',
          }),
        },
        {
          test: /\.(png|jpg|jpeg|gif|ico)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: './img/[name].[hash].[ext]',
              },
            },
          ],
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          loader: 'file-loader',
          options: {
            name: './fonts/[name].[hash].[ext]',
          },
        },
      ],
    },
    plugins: [
      new webpack.EnvironmentPlugin({
        NODE_ENV: env.NODE_ENV,
      }),
      new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
      extractCSS,
      extractSCSS,
      new HtmlWebpackPlugin({
        hash: true,
        inject: true,
        template: './public/index.html',
      }),
      new CopyWebpackPlugin([{ from: './public/img', to: 'img' }], {
        copyUnmodified: false,
      }),
    ],
  };
};

[rohmanhm]

I fixed my issue by disabling code split.