spectral failing when we import in react application

[satishbkodali]

We tried to follow this in our react typescript application https://docs.stoplight.io/docs/spectral/eb68e7afd463e-spectral-in-java-script#browser

And Getting the error as

error TS2307: Cannot find module '@stoplight/spectral-ruleset-bundler/with-loader' or its corresponding type declarations.

8 import { bundleAndLoadRuleset } from '@stoplight/spectral-ruleset-bundler/with-loader';

[mnaumanali94]

@satishbkodali Can you share the whole project and also the details on which package manager you're using?

[satishbkodali]

https://github.com/satishbkodali/swagger-editor

trying to create swagger-editor with rules in it

[P0lip]

Try setting "type": "module" in your package.json. Does react-scripts support proper ES modules?

[magicmatatjahu]

I don't know why you're doing it this way, but instead of loading the ruleset through a config file (and bundle it before building browser app) you can use the ruleset from @stoplight/spectral-rulesets package:

import { oas } from '@stoplight/spectral-rulesets';

const spectral = new Spectral();
spectral.setRuleset({ extends: [oas], rules: { ... } });
spectral.run(content).then(console.log);

If, on the other hand, you want to use custom rules written in a file then ok, bundling you may want to use, but still, rules can be written in JS and then load them in the Spectral is much easier.

[satishbkodali]

@magicmatatjahu any example i can refer, as i am new to react

[tillig]

This with-loader thing is pretty painful. I see something got started for that over here but it appears it fell through the cracks or the docs weren't totally updated or... I dunno what. I'm not able to figure out how to get the with-loader part imported, that's for sure.