search

truffle-box / react-box

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

truffle unbox react not working #135

Closed NicholasJonesCode closed 2 years ago

NicholasJonesCode commented 3 years ago

Hey Team,

I installed the latest truffle on my computer (Artix Linux) and I tried to unbox the react template, and I got a very long string of various errors, and I cannot make sense of it. I had truffle installed before and the unbox worked just fine, not even a month ago, but now suddenly it doesn't. Could someone please take a look? Highly appreciated, thanks in advance.

Output: https://pastebin.com/PB6CzaKR

Yes, I did unbox in an empty directory as well. I also uninstalled and reinstalled python and it still doesnt work.

mesaque commented 3 years ago

same problem here ... apparently no one is caring about this project anymore

mesaque commented 3 years ago

@NicholasJonesCode i don't know if it helps you but i could make it working in a docker container:

image: node:10.24.0-alpine3.11 apk update apk add --no-cache python3 py3-pip git npm install -g truffle truffle unbox react

NicholasJonesCode commented 3 years ago

@NicholasJonesCode i don't know if it helps you but i could make it working in a docker container:

image: node:10.24.0-alpine3.11 apk update apk add --no-cache python3 py3-pip git npm install -g truffle truffle unbox react

@mesaque thanks man, might try this

Seems that even though there is compilation error, it is just 1 of the packages (sha3@1.2.3) failing to compile. Seems that everything else downloads as normal.

Here's what i did to make it work:

  1. truffle unbox react
  2. cd client
  3. npm install sha3@1.2.4
  4. cd .. (to go back to the main folder)
  5. truffle migrate
  6. cd client
  7. npm run start

There is some compilation errors after this with App.js ("contract does not have address yet"). I think it has something to do with "this.setState" not working properly. I think it might be deprecated, not sure. I recommend you do something like this to structure your App.js file better: https://github.com/TestEHMex/StarDucks/blob/master/client/src/App.js This guy modified his to get objects from "this" instead of from the state. I do the same thing for my project.

Let me know if you have any other questions. I spent too much time on this haha

cds-amal commented 3 years ago

Apologies for the late reply @NicholasJonesCode and thanks for sharing your workaround. We don't normally check Truffle boxes during our normal weekly triages and perhaps we should. Sorry you didn't get timely support here.

I've wasn't able to reproduce this issue and I wonder if the dependabot PRs may have fixed it. Can you verify if it is still an issue?

DeveloperAlly commented 3 years ago

Some of the issues happen because we're trying to access a file outside of the /src directory from a creat-react-app. This is not supported. Some suggestions - migrating the front-end to run off next (server side rendering) instead of create react app probably. Either that or ejecting CRA / using react-app-rewired to allow the path.

Here's a next example: https://github.com/DeveloperAlly/truffle-react

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] commented 2 years ago

This issue has been closed, but can be re-opened if further comments indicate that the problem persists. Feel free to tag maintainers if there is no reply to further comments.

Siddharth-sing commented 1 year ago

I have a solution where we don't have to downgrade the node version and truffle-box react will be up and running. We will go old school.

Now we have to do two major things, first one is to compile & migrate the smart contracts and the next is to install the npm dependencies (because npm module doesn't go in a repo. instead package.json have all the dependencies required written.)