truffle-box / react-box

Truffle, Webpack and React boilerplate.

React Truffle Box

This box comes with everything you need to start using Truffle to write, compile, test, and deploy smart contracts, and interact with them from a React app.

Installation

First ensure you are in an empty directory.

Run the unbox command using 1 of 2 ways.

# Install Truffle globally and run `truffle unbox`
$ npm install -g truffle
$ truffle unbox react

# Alternatively, run `truffle unbox` via npx
$ npx truffle unbox react

Start the react dev server.

$ cd client
$ npm start

From there, follow the instructions on the hosted React app. It will walk you through using Truffle and Ganache to deploy the SimpleStorage contract, making calls to it, and sending transactions to change the contract's state.

FAQ

• How do I use this with Ganache (or any other network)?

  The Truffle project is set to deploy to Ganache by default. If you'd like to change this, it's as easy as modifying the Truffle config file! Check out our documentation on adding network configurations. From there, you can run truffle migrate pointed to another network, restart the React dev server, and see the change take place.

• Where can I find more resources?

  This Box is a sweet combo of Truffle and Webpack. Either one would be a great place to start!

react-box's Issues

Issue when using 'truffle unbox react'

I have run the "truffle unbox react" command in PowerShell on 2 independent systems, and both return the following error. Not too sure what needs to be done in such a situation.

Issue when using web3.eth.fromWei

I keep getting this weird bug where I am calling web3.eth.fromWei:

getOneTimecontribution() {
singleContract.setProvider(this.state.web3.currentProvider)
var contractInstance;

this.state.web3.eth.getAccounts((error, accounts) => {
  singleContract.at(this.props.chosenContract).then((instance) => {
    contractInstance = instance;
    return contractInstance.getOneTimecontribution.call();
  }).then((result) => {
    console.log(result);
    let getOneTime = this.state.web3.eth.fromWei(result, "ether");
    console.log(getOneTime);
  })
})

}

And then I get an error that is the following:

Uncaught (in promise) TypeError: _this10.state.web3.eth.fromWei is not a function

I think this is a truffle box issue because I am using the same code in a js test script and it works properly.

truffle test - fails

In your repository you have removed the MetaCoin.sol but left the tests
TestMetaCoin.sol
metacoin.js

Add License

Please add a LICENSE file so that others can legally use this. Thanks 😄

ripemd160 is not supported (we accept pull requests)

I get this issue when using eth-lightwallet.

This is caused in createHash of crypto-browserify, which is a dependacy of node-libs-browser.
node-libs-browser is a dependency of webpack and therefor I suggest updating the current version of webpack 1.14.0 to a newer one.

The reason for this is because the newer webpack releases pulls in a newer version of node-libs-browser, which solves the error.

Compilation failure because of a deprecation warning from Migrations.sol:11:3:

Issue

When I try to compile react-box tutorial, I get failed to compile because of a warning from Migrations.sol:11:3

I made a pull request for this issue: #57

Expected Behavior

you compile with truffle successfully

Actual Behavior

When you compile with truffle, this compilation warning encountered:

