Error in production enviroment

[luisandia]

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?

[wuweiweiwu]

can you post your webpack configs?

[luisandia]

My webpack.config

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');
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')

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

module.exports = (env = {}) => {
  return {
    entry: {
      index: [SRC_DIR + '/index.js']
    },
    output: {
      path: BUILD_DIR,
      filename: '[name].bundle.js'
    },
    // watch: true,
    devtool: env.prod ? 'source-map' : 'eval',//'cheap-module-eval-source-map',
    devServer: {
      contentBase: BUILD_DIR,
      //   port: 9001,
      compress: false,
      hot: false,
      open: true
        },
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
        {
          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: 'url-loader'
              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]'
          }
        },
        {
          test: /\.svg$/,
          include: [/react-images-upload/],
          loader: 'file-loader',
          options: {
              name: '[name].[ext]?[hash]'
          }
      }
      ]
    },
  resolve: {
    // you can now require('file') instead of require('file.coffee')
    extensions: ['.js', '.jsx'] 
  },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
      new webpack.NamedModulesPlugin(),
      extractCSS,
      extractSCSS,
      new HtmlWebpackPlugin(
        {
          inject: true,
          template: './public/index.html'
        }
      ),
      new CopyWebpackPlugin([
          {from: './public/img', to: 'img'}
        ],
        {copyUnmodified: false}
      ),
       new ErrorOverlayPlugin(),
    ]
  }
};`


**package.json**

{
  "name": "@coreui/react",
  "version": "1.0.10",
  "description": "Open Source Bootstrap Admin Template",
  "author": "Łukasz Holeczek",
  "homepage": "http://coreui.io",
  "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "6.24.1",
    "copy-webpack-plugin": "4.3.1",
    "css-hot-loader": "1.3.6",
    "css-loader": "0.28.9",
    "error-overlay-webpack-plugin": "^0.1.5",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.6",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "2.30.1",
    "node-sass": "4.7.2",
    "rimraf": "2.6.2",
    "sass-loader": "6.0.6",
    "source-list-map": "2.0.0",
    "style-loader": "0.20.1",
    "uglify-js": "3.3.9",
    "url-loader": "0.6.2",
    "webpack": "3.10.0",
    "webpack-dev-server": "2.11.1"
  },
  "dependencies": {
    "animate.css": "^3.6.1",
    "auth0-js": "^9.5.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "bootstrap": "4.0.0",
    "chart.js": "2.7.1",
    "font-awesome": "4.7.0",
    "history": "4.7.2",
    "jquery": "^3.3.1",
    "jquery.easing": "^1.4.1",
    "moment-timezone": "^0.5.14",
    "rc-time-picker": "^3.3.1",
    "react": "^16.3.2",
    "react-animated-css": "^1.0.4",
    "react-bootstrap-table": "^4.3.1",
    "react-bootstrap-toggle": "^2.2.6",
    "react-chartjs-2": "2.7.0",
    "react-ckeditor-component": "^1.0.7",
    "react-data-components": "^1.2.0",
    "react-dom": "16.2.0",
    "react-dropzone": "^4.2.9",
    "react-flip-move": "^2.9.14",
    "react-google-maps": "^9.4.5",
    "react-image-gallery": "^0.8.7",
    "react-images-upload": "^1.0.7",
    "react-infinite-scroll-component": "^4.0.3",
    "react-paypal-express-checkout": "^1.0.4",
    "react-redux": "^5.0.7",
    "react-router-dom": "4.2.2",
    "react-s-alert": "^1.4.1",
    "react-select": "^1.2.1",
    "react-sortable-tree": "^2.1.2",
    "react-sortable-tree-theme-full-node-drag": "^1.1.0",
    "react-tooltip": "^3.5.1",
    "react-transition-group": "2.2.1",
    "reactstrap": "^6.1.0",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-promise": "^0.5.3",
    "redux-react-session": "^2.3.1",
    "redux-thunk": "^2.2.0",
    "shortid": "^2.2.8",
    "simple-line-icons": "2.4.1",
    "styled-components": "^3.2.6",
    "styled-css-grid": "^0.8.2",
    "superagent": "^3.8.2"
  },
  "scripts": {
    "dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
    "start": "webpack-dev-server --progress --color --inline --env.dev",
    "build": "webpack -p --progress --env.prod",
    "clean": "rimraf ./build"
  },
  "engines": {
    "node": ">= 8.9.4",
    "npm": ">= 5.6.0"
  }
}

[wuweiweiwu]

@luisandia Cool, Thanks!

[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,
      }),
    ],
  };
};

[norambuywana]

Is there any update on this issue?

[wuweiweiwu]

try with 2.6.0

[rohmanhm]

I fixed my issue by disabling code split.