truffle-box / react-box

Truffle, Webpack and React boilerplate.
https://truffle-box.github.io/
MIT License
736 stars 251 forks source link

Can't build client folder. #82

Closed Mizumaki closed 5 years ago

Mizumaki commented 5 years ago

When I execute yarn build in client folder , this error always occurred.

yarn build
yarn run v1.6.0
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/truffle-contract/lib/statuserror.js:14

Read more here: http://bit.ly/2tRViJ9

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

And the code in truffle-contract is this.

if(reason) reasonString = `Reason given: ${reason}.`;

How can I fix this?

Emerkof commented 5 years ago

@Mizumaki This happens because production webpack config doesn't process ES6 code.

As a quick fix I would suggest the following:

  1. Install babel-polyfill:

npm install --save @babel/polyfill

  1. Include this polyfill into node_modules/react-scripts/config/polyfills.js
'use strict';

if (typeof Promise === 'undefined') {
  // Rejection tracking prevents a common issue where React gets into an
  // inconsistent state due to an error, but it gets swallowed by a Promise,
  // and the user has no idea what causes React's erratic future behavior.
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

require('babel-polyfill'); <-- Add this line

// fetch() polyfill for making API calls.
require('whatwg-fetch');
Mizumaki commented 5 years ago

@Emerkof The advice you provide is really helpful.

This happens because production webpack config doesn't process ES6 code.

In fact, adding polyfill is not working and the error still occurs. I also tried to add require("@babel/polyfill"); which is the process suggested in babel official docs, but it's also not working.

However, thanks to your advice which provides the problem is webpack config, I notice trying updating react-scripts to a newer version (v2.0.5) might be helpful and it works well.

I'm really appreciate for your advice, thanks😆

luckyyang commented 5 years ago

upgrade react-scripts works, thanks @Mizumaki

yarn add react-scripts@2.0.5