Implementing Reactjs on Kintone

1

Dear Developers,

I’ve been tired to implement reactjs on Kintone App as its UI component based on this quick-start guide:

https://kintone.github.io/kintone-ui-component/Getting-Started/QuickStart-React/

I’ve been followed every instructions there and the result was error like this:

…
Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
…

I’ve also tried to install uglifyjsplugin, tried to change webpack-cli version but still resulted the same error.

Is there any guide or any way to simply implement reactjs on kintone app? Any answer would be appreciated, thank you

2

I guess you cannot handle the version of webpack and its configurations. 

I recommend that you’ll start with the simple npm project without “create-react-app” like this. 

If you want to minimize/uglify, you can also do that with the productionmodeof webpack4.

3

Plugin “webpack.optimize.UglifyJsPlugin”, which existed in Webpack 3, had been removed in Webpack 4 per the link below, so the error incurred.

Migrating from Webpack 3 to 4 

https://blog.appoptics.com/migrating-webpack-3-to-4/

Therefore, to use Webpack 4, you will need to change the way to specify “UglifyJsPlugin” by editing two areas and add one line as below.

  1. from

    presets: [‘react’,‘env’]

to

presets: ['react-app','@babel/preset-env']

 

  1. from

 

plugins: [
            new webpack.optimize.UglifyJsPlugin({
                include: /\.min\.js$/,
                minimize: true
            })
        ]

to

optimization: {
            minimizer: [
                new UglifyJsPlugin({
                    include: /\.min\.js$/,
                })
            ]
        }

  1. add the following constant below “const path = require(‘path’)”

    const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)