sverweij/state-machine-cat

TypeError with v9.0.0

mwaddell opened this issue · 10 comments

mwaddell commented

I'm not able to successfully import the v9.0.0 version into a project like I was with v8.x.

Using CodeSandbox, here's some example code with v8.1.1:

image

Here's that same code with v9.0.0

image

When rendering in the browser, I'm consistently getting the error:

Cannot read property 'smcat.template.hbs' of undefined

sverweij commented

hi @mwaddell - thanks for reaching out on this. I've been able to reproduce it with your link and I've an idea where the problem originates. I'll keep you posted in this thread.

  • 👍1
sverweij commented

hi @mwaddell I dove into the problem and it seems the root cause for this problem is that in that (code sandbox) environment .cjs extension isn't recognised as a file containing commonjs javascript, but as a plain text file.

Here's a fork of that sandbox that illustrates the problem: https://codesandbox.io/s/state-machine-cat-v90-error-forked-lupqh?file=/test.jsx As you can see the import cjs from ./commonjs-with-cjs-extension.cjs just puts the contents of the .cjs in the variable in a string and calls it a day. The same file with a .js extension gets properly interpreted as javascript.

I haven't been able to determine which part is the culprit, but it doesn't really matter; I've been able to reproduce the problem with the bare create-react-app (which uses webpack under the hood) and with parcel - both on a local machine. The behaviour is plain wrong - but it might take some time to get it fixed everywhere, if that happens at all. This means the only short term solution is state-machine-cat changes its approach to being an ESM module so as to not use the .cjs extension anymore:

  • change all ESM modules' extensions from .js to .mjs (.mjs is recognised by parcel and webpack on code sandbox)
  • change all extensions commonjs modules (including those in the dist/commonjs folder) from .cjs to .js
  • remove the "type": "module" declaration from package.json (so .js on node is interpreted as commonjs)

It's easier put shoes on my feet than it is to demand the world be clad in leather 🤷

  • ❤️1
mwaddell commented

Thank you so much for looking into it so quickly! It's unfortunate that things are moving so slowly in standardizing the javascript ecosystem around ESM, but I suppose it's not surprising considering how large and diverse the community is.

Thanks as always for such a great library!

sverweij commented

hi @mwaddell thanks for the kind words! ESM indeed is an interesting adventure at the moment. Next time around I'll probably choose a route that involves a transpilation layer like typescript or babel.

In the mean time I've published state-machine-cat@9.0.1-beta-5 - and it seems to work in a fashion backwards compatible with version 8 - here's that version applied to your reproduction sample (which has proven invaluable in testing, thanks!): https://codesandbox.io/s/state-machine-cat-v90-error-forked-5j9dw?file=/test.jsx

mwaddell commented

You're welcome - I'm currently using state-machine-cat in a react/typescript project, so I came across the issue in my GHA build but wanted to make sure it wasn't something unique to my environment, so I created the code sandbox to confirm it. I just tested v9.0.1-beta-5 in my build environment and can confirm that it's working as it was with version 8 again.

Thanks!

sverweij commented

Thanks for the confirmation @mwaddell state-machine-cat@9.0.1 - which includes the fix - has just been published.

(And nice to hear of a real-life use case!)

  • 🎉1
mwaddell commented

Great - thanks!

Yes, we're using state-machine-cat as part of an interactive workflow editor for the admin section of one of our applications.

image

sverweij commented

Wow that looks nice! There's some elements in there I don't recognize - icons, background-colouring, styling on transitions - and some things that look like calls to action (edit, add?). How did you manage to get these in?

mwaddell commented

It's all based on PR #135 -- we maintain our internal state in JSON objects and I wrote a map/reduce function that converts from our JSON format to yours and adds classes to all of the resulting objects. All the background and edge styling is implemented using regular CSS. The code which adds in the icons and adds onclick/onmouseover events just looks for items by className. We were originally using state-machine-cat to visualize existing workflows, but now we have a fully interactive editor for editing them as well. We use this as part of a larger application which tracks how well we adhere to our standard processes.

  • 👍1