back to the tech - and what to do when you get errors in storybook

Interesting aside from this page on alternatives to SPAs:

But the main caveat is that they assume that you know JavaScript and the DOM, which are not necessarily universal skills anymore. A lot of developers growing up on React have acquired a real blind spot for native browser APIs.

A manager mentioned something like that to me before, when I was wondering what my long-range experience brought to the table when young hot-shots who are quicker to find and use a good library than I sometimes am could make such cool stuff-- he claims he's interviewed folks who just really have no solid concept of the DOM. For better or worse my working knowledge of declarative languages such as Angular and React were built on the transition from "CGI"-style whole pages through pages turbocharged with JQuery. But some of these whipper-snappers are at a loss to really understanding what the DOM means...

Anyway!

I haven't had a lot top say on this blog last month, sometimes that's a reflection of what I'm having to gear up for in my job. October had a lot of wrangling with storybook. Storybook is more of a dynamic work in progress than I prefer. (Also I find it interesting that their main support community is on Discord!) Right now they're playing catch up with the new version of React - while React 17 is a stability release without a lot of contract changes, libraries gradually switching over their dependencies can create conflicts. One bit where I tried to "pay it forward" and be a helper rather than a helpee on the discord:

If you [have a blank screen on starting storybook] and see something like "Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:" [in the console] you are probably caught in the local hassles w/ React upgrading. The general advice is to "run with --no-dll", I did that my having these two lines in my package.json instead of just the first:

   "storybook": "start-storybook -p 6006 -s public",

    "storybook-no-dll": "start-storybook --no-dll -p 6006 -s public",

and then running npm run storybook-no-dll instead of npm run storybook

(I could reproduce the problem by running:

npx create-react-app my-app

cd my-app

npm start

and then 

npx sb init

npm run storybook

) 

The other biggest hassle I dealt with was, before upgraded storybook version, we kept using "*.storybook.*" as our filter for what storybook should find, even though the new standard is "*.stories.*". That seemed to work ok, until I wanted to start publishing "*.storybook.mdx" - you should really stick with stories.* OR be prepared to get deep into the webpack config - webpack is doing special processing to process the "mdx" Markdown + JSX stuff.