Zabo SDK build error

[dragonheaven]

What SDK version are you using?

0.6.4

What technology and versions are you using that is causing issues with the SDK?

We are using React.js, and Node 8.13.0, npm version 6.4.1

Here is package.json { "private": true, "version": "1.2.0", "main": "", "scripts": { "clean": "rimraf dist/*", "copy": "copyfiles -f ./src/index.html ./dist && copyfiles -u 1 \"./src/static/**\" ./dist", "build": "npm run clean && npm run copy && webpack --progress --bail --env dist -p", "lint": "eslint ./src", "posttest": "npm run lint", "serve:dev": "webpack-dev-server --open --env dev", "serve:dist": "webpack-dev-server --open --env dist -p --progress", "start": "npm run serve:dev" }, "devDependencies": { "babel-core": "^6.23.1", "babel-eslint": "^7.2.1", "babel-loader": "^6.4.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-polyfill": "^6.23.0", "babel-preset-airbnb": "^2.0.0", "babel-preset-es2015-native-modules": "^6.6.0", "babel-preset-react": "^6.23.0", "babel-preset-stage-0": "^6.5.0", "babel-preset-stage-1": "^6.5.0", "babel-preset-stage-2": "^6.5.0", "bootstrap": "~4.0.0-alpha.6", "browser-sync": "^2.18.8", "copy-webpack-plugin": "^4.0.1", "copyfiles": "^1.2.0", "css-loader": "^0.28.0", "del": "^2.2.0", "eslint": "^3.19.0", "eslint-config-airbnb": "^14.1.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-react": "^6.10.3", "file-loader": "^0.11.1", "glob": "^7.0.0", "gulp": "^3.9.1", "gulp-load-plugins": "^1.2.2", "gulp-plumber": "^1.1.0", "gulp-pug": "^3.3.0", "gulp-util": "^3.0.7", "node-sass": "^4.5.2", "null-loader": "^0.1.1", "open": "0.0.5", "phantomjs-prebuilt": "^2.1.7", "rimraf": "^2.6.1", "sass-loader": "^6.0.2", "style-loader": "^0.16.1", "url-loader": "^0.5.8", "webpack": "^2.3.2", "webpack-dev-server": "^2.4.1", "yargs": "^7.0.1" }, "dependencies": { "axios": "latest", "classnames": "~2.2.5", "core-js": "~2.4.0", "echarts": "^3.5.1", "element-resize-event": "^2.0.9", "font-awesome": "~4.7.0", "jquery": "^3.2.1", "jquery-slimscroll": "~1.3.8", "material-ui": "~0.17.0", "prop-types": "latest", "rc-queue-anim": "^0.13.3", "react": "~15.4.2", "react-bootstrap-sweetalert": "^4.4.1", "react-dom": "~15.4.2", "react-hot-loader": "^3.0.0-beta.6", "react-redux": "^5.0.3", "react-router": "^3.0.2", "react-router-redux": "^4.0.8", "react-tap-event-plugin": "^2.0.1", "react-toastify": "^1.2.0", "redux": "~3.6.0", "redux-thunk": "^2.3.0", "zabo-sdk-js": "^0.6.4" }, "engines": { "node": ">=6.5.0", "npm": ">= 3" } }

What did you do?

npm i npm run build

What did you expect to see?

The build should be successful.

What did you see instead?

We are getting error from zabo sdk.

[cbdotguru]

I believe this will fix your build process. I added several options and believe this is the minimal working change, however, if you don't successfully build from this change, just let me know.

Inside of config/webpack/Dist.js add a babel loader rule to include all js files. So around line 57 change:

        this.config.module.rules.push(
            {
                test: /^.((?!cssmodule).)*\.(sass|scss)$/,
                loaders: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' }
                ]
            }
        )

to include the babel loader object. The final form should look like the following:

        this.config.module.rules.push(
            {
                test: /^.((?!cssmodule).)*\.(sass|scss)$/,
                loaders: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        "presets": [
                            "env",
                            "react",
                            "stage-3"
                        ],
                        "plugins": [["transform-class-properties", { "spec": true }], "transform-decorators-legacy"],
                        "babelrc": false
                    }
                }
            }
        )

[dragonheaven]

@Hackdom Thank you so much! it works.

[cbdotguru]

From Discord:

It seems we still have problem with webpack build of Zabo SDK. Adding account to Zabo is working well on dev mode but does not work at all on prod build.

[cbdotguru]

Issue was unrelated to the build.