truffle-box / drizzle-box

This box comes with everything you need to start using smart contracts from a react app with Drizzle. It includes drizzle, drizzle-react and drizzle-react-components to give you a complete overview of Drizzle's capabilities.
MIT License
309 stars 71 forks source link

TypeError: (0 , _drizzle.generateContractsInitialState) is not a function when trying to run freshly-unboxed Drizzle-box #24

Closed DmitryPasenko closed 6 years ago

DmitryPasenko commented 6 years ago

Hi! I'm new to web3 and truffle, but I've did everything as described in tutorial:

I have unboxed drizze-box I have ganache-cli running on localhost:8545 I have deployed needed contracts successfully ran webpack-server on localhost:3000 also my Metamask connected to localhost:8545 and shows a valid account from testrpc with right amount of ETH (99.675 ETH), considering small amount was spent when deploying those contracts. Now, the webpage on localhost:3000 shows nothing and throws this error: TypeError: (0 , _drizzle.generateContractsInitialState) is not a function

Any ideas what is wrong with that?

sajclarke commented 6 years ago

@DmitryPasenko the truffle box needs to be updated to latest version of drizzle so if you run npm update it will fix the issue. Make sure that you are also running metamask on localhost or else you'll get more errors

DmitryPasenko commented 6 years ago

@sajclarke Thanks! It works now! )

frostini commented 6 years ago

@sajclarke I was having the same issue and running the npm update seems to have fixed that issue; however, now I'm getting 'Erorr fetching network ID:' drizzle.js:8 followed by a 'Error: Returned error: TypeError: Failed to fetch' drizzle.js:8

frostini commented 6 years ago

I just switched the network on MetaMask to localhost:8545 and now I'm getting 'Error initializing Drizzle:'

frostini commented 6 years ago

I had to recompile and migrate the contracts again after I did the update :p working now !

djudjuu commented 6 years ago

Just want to confirm, for me changing the versions of drizzle, drizzle-react, drizzle-react-components from 1.0.1 to 1.1.0 in the package.json fixed the error.

chuckbergeron commented 6 years ago

Thanks @djudjuu ! I made your fix into a PR: #36

davidrhodus commented 6 years ago

ribbit. encountering this issue too. none of the above suggestions worked.

shivamsinha15 commented 6 years ago

FYI After running npm update and re-running compile and migrate I get the following error

drizzle.js:3 Uncaught Error: Cannot find module "deepmerge" at webpackMissingModule (drizzle.js:3) at webpackUniversalModuleDefinition (drizzle.js:3) at Object. (drizzle.js:10) at webpack_require (bootstrap 40a2ec58107a3e3bc3b9:555) at fn (bootstrap 40a2ec58107a3e3bc3b9:86) at webpackUniversalModuleDefinition (drizzle-react.js:2) at Object. (drizzle-react.js:10) at Object. (drizzle-react.js:1955) at webpack_require (bootstrap 40a2ec58107a3e3bc3b9:555) at fn (bootstrap 40a2ec58107a3e3bc3b9:86)

After installing deepmerge npm i deepmerge I get the following error:

drizzle.js:3 Uncaught Error: Cannot find module "is-plain-object" at webpackMissingModule (drizzle.js:3) at webpackUniversalModuleDefinition (drizzle.js:3) at Object. (drizzle.js:10) at webpack_require (bootstrap 688f42e37c382c1b5fbb:555) at fn (bootstrap 688f42e37c382c1b5fbb:86) at webpackUniversalModuleDefinition (drizzle-react.js:2) at Object. (drizzle-react.js:10) at Object. (drizzle-react.js:1955) at webpack_require (bootstrap 688f42e37c382c1b5fbb:555) at fn (bootstrap 688f42e37c382c1b5fbb:86)

After installing npm i is-plain-object I get the orginal error:

Uncaught

TypeError: (0 , _drizzle.generateContractsInitialState) is not a function

nickreynolds commented 6 years ago

@shivamsinha15 that is exactly what I'm seeing too.

shivamsinha15 commented 6 years ago

When you have a look at the actual drizzle repo package.json deepmerge and is-plain-object are dependencies

  "dependencies": {
    "deepmerge": "^2.1.0",
    "eth-block-tracker-es5": "^2.3.2",
    "is-plain-object": "^2.0.4",
    "redux": "^3.6.0",
    "redux-saga": "^0.15.3",
    "web3": "^1.0.0-beta.34"
  },

However when you check the webpack.config.js deepmerge and is-plain-object are external runtime dependencies:

  externals: {
    'eth-block-tracker': 'eth-block-tracker-es5',
    'redux': 'redux',
    'redux-saga': 'redux-saga',
    'web3': 'web3',
    'is-plain-object': 'is-plain-object',
    'deepmerge': 'deepmerge'
  } 

Therefore is it expected the boilerplate project created by truffle unbox drizzle should include these as dependencies in package.json ??. It seem to be missing from there. Could someone confirm if this in an oversight, if so I can submit a PR

package.json
{
  "name": "drizzle-box",
  "version": "1.0.0",
  "devDependencies": {
    "autoprefixer": "6.5.1",
    "babel-core": "6.17.0",
    "babel-eslint": "7.1.1",
    "babel-jest": "17.0.2",
    "babel-loader": "6.2.7",
    "babel-preset-react-app": "^2.0.1",
    "case-sensitive-paths-webpack-plugin": "1.1.4",
    "chalk": "1.1.3",
    "connect-history-api-fallback": "1.3.0",
    "cross-spawn": "4.0.2",
    "css-loader": "0.26.0",
    "detect-port": "1.0.1",
    "dotenv": "2.0.0",
    "drizzle": "^1.0.1",
    "drizzle-react": "^1.0.1",
    "drizzle-react-components": "^1.0.1",
    "eslint": "3.8.1",
    "eslint-config-react-app": "^0.5.0",
    "eslint-loader": "1.6.0",
    "eslint-plugin-flowtype": "2.21.0",
    "eslint-plugin-import": "2.0.1",
    "eslint-plugin-jsx-a11y": "2.2.3",
    "eslint-plugin-react": "6.4.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "filesize": "3.3.0",
    "fs-extra": "0.30.0",
    "gzip-size": "3.0.0",
    "html-webpack-plugin": "2.24.0",
    "http-proxy-middleware": "0.17.2",
    "jest": "17.0.2",
    "json-loader": "0.5.4",
    "object-assign": "4.1.0",
    "openzeppelin-solidity": "^1.9.0",
    "path-exists": "2.1.0",
    "postcss-loader": "1.0.0",
    "promise": "7.1.1",
    "react-dev-utils": "^0.4.2",
    "recursive-readdir": "2.1.0",
    "strip-ansi": "3.0.1",
    "style-loader": "0.13.1",
    "truffle-contract": "^1.1.8",
    "truffle-hdwallet-provider": "0.0.3",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dev-server": "1.16.2",
    "webpack-manifest-plugin": "1.1.0",
    "whatwg-fetch": "1.0.0"
  },
  "dependencies": {
    "eth-block-tracker-es5": "^2.3.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.2",
    "react-router-redux": "^4.0.7",
    "redux": "^3.6.0",
    "redux-auth-wrapper": "^1.0.0",
    "redux-saga": "^0.15.3",
    "redux-thunk": "^2.2.0",
    "web3": "1.0.0-beta.34"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "chain": "geth --datadir=\"/tmp/eth/60/01\" --nodiscover --maxpeers 0 --port 30301 --rpc --rpcapi \"db,eth,net,web3\" --rpcport 8101 --verbosity 6 console"
  },
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}"
    ],
    "setupFiles": [
      "<rootDir>\\config\\polyfills.js"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>[/\\\\](build|docs|node_modules)[/\\\\]"
    ],
    "testEnvironment": "node",
    "testURL": "http://localhost",
    "transform": {
      "^.+\\.(js|jsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>\\config\\jest\\cssTransform.js",
      "^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>\\config\\jest\\fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "^react-native$": "react-native-web"
    }
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "eslintConfig": {
    "extends": "react-app"
  }
}

This will atleast resolve the missing dependencies issue for deepmerge and is-plain-object.

@DiscRiskandBisque @asselstine However still not sure why I am seeing the following exceptions in the chrome console logs after installing these missing dependencies and starting drizzle:

TypeError: (0 , _drizzle.generateContractsInitialState) is not a function

BryceMindLab commented 6 years ago

@shivamsinha15 @nickreynolds

I have been trying to figure this problem out for hours and the answer is in this thread above, but I was missing one minor detail.

  1. Delete the drizzle module in the node_modulesdirectory
  2. Open up package.json and change "drizzle": "^1.0.1" to "drizzle: "1.1.5" (Make sure the caret (^) is not there!)
  3. npm install
  4. truffle compile
  5. truffle migrate
  6. npm run start

I left the caret before the version number and realized that in my drizzle module's package.json the version kept updating to 1.2.x.

boazberman commented 6 years ago

I'm needing the 1.2 feature of loading a contract dynamicaly, and running into similar errors. Has anyone found a solution in which I can use the 1.2 version with this box?

svechinsky commented 6 years ago

Resolved and submitted a PR. https://github.com/trufflesuite/drizzle/pull/95

OnlyOneJMJQ commented 6 years ago

This should be fixed in Drizzle v1.2.2. @boazberman Regarding dynamic addition--it should be fixed as well, please open another issue if this still occurs after the update!