Error: Cannot find module './syntax-css-in-js' [v0.87.2]

[jwmann]

Clearly describe the bug

Stylelint no longer works and throws an error on every keystroke

What code is needed to reproduce this issue?

None, editing an average JS file

What vscode-stylelint configuration is needed to reproduce the bug?

None, editing an average JS file

Is this issue related to autofix? (editor.codeActionsOnSave)

Probably not, error throws without needing to save

Which version of vscode-stylelint are you using?

v0.87.2

Which version of stylelint are you using?

Not sure?

Does your issue relate to non-standard syntax (e.g. SCSS, nesting, etc.)?

No

What did you expect to happen?

stylelint to work and not throw an error

What actually happened (e.g. what warnings or errors you are getting)?

Error: Cannot find module './syntax-css-in-js'

Error: Cannot find module './syntax-css-in-js' Require stack: - /Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:934:15) at Module._load (internal/modules/cjs/loader.js:779:27) at Function.f._load (electron/js2c/asar_bundle.js:5:12913) at Module.require (internal/modules/cjs/loader.js:1006:19) at require (internal/modules/cjs/helpers.js:88:18) at dD (/Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js:57:49885) at Object.get (/Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js:57:49933) at BNt (/Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js:232:17424) at Object.pNt (/Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js:232:19679) at new e (/Users/jwm/.vscode/extensions/stylelint.vscode-stylelint-0.87.2/dist/server.js:99:1222)

[adalinesimonian]

Thanks for the bug report! I haven't been able to reproduce this bug, at least the way that I'm trying to. Could you provide some more details about your stylelint configuration and perhaps a code sample?

[ota-meshi]

I think this is probably because the bundle tool can't handle import-lazy well.

https://github.com/stylelint/stylelint/blob/911b196e276c708c95a25c2142aa0af538ee5b53/lib/syntaxes/index.js

I think it might work fine if you use your local stylelint instead of the built-in stylelint.

[ota-meshi]

@adalinesimonian
I think you can make this extension fail if you try to lint the scss file using the built-in stylelint.

[ota-meshi]

@adalinesimonian
There are some places where we use import-lazy, but probably only lib/syntaxes/index.js doesn't work.

https://github.com/stylelint/stylelint/blob/13.13.1/lib/formatters/index.js
https://github.com/stylelint/stylelint/blob/13.13.1/lib/rules/index.js
https://github.com/stylelint/stylelint/blob/13.13.1/lib/syntaxes/index.js

I think it would work if the js file referenced by lib/syntaxes/index.js could be the entry point to included in the dist, but can you do that?
I'm not familiar with esbuild.

[adalinesimonian]

I think this is probably because the bundle tool can't handle import-lazy well.

https://github.com/stylelint/stylelint/blob/911b196e276c708c95a25c2142aa0af538ee5b53/lib/syntaxes/index.js

Had no idea this resolution was taking place, thanks for the pointer. Syntaxes are removed in 14 so this wouldn't be an issue for 1.x?

I think you can make this extension fail if you try to lint the scss file using the built-in stylelint.

I think it might work fine if you use your local stylelint instead of the built-in stylelint.

When I was testing, it was still in a subdirectory of vscode-stylelint so it looks like stylelint got picked up from node_modules, which is why I wasn't able to reproduce the bug. I created a workspace outside of the extension's directory and this bug immediately came up.

There are some places where we use import-lazy, but probably only lib/syntaxes/index.js doesn't work.

https://github.com/stylelint/stylelint/blob/13.13.1/lib/formatters/index.js
https://github.com/stylelint/stylelint/blob/13.13.1/lib/rules/index.js
https://github.com/stylelint/stylelint/blob/13.13.1/lib/syntaxes/index.js

I think it would work if the js file referenced by lib/syntaxes/index.js could be the entry point to included in the dist, but can you do that? I'm not familiar with esbuild.

My guess is that lib/syntaxes/index.js is not working because importLazy('package') is probably not recognized by the bundler as being an import. In the other files the syntax used is importLazy(() => require('package')) which retains the require call, so I think the bundler is only then able to recognize that the file is being required.

If the individual files are set up as their own entry points, then so long as there is not a similar pattern of importLazy('package') inside those files, I think it may work. It'd be similar to how I have server.js as its own entry point here in this extension. I can see if I can get it to work.

[ota-meshi]

I think it's removed in the v14 branch, so I don't think it's an issue in stylelint v14 and this extension v1.x.
https://github.com/stylelint/stylelint/tree/v14

[adalinesimonian]

@ota-meshi I just tested setting up each syntax-*.js file as its own entry point and it looks like that fixes this bug. I'm going to push up a fix PR momentarily.

[adalinesimonian]

v0.87.3 has a fix for this bug and should be available shortly.

[jwmann]

Thanks everyone ❤️

Can confirm it's fixed now 😄