TypeError: (0 , _drizzle.generateContractsInitialState) is not a function when trying to run freshly-unboxed Drizzle-box
DmitryPasenko opened this issue · 15 comments
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?
@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
@sajclarke Thanks! It works now! )
@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
I just switched the network on MetaMask to localhost:8545 and now I'm getting 'Error initializing Drizzle:'
I had to recompile and migrate the contracts again after I did the update :p working now !
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.
ribbit. encountering this issue too. none of the above suggestions worked.
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
@shivamsinha15 that is exactly what I'm seeing too.
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
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.
- Delete the
drizzlemodule in thenode_modulesdirectory - Open up
package.jsonand change"drizzle": "^1.0.1"to"drizzle: "1.1.5"(Make sure the caret (^) is not there!) npm installtruffle compiletruffle migratenpm 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.
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?
Resolved and submitted a PR.
trufflesuite/drizzle#95
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!