Warning: Defining constructors as functions with the same name as the contract is deprecated. Use "constructor(...) { ... }" instead.
  function Migrations() public {
  ^ (Relevant source part starts here and spans across multiple lines).

Steps to Reproduce the Problem

1. run truffle unbox react-box
2. run truffle compile
3. get the warning from Migrations.sol:11:3:

Environment

Operating System: macOS high Sierra 10.13.3
Ethereum client: Ganache
Truffle version (truffle version): v4.1.11 (core: 4.1.11)
Solidity version: Solidity v0.4.24 (solc-js)
node version (node --version): v10.3.0
npm version (npm --version): 6.1.0

Error: ENOENT: no such file or directory, stat './migrations'

Windows 10.
NPM 3.10.10
Truffle v3.4.6 (core: 3.4.6)
Solidity v0.4.13 (solc-js)

When trying to run truffle migrate throws error:

Using network 'development'.

Error: ENOENT: no such file or directory, stat './migrations'
    at Error (native)

I removed row migrations_directory: "./migrations" from truffle.js and after that runs through.

Can't find injected web3 using ./utils/getWeb3.js

The latest commit that changes how the web3 object is handled seems to break things for me. It does not see the injected web3 object and defaults to the local one every time, no matter which network I connect MetaMask to.

OS: Mac 10.12.5
Browser: Chrome

I'm a newb to React, so forgive me, but my sense was that there was something amiss with the lifecycle hooks and waiting for the load event. I tried changing the code in app.js to make a button that would only call getWeb3 when clicked, but that failed even more, so the issue is definitely with the getWeb3.js file. I'm just not sure how to edit it to get it to pick up the injected web3 at the right time...

npm run start fails to start.

Following the setup instructions in the readme file.

npm run start fails to start. Returns:
npm ERR! missing script: start

Instructions should specify that one needs to run npm run start from within the client directory.

Upgrade to web3 1.0 and ES6

I started a project with this scaffold. While it works well, an older version of web3 is injected in my unit test. Also, I cannot import ES6 modules in them.

I'd expect the unit tests to be structured more like this: http://truffleframework.com/docs/getting_started/solidity-tests

How would I attempt to upgrade my project? I tried upgraded to ES6 like this: https://ethereum.stackexchange.com/questions/21210/syntaxerror-unexpected-token-import-on-truffle-test. However, this seems to cause some conflict in the Dapp with React expecting a different Babel config.

npm start right after unboxing fails to compile

With the following error:

Failed to compile.

Error in ./src/App.js
Module not found: ../build/contracts/SimpleStorage.json in /proj/src

 @ ./src/App.js 14:21-69

Module not found: Can't resolve 'bignumber.js' [FIX]

I have faced this error before whilst using the new updated version of react-box;

Module not found: Can't resolve 'bignumber.js' in 
'/Users/sxg/Desktop/exampleProject/client/node_modules/truffle-contract/lib'

It seems that the version provided for truffle-contract is incorrect in the client/package.json file;

"truffle-contract": "^4.0.0-next.0",

Where this is quite incorrect, as there is only a current version of 3.0.6 as stated on the npm repo so it should be as so;

"truffle-contract": "^3.0.6",

Everything should work as so, once applied!

Can't build client folder.

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?

Problem migrating without first deleting build folder

I get the following error when running truffle migrate (also with --reset option).

Running migration: 1_initial_migration.js
fs.js:126
    throw err;
    ^

Error: EISDIR: illegal operation on a directory, read
    at Object.fs.readSync (fs.js:614:3)
    at tryReadSync (fs.js:454:20)
    at Object.fs.readFileSync (fs.js:495:19)
    at FS.getContractName (...../.nvm/versions/node/v10.1.0/lib/node_modules/truffle

To solve this I delete the build folder before migrate, but not necessarily the best solution if you have items in your build you'd like to keep (such as old network deploys to different networks).

Command 'truffle unbox react' not working.

With:

• Linux Fedora 27
• Node 8.9.4
• Truffle 4.0.4

And these commands:

mkdir truffle-box-example
cd truffle-box-example
truffle unbox react

I got this weird error:

vjE0FxA= but got sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==. (2069 bytes)
npm WARN registry Using stale package data from https://registry.npmjs.org/ due to a request error during revalidation.
make: g++: Command not found
make: *** [keccak.target.mk:113: Release/obj.target/keccak/src/addon.o] Error 127
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/mlima/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Linux 4.14.11-300.fc27.x86_64
gyp ERR! command "/home/mlima/.nvm/versions/node/v8.9.4/bin/node" "/home/mlima/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/mlima/Projects/truffle-box-example/node_modules/keccak
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] rebuild: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] rebuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mlima/.npm/_logs/2018-01-10T18_41_44_213Z-debug.log
make: g++: Command not found
make: *** [copied_files.target.mk:22: Release/obj.target/copied_files.node] Error 127
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/home/mlima/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:258:23)
gyp ERR! stack     at emitTwo (events.js:126:13)
gyp ERR! stack     at ChildProcess.emit (events.js:214:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
gyp ERR! System Linux 4.14.11-300.fc27.x86_64
gyp ERR! command "/home/mlima/.nvm/versions/node/v8.9.4/bin/node" "/home/mlima/.nvm/versions/node/v8.9.4/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/mlima/Projects/truffle-box-example/node_modules/scrypt
gyp ERR! node -v v8.9.4
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok 
npm WARN The package dotenv is included as both a dev and production dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/mlima/.npm/_logs/2018-01-10T18_41_47_599Z-debug.log

    at ChildProcess.exithandler (child_process.js:275:12)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

Any ideas?

cannot import `web3` into migration

for some reason, I cannot understand why web3 is not found if I require it into deploy_contracts file

truffle - reactbox - heroku deployment error nginx: [emerg] invalid number of arguments in "root" directive in ./config/nginx.conf:40

Hi,
I am facing issue with deployment on heruku.
I did not modify a single line of code, using Linux ubuntu and node js 8.9. Truffle v4.0.4 (core: 4.0.4) Solidity v0.4.18 (solc-js)​
Here are list of commands I run to deploy on heroku
mkdir test
cd test
truffle unbox react (this is as per guidence at reactbox https://github.com/mars/create-react-app-buildpack)
git init
heroku create pratikmrpv --buildpack https://github.com/mars/create-react-app-buildpack.git

git add .
git commit -m 'first commit'
git push heroku master
heroku open
The application does not run shows message
" Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. "
Here is complete log.
https://www.dropbox.com/s/x1mm0o2nc3xsbnj/heroku%20error%20log.txt?dl=0

before runing those commands I have added below code in static.json
{
"root": "build_webpack /"
}
as suggested by the guide.
https://medium.com/taipei-ethereum-meetup/ethereum-dapp-tutorial-push-button-cae3810086a4
You can translate it to English via google translate.

thank you
​​

SyntaxError: Unexpected token export

Hello,

I tried add zeppelin-solidity(1.7.0) to the react-box and run the test cases. I modified test/simplestorage.js to below

import ether from 'zeppelin-solidity/test/helpers/ether';

var SimpleStorage = artifacts.require("./SimpleStorage.sol");

contract('SimpleStorage', function(accounts) {

  it("...should store the value 89.", function() {
    return SimpleStorage.deployed().then(function(instance) {
      simpleStorageInstance = instance;

      return simpleStorageInstance.set(89, {from: accounts[0]});
    }).then(function() {
      return simpleStorageInstance.get.call();
    }).then(function(storedData) {
      assert.equal(storedData, 89, "The value 89 was not stored.");
    });
  });

});

When I run the truffle test command, it throws Unexpected token export error

11:31 $ truffle test test/simplestorage.js
Using network 'development'.

/Users/jacktang/Code/genome_block/node_modules/zeppelin-solidity/test/helpers/ether.js:1
(function (exports, require, module, __filename, __dirname) { export default function ether (n) {
                                                              ^^^^^^

SyntaxError: Unexpected token export
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:537:28)
    at Module._extensions..js (module.js:584:10)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/jacktang/Code/genome_block/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)

How can I fix this?

Is there any requirement for python2.7 on package <[email protected]>

env: Windows 10
I have installed python3.6 successfully on my laptop.
but still error showed while npm installing.

npm WARN deprecated [email protected]: ethereumjs-testrpc has been renamed to ganache-cli, please use this package from now on.

> [email protected] preinstall C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\scrypt
> node node-scrypt-preinstall.js


> [email protected] install C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\scrypt
> node-gyp rebuild


C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\scrypt>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "C:\Users\renderio\AppData\Local\Programs\Python\Python36-32\python.EXE", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:483:19)
gyp ERR! stack     at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:508:16)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:284:29
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:152:21)
gyp ERR! System Windows_NT 10.0.15063
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\scrypt
gyp ERR! node -v v8.9.3
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm WARN Error: EPERM: operation not permitted, scandir 'C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\fsevents\node_modules\getpass\node_modules'
npm WARN  { Error: EPERM: operation not permitted, scandir 'C:\Users\renderio\Desktop\react-box-master\react-box-master\node_modules\fsevents\node_modules\getpass\node_modules'
npm WARN   stack: 'Error: EPERM: operation not permitted, scandir \'C:\\Users\\renderio\\Desktop\\react-box-master\\react-box-master\\node_modules\\fsevents\\node_modules\\getpass\\node_modules\'',
npm WARN   errno: -4048,
npm WARN   code: 'EPERM',
npm WARN   syscall: 'scandir',
npm WARN   path: 'C:\\Users\\renderio\\Desktop\\react-box-master\\react-box-master\\node_modules\\fsevents\\node_modules\\getpass\\node_modules' }npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\renderio\AppData\Roaming\npm-cache\_logs\2018-01-12T07_33_32_185Z-debug.log

