import your library in angularJS

[Jiajun-Deng]

I want to import your API to visualize the state machine. But once I add:
const smcat = require("state-machine-cat");
My code will be built successfully while cant generate a working bundled js file.

Context

I tried
import * as smcat from 'state-machine-cat'
still the same situation.
I use webpack to build it, into AMD libraryTarget.
Also, I use npm.

[Jiajun-Deng]

This is the error.
I think systemjs was used by grafana(I'm working on developing a grafana panel).
Really want to dive in this issue. Could you give me suggestions. Thanks.

[Jiajun-Deng]

Is there any workaround? Like instead of npm installing the package, may I include it from /lib?

[sverweij]

hi @Jiajun-Deng - thanks for your interest in state-machine-cat.

My knowledge about angular/ angularjs (or any other FE framework for that matter ...) is quite sporadic - and my knowledge on systemjs is even less, so I might not be the best person in the world to help you with this. Seeing the errors, state-machine-cat isn't the most likely culprit either.

state-machine-cat is a straightforward javascript module, and its main render function
shouldn't have any side effects. The only thing that might be off to many other modules is
that is uses viz.js which is quite a big (>2Mb) dependency (I want to replace it with
something else in the future, but there isn't anything that offers similar functionality...)
You might see webpack complaining about the size. This should not land you with the
errors you see above, though

That said: the three error messages in your screen shot have this in common:

• they're the result of something in the code looking for a module that isn't there
• each of these modules (fs, path and crypto) are node core modules. These are indeed indirect dependencies of state-machine-cat - IIRC viz.js includes them).

With its default configuration webpack will include these in the bundle wholesale. That's what's e.g. happening when it creates the bundle for https://state-machine-cat.js.org. Assuming you bundle your app with webpack, that's what should be happening in your case too.

The error message is from system.js (which grafana seems to use for loading plugins), though, which suggests that it's not looking at a webpack bundled thing or your actual bundling works differently...

If you start asking for help in other communities (grafana? systemjs? webpack?) it might be useful to include a few more details about your setup. How do you bundle? What does your webpack config look like? What's actually loaded in the browser? In what shape (bundled, loose files) do you serve your files? How does grafana's plug in system load your .

Some other stuff I've found that might be of help

• It might be useful to adjust your webpack config according to this: https://github.com/systemjs/systemjs#compatibility-with-webpack
• I've googled for node core modules systemjs and found a thread from 2014 (prehistoric, so maybe of questionable relevance by now) in the systemjs repo about node core modules and systemjs, and at that point in time it was a bit problematic.

HTH ...

[Jiajun-Deng]

Hi, @sverweij .Thank you for your reply.
I tried to adjust webpack config but I got these:
`Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.output.libraryTarget should be one of these:
  object { auxiliaryComment?, chunkFilename?, crossOriginLoading?, jsonpScriptType?, chunkLoadTimeout?, devtoolFallbackModuleFilenameTemplate?, devtoolLineToLine?, devtoolModuleFilenameTemplate?, filename?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, jsonpFunction?, library?, libraryTarget?, libraryExport?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine? }
  -> Type of library`

[sverweij]

I've tried using system.js & the system libraryTarget in webpack and that worked ok. Likely you're using a somewhat elder version of webpack (see the systemjs link it ought to be > 4.30.0 for 'system')?

[Jiajun-Deng]

The libraryTarget of my plugin is 'amd'. I've checked other grafana plugins, they seem to have the same target. So I think amd is required by the grafana API schema?
I updated webpack to 4.0, still the same error.
Is there any operation using fs, path, crypo in smcat? These operations are not supposed to exist in browsers, right?

[sverweij]

So I think amd is required by the grafana API schema?

It doesn't seem likely. That said I have expertise in grafana nor (as said before) in AngularJS

Is there any operation using fs, path, crypo in smcat?

no. but as I mentioned in the first reply, there is in viz.js

These operations are not supposed to exist in browsers, right?

Correct. which is why you use something like webpack, which makes sure the functionality in these packages get bundled with the app you're building. E.g. on state-machine-cat.js.org it does work...

I updated webpack to 4.0, still the same error.
4.0 or 4.30 (or higher)? systemjs documentation explicitly mentions 4.30 or later...

I'm closing this issue as there's no indication the issue you're facing is caused by state-machine-cat (a.o.t. a configuration struggle with systemjs, webpack, grafana). Feel free to re-open if you have concrete evenidence to the contrary.

[Jiajun-Deng]

Thanks for your reply.
I'm thinking of include your library by using smcat-online-interpreter.min.js as a local .js file. Do you think it is doable?