Hashnode/mern-starter

DevTools.instrument is not a function

garyee opened this issue · 6 comments

garyee commented

I installed the starter with intructions on the website.

When I npm start and the use Chrome I got the following error in the console:

Uncaught TypeError: DevTools.instrument is not a function
at configureStore (store.js?006e:22)
at eval (index.js?8956:11)
at Object. (app.js:2042)
at webpack_require (vendor.js:713)
at fn (vendor.js:118)
at Object. (app.js:1326)
at webpack_require (vendor.js:713)
at webpackJsonpCallback (vendor.js:26)
at app.js:1

as I do not know the system well yet, I do not have a clue.

mannyhenri commented

A first read indicates possibly an issue with redux. We'll take a look at it and fix/update you

mikeyhogarth commented

The import has gone squiffy for the dev tools (when will people learn that changing import styles is a breaking change!!). Anyway, you need to specify default now because at some point they've switched from commonjs to ES6 modules. So, to fix the existing code there are two changes required;

store.js

// from this
enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument());

// to this
enhancers.push(window.devToolsExtension ? window.devToolsExtension() : DevTools.default.instrument());

client/modules/App.js

// From this
DevTools = require('./components/DevTools');

// To this
  DevTools = require('./components/DevTools').default;
  • 👍1
mattlubner commented

This is a bug resulting from my fat-fingering the import->require() syntax change, which was done so we can conditionally import ./DevTools only in development environments (keeping the production JavaScript bundle as minimal as possible). @mikeyhogarth is 100% correct, we need to reference the default property of the required module.

I've submitted a PR (#378) with the fixes as outlined above. @garyee @mannyhenri @mikeyhogarth If you could, please pull and verify the fix? It'll be tricky to get this covered in the test suite, so for now we'll have to test it manually (it's working properly in my Chrome Incognito now).

By the way, @mikeyhogarth let's try to keep the conversation respectful and give others the benefit of the doubt. This was just a simple oversight that snuck by because of the React DevTools Chrome extension being installed (window.devToolsExtension being defined bypasses all references to the DevTools module).

  • 😕1
mikeyhogarth commented

Hey dude - so sorry if that comment seemed disrespectful - I thought it was a react update that had broken this and I've been bitten by their "non breaking changes" so many times that I guess I just commented without thinking. Sincere apologies for any offence caused.

mikeyhogarth commented

Also wanted to say (sorry, went to sleep, woke up, still thinking about it!) That this isn't fat-fingerings, it's a perfectly legitimate mistake and one I have made so many times. Usually it goes like this;

  1. Move import to a place where it's dynamic or not at the top
  2. Oop, wwbpack didnt like that... change it to commonjs without "default"
  3. Yay, build passes! And you carry on withour realising a runtime error has been introduced.

And when this happens the resulting error is seldom very useful or direct 😀

Anywat, sorry again, hella embarrased about all of this.

mattlubner commented

Hey @mikeyhogarth, I appreciate your saying that. It's important (for us all) to remain mindful of the fact that we all make mistakes (sometimes the mistake is forgetting that everyone makes mistakes 😜).

Also, thanks for finding and contributing the fix! As always, please (everyone) feel free to submit PRs if you find issues such as these!

  • ❤️1