I wonder whether it requires python2.7 cause on the certain path i found the python.exe exactly. It didnt affect anything till now thought.

truffle-expect

Error: Cannot find module 'truffle-expect'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)

Access images assets

Hello,

I have some images assets, where should I put the resources and how to access them?

Expected import directive or contract definition. pragma solidity ^0.4.24;

not all tests are passing out of the box

npm run test fails at scripts/test.js with the Error:

Test suite failed to run
SyntaxError: Identifier 'jest' has already been declared
    at Runtime._execModule (node_modules/jest-runtime/build/index.js:442:13)
          at <anonymous>

migrations files

This is in regards to all migrations files across all Truffle Boxes.

In the Truffle Documentation it states – "The name specified should match the name of the contract definition within that source file. Do not pass the name of the source file, as files can contain more than one contract."

Yet in all of these boxes, it shows the file name.

Perhaps I am confused, but if I am right that this is the wrong way to do it based on the documentation, I think this is very problematic as I've seen projects in "the wild", that do this as well; but, they are even doing this on files with multiple contracts!

I believe that (unfortunately) most people use the Truffle Boxes as a template as opposed to thoroughly reading the documentation, so I propose that all of the migrations files be changed

Cannot unbox due to node-sass download error

Trying to run "truffle unbox react" on Windows 10. Among a number of errors/warnings is the following:

Cannot download "https://github.com/sass/node-sass/releases/download/v3.13.1/win32-x64-57_binding.node":...

It appears this is an invalid URL and not available on the node-sass project.

Can't Find Contract - Symlink Doesn't Work on Windows!

Hello,
after the recent commits the react box is not working on windows.

After compiling and running 'npm run start' from the client folder I get the following error:
(This was not mentioned in the official documentation but in the repository of the new contributor - https://github.com/adrianmcli/truffle-react )

After I ran the client i got this error:

Failed to compile ./src/App.js Module not found: Can't resolve './contracts/SimpleStorage.json' in 'F:\reactBox\client\src'

I understand that the issue is the creation of a symlink and so I tried running the 'npm run link-contracts:win32' with no luck.

It gave me an error.

I can confirm that this commit is working properly -> https://github.com/truffle-box/react-box/tree/9fb7ed6c0253c71b574bf160072bc7eb9fdd0336

How can I fix this? And if it can't be fixed is there a way to use truffle unbox to deploy the above commit directly?

problem when running truffle unbox react

truffle unbox react Er: Command failed: npm install

I have a new folder and I run truffle unbox react
it shows me an error

My NODE version v9.3.0
My NPM v5.6.0

Can you pls help me.

Error: stdout maxBuffer exceeded

I got this error when l download the react-box.How to solve it? plz.
truffle unbox react
Downloading...
Unpacking...
Setting up...
Error: stdout maxBuffer exceeded
at Socket.onChildStdout (child_process.js:328:14)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at addChunk (_stream_readable.js:263:12)
at readableAddChunk (_stream_readable.js:246:13)
at Socket.Readable.push (_stream_readable.js:208:10)
at Pipe.onread (net.js:597:20)

ENOENT: no such file or directory

FAIL src/App.test.js
● Test suite failed to run

ENOENT: no such file or directory, stat '/home/vagrant/DAPPS/react-demo/truffle-box-react/\config\polyfills.js'
    at Error (native)

  at Object.fs.statSync (fs.js:987:18)
  at Object.statSync (node_modules/graceful-fs/polyfills.js:297:22)

Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 4.799s
Ran all test suites related to changed files.

Watch Usage
› Press a to run all tests.
› Press o to only run tests related to changed files.
› Press p to filter by a filename regex pattern.
› Press q to quit watch mode.
› Press Enter to trigger a test run.
vagrant@vagrant-ubuntu-trusty-64:~/DAPPS/react-demo/truffle-box-react$

Error: EXDEV: cross-device link not permitted, rename

does anyone know how to fix this? full error looks like so:

$ truffle unbox react
Downloading...
events.js:163
throw er; // Unhandled 'error' event
^

Error: EXDEV: cross-device link not permitted, rename '/home/davekaj/Desktop/Crypto-Dev/truffle/truffle-react-box/1499396196726-8478197198597666/react-box-master' -> '/tmp/tmp-8865HTmCImGeZVr'

An error occurred when use 'npm run test'

xialiangdeMacBook-Air:re_demo xialiang$ npm run start
npm ERR! path /Users/xialiang/re_demo/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/xialiang/re_demo/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/xialiang/.npm/_logs/2018-11-17T11_22_09_643Z-debug.log

Missing packages

Fresh unbox on OSX:

> npm run start
Failed to compile.

Error in ./src/index.js
Module build failed: Error: Failed to load plugin babel: Cannot find module 'eslint-plugin-babel'
    at Array.forEach (native)
 @ multi main

README unclear, truffle.js file missing gas

Here's a PR. I wasn't able to get this working out of the box.
master...fiveinfinity:master

Possible memory leak warning

I get this warning in the Chrome console on startup:

Error: Possible EventEmitter memory leak detected. 11 data listeners added. Use emitter.setMaxListeners() to increase limit

stored default value is 0 not 5 as expected

Please note I've made no modifications.
I've only followed the first 5 points in your Installation guide

contract deployment errors when using express server

I am running my project successfully with contracts deployed to a local testrpc using

truffle compile
truffle migrate
npm run start

Then when I do npm run build and set up my express server to load index.html from build_webpack the app loads and throws this error:

Uncaught (in promise) Error: Token has not been deployed to detected network (network/artifact mismatch)

The contracts are deployed and the web3 httpProvider is connecting correctly to my local testRPC. Everything runs perfectly when doing npm run start and not serving from express.

Will appreciate any help.

Need for ejecting create-react-app

I tried using this box this past weekend at ETHWaterloo but ended up just cherry picking the code I needed instead. There were 2 mains reasons for this:

1. We had already committed some contract code to a bare truffle init project and couldn't use the unbox command as a result
2. After looking at the repo I wanted to avoid ejecting create-react-app

The solution we came up with was to create a new react app in a client directory inside the truffle app. This solves the issue of create-react-app and truffle both using a build directory in the same folder. We did run into an issue that create-react-app doesn't allow importing code from outside of its own src directory which we solved with a symlink.

Here is our project for reference:
https://github.com/kevinhughes27/ticket-wicket
src directory with symlink https://github.com/kevinhughes27/ticket-wicket/tree/master/client/src

Were there any other reasons for ejecting create-react-app? It will be easier to maintain the box if create-react-app doesn't need to be ejected.

TypeError: __WEBPACK_IMPORTED_MODULE_2__utils_getWeb3__.a.then is not a function

hello.. i have a very very BBBig problem!

when i compile my project on this template, i got a Error like this

somebody help ..! plz

truffle unbox react bignumber.js error

I experienced this error while trying to unpack the react box. Also when I try to unpack other truffle boxes.

truffle.cmd unbox react
Downloading...
Unpacking...
Setting up...
Error: Command failed: npm install
npm WARN deprecated [email protected]: ethereumjs-testrpc has been renamed to ganache-cli, please use this package from now on.
npm WARN deprecated [email protected]: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm ERR! Error while executing:
npm ERR! C:\Program Files\Git\cmd\git.EXE ls-remote -h -t https://github.com/debris/bignumber.js.git
npm ERR!
npm ERR! fatal: unable to access 'https://github.com/debris/bignumber.js.git/': The requested URL returned error: 504
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\uaeei\AppData\Roaming\npm-cache_logs\2018-07-10T07_34_58_374Z-debug.log

at ChildProcess.exithandler (child_process.js:275:12)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

Does someone else experience this issue or found a solution?

MetaMask support

When running this box the following warning shows in the console:

ATTENTION: In an effort to improve user privacy, MetaMask will stop exposing user accounts to dapps by default beginning November 2nd, 2018. Dapps should call provider.enable() in order to view and use accounts. Please see https://bit.ly/2QQHXvF for complete information and up-to-date example code.

Uncaught (in promise) Error: Contract has not been deployed to detected network (network/artifact mismatch)

Hey guys, I followed your instructions and got this result:

Uncaught (in promise) Error: Contract has not been deployed to detected network (network/artifact mismatch)

truffle unbox react
compile
migrate

What am I did wrong? Is this project dead?

Bug in unboxing react

When following the instructions on this page: http://truffleframework.com/boxes/react and running the command: truffle unbox react on Truffle v4.0.0-beta.2 (core: 4.0.0-beta.2), I got the following errors.

This is an Administrator account.

Error: Command failed: npm install
npm WARN deprecated [email protected]: ? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN deprecated [email protected]: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated [email protected]: to-iso-string has been deprecated, use @segment/to-iso-string instead.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
gyp ERR! build error
gyp ERR! stack Error: C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\myuser\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:258:23)
gyp ERR! stack at emitTwo (events.js:125:13)
gyp ERR! stack at ChildProcess.emit (events.js:213:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 6.1.7601
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\Administrator\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Development\Ethereum\react\node_modules\scrypt
gyp ERR! node -v v8.8.1
gyp ERR! node-gyp -v v3.6.2
gyp ERR! not ok
npm WARN Error: EPERM: operation not permitted, scandir 'D:\Development\Ethereum\react\node_modules\fsevents\node_modules'
npm WARN { Error: EPERM: operation not permitted, scandir 'D:\Development\Ethereum\react\node_modules\fsevents\node_modules'
npm WARN stack: 'Error: EPERM: operation not permitted, scandir 'D:\Development\Ethereum\react\node_modules\fsevents\node_modules'',
npm WARN errno: -4048,
npm WARN code: 'EPERM',
npm WARN syscall: 'scandir',
npm WARN path: 'D:\Development\Ethereum\react\node_modules\fsevents\node_modules' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\myuser\AppData\Roaming\npm-cache_logs\2017-10-29T09_59_44_627Z-debug.log

at ChildProcess.exithandler (child_process.js:272:12)
at emitTwo (events.js:125:13)
at ChildProcess.emit (events.js:213:7)
at maybeClose (internal/child_process.js:927:16)
at Socket.stream.socket.on (internal/child_process.js:348:11)
at emitOne (events.js:115:13)
at Socket.emit (events.js:210:7)
at Pipe._handle.close [as _onclose] (net.js:557:12)

stored value was not set

tried to run this example but failed. The stored value is: 0 (i.e. initial state) instead of 5 (a setting).

Difference between Metamask Enabled and Disabled

I ran the example with Metamask disabled and the stored value is correctly shown as 5.

However when I enable the Metamask plugin in Chrome, the Metamask window appears asking for the transaction to be approved, before the SimpleStorage method set is called.

simpleStorageInstance.set(5, {from: accounts[0]})

Can someone please explain why the transaction is automatically approved/signed when Metamask is disabled, but not when Metamask is enabled?

[Vulnerability] Remote code execution vulnerability in react-scripts > react-dev-utils

There is a known remote code execution vulnerability in react-dev-utils, a dependency of react-scripts

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Remote Code Execution                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ react-dev-utils                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ react-scripts                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ react-scripts > react-dev-utils                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/695                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

Can there remove client folder and move files in client folder to root fodler?

when i using command truffle unbox react, i get the file struct with client folder which contains all the react files. when i using truffle compile and truffle migrate it works well. But when i using command cd client && npm run start it shows bellow error in chrome:

Failed to compile
./src/App.js
Module not found: Can't resolve './contracts/SimpleStorage.json' in 'D:\ipfs\ipfsProject\eth-ipfs-project2\client\src'

i know it is because that SimpleStorage.json is not in such project. So why not remove client folder?

`truffle-solidity-loader` has security vulnerability

Referring over here from truffle 941. It looks like the loader was never brought into the suite, and it's not receiving ongoing maintenance. Simplest solution might be to try to bump its deps? @DiscRiskandBisque What do you think?

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ growl                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > solidity-parser > mocha > growl    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/146                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ growl                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > mocha > growl            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/146                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ critical      │ Command Injection                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ growl                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > solidity-parser > mocha  │
│               │ > growl                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/146                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimatch                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > solidity-parser > mocha > glob >   │
│               │ minimatch                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/118                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimatch                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > mocha > glob > minimatch │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/118                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ high          │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimatch                                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > solidity-parser > mocha  │
│               │ > glob > minimatch                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/118                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > solidity-parser > mocha > debug    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > finalhandler > debug     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > mocha > debug            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ truffle-solidity-loader [dev]                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ truffle-solidity-loader > truffle > solidity-parser > mocha  │
│               │ > debug                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘

[!] 29 vulnerabilities found - Packages audited: 29850 (29706 dev, 267 optional)
    Severity: 22 low | 1 moderate | 3 high | 3 critical

getWeb3 results.web3 has undefined defaultAccount

The web3 returned by the getWeb3 utils functions returns a web3 that has undefined eth.defaultAccount. Really not understanding why?

Issues migrating truffle box from React 15.4.2 to React 16.4.1. seeking tips.

(Using Metamask with Ganache for development)

When updating the version of React and react-dom from 15.4.2 to 16.4.1 , it creates issues with transactions that do not happen when I keep the environment as I cloned from the repo. The issue is gas limit defaults to 0 and when manually adjusted to a reasonable gas limit it generates a rpc error as follows:

inpage.js:1 MetaMask - RPC Error: Error: Error: [ethjs-rpc] rpc error with payload {"id":1762257545694,"jsonrpc":"2.0","params":["0xf8b415850af16b16008301e24094eb09f1371315c54bf0812e5ad3081636e30d26f388016345785d8a0000b84452da61bb00000000000000000000000000000000000000000000000000000000000003330000000000000000000000000000000000000000000000000000000000000001822d45a03a4ad3df24eebbcb262ed18797ca6d5d0b8513767b2bdc0bf057a25a6419b616a04d4b8572d0a2e238a464a377832b1d5ae9a55e7b818d61925f4ec222f45a3ce1"],"method":"eth_sendRawTransaction"} Error: VM Exception while processing transaction: revert

Even more confusing is that when I switch accounts on metamask, the gas limit will sometimes be set correctly and the transaction will work normally, but this only occurs usually after a migration.

Any tips for how to properly migrate this truffle box to the latest version of react and have it work?