5

Using Ubuntu 16.04

Greetings, all I was following the tutorial for getting Drizzle up and running located here. I advanced to this step when I attempted to run the app using the "npm start" command from the terminal. I was then greeted with an error reading "TypeError: drizzle is undefined." I tried again after updating packages via npm, but the error continued. I've reproduced the code I'm using below:

app.js:

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';

    class App extends Component {
      state = { loading: true, drizzleState: null };

      componentDidMount() {
        const { drizzle } = this.props;

        // subscribe to changes in the store
        this.unsubscribe = drizzle.store.subscribe(() => {

          // every time the store updates, grab the state from drizzle
          const drizzleState = drizzle.store.getState();

          // check to see if it's ready, if so, update local component state
          if (drizzleState.drizzleStatus.initialized) {
            this.setState({ loading: false, drizzleState });
          }
        });
      }

      compomentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        if (this.state.loading) return "Loading Drizzle...";
        return <div className="App">Drizzle is ready</div>;
      }
    }

    export default App;

index.js

            import React from 'react';
            import ReactDOM from 'react-dom';
            import './index.css';
            import App from './App';
            import registerServiceWorker from './registerServiceWorker';
            // import drizzle functions and contract artifact
            import { Drizzle, generateStore } from "drizzle";
            import 'contract_name' from "./contracts/'contract_name'.json";

            ReactDOM.render(<App />, document.getElementById('root'));
            registerServiceWorker();

            // let drizzle know what contracts we want
            const options = { contracts: ['contract_name'] };

            // setup the drizzle store and drizzle
            const drizzleStore = generateStore(this.props.options);
            const drizzle = new Drizzle(this.props.options, drizzleStore);

I replaced the actual name of the contract I'm using with 'contract_name' for privacy reasons. Is there anything obvious that I'm doing wrong?

4

In your index.js file you need to pass drizzle instance into the App component as props:

ReactDOM.render(<App drizzle={drizzle} />, document.getElementById("root"));

You should also declare your consts before ReactDOM.render:

...
// let drizzle know what contracts we want
const options = { contracts: [MyStringStore] };

// setup the drizzle store and drizzle
const drizzleStore = generateStore(options);
const drizzle = new Drizzle(options, drizzleStore);

// pass in the drizzle instance
ReactDOM.render(<App drizzle={drizzle} />, document.getElementById("root"));
registerServiceWorker();
  • Excellent, this did the trick. Thank you very much! – Jake Armitage Sep 21 '18 at 16:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.