Question: usage with webpack.config.ts

[marcellino-ornelas]

Summary

How do configure dependency-cruiser when our webpack config file is written in typescript 🤔 webpack.config.ts

After converting my file to typescript I recieved this error

"SyntaxError: Cannot use import statement outside a module"

Context

Environment

• Version used: 11.2.0
• Node version: v14.17.6
• Operating System and version: 5.4.0-1071-aws
• Link to your project: N/A internal project

[sverweij]

Hi @marcellino-ornelas at this time dependency-cruiser does not support webpack configs in other formats than .js/.cjs and .json.

This morning I've looked into a way to make it work for the other formats webpack supports. I now have a working prototype (I'll whip up a PR for it & publish it as a beta later this weekend) + some notes

• webpack-cli uses rechoir and interpret, which dependency-cruiser would need to take either as a dependency (or find a creative solution for - see below) - total weight ~23kb.
• rechoir hasn't seen maintenance in over a year. It's used quite a bit, probably because a.o. webpack-cli depends on it, so it might not be that big of an issue.

Taking this into account I've decided that, for now, I'll make use of what is already available in the environment rechoir/ interpret wise (and provide instructions what to do in case it isn't).

• rechoir uses one of the locally available typescript register functionalities (ts-node, sucrase, babel, esbuild-register, swc). This shouldn't be an issue, as when there's a webpack config in typescript one of these is bound to exist.
• In the initial implementation I've shied away from supporting anything but the 'native' options as use of the 'native' formats was predominant on GitHub (1.2M regular javascript vs 20k in typescript - assuming GitHub usage to be representative of real world use - see PR for the numbers at that time). Today that situation doesn't seem to have changed (2.2M vs 51k). 51k is still an impressive absolute number, though - and might represent the more interesting/ elaborate setups.

[sverweij]

Hi @marcellino-ornelas

• the pull request is up (☝️).
• The changes in there are also part of ~[email protected]~ [email protected] which has just been published on npm (shasum: 86b52f3ae600a5f4923d202ae7190940260d2e4f)

Let me know how it works for you - after your feedback I'll merge the PR and release it as a regular release.

edit: version typo

[Yonben]

• The changes in there are also part of [email protected] which has just been published on npm (shasum: 86b52f3ae600a5f4923d202ae7190940260d2e4f) Thanks gonna test now relevant for me too.

Just FYI little typo, it's 11.15 and not 11.5 :)

[marcellino-ornelas]

Thank you so much @sverweij for putting up a PR so fast. Let me try upgrading to this beta version and ill let you know how everything goes. Im very excited for this 👏

recent webpack only (older might work as long as it doesn't use enhanced-resolve features desupported in webpack 4 - no guarantees). Support for older versions: upon request, and only if the request comes with sufficient enticement to make it worth my while.

Our webpack version is on 4.46 so we might be a little out of date. Ill try to see if I can upgrade our webpack version as well before reporting any issues with this 🙇‍♂️

[marcellino-ornelas]

It worked 👏 Thank you so much for getting a prototype up and running. Here are some notes that I discovered

1.) Don't try to use babelConfig & webpackConfig in .dependency-cruiser.js at the same time. I tried to add the babel stuff when first converting to see if it fixed anything with running in typescript. ended up conficting with the webpack config which makes sense, just thought I share just in case someone else runs into this. After removing babelConfig everything worked

2.) I needed to manually install rechoir and interpret in order for this to work. I do have my webpack building with a ts file without these packages however. I don't even have tsnode installed as a dependency but webpack seems to just know how to run these files regardless.

We are still prototyping this change as well, so will defiantly reach back out if we run into anything else around this 🙇‍♂️

[sverweij]

Hi @marcellino-ornelas, thanks for the feedback!

conflicting babelConfig and webpackConfig when used in .dependency-cruiser.js

That is unexpected. I try to make dependency-cruiser as unobtrusive as possible and am hence interested in what's going on there (and prevent that from happening).

having to install rechoir and interpret

It might be you've (just like me) bumped into the problem described in #647 under 'Potential caveat'. It might be more common than I initially thought, so I'll consider shipping dependency-cruiser with rechoir & interpret to prevent future support requests.

(no) need for ts-node

rechoir tries to use what's available in your environment to register something that hacks node into understanding typescript. When I see your other feedback point I guess that would be babel (but any of typescript-node, typescript-register, typescript-require and sucrase would work as well)- so I guess just installing rechoir & interpret would've been sufficient - can you confirm?

[sverweij]

Hi @marcellino-ornelas I've published a new beta version ([email protected]) that ships with rechoir & interpret so it's not necessary anymoreto install these separately.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.