Using Webpack: BREAKING CHANGE: The request './components/VscodeTree' failed to resolve ...

[brodao2]

Sirs,

I migrated from @vscode-webtookit to @vscode-element. In a development environment, my extension works without problems with @vscode-element, but for distribution I use WebPack.

When running webPack, I get the message below:

ERROR in ./node_modules/@vscode-elements/react-elements/dist/main.js 33:0-49
Module not found: Error: Can't resolve './components/VscodeTree' in 'W:\ws_tds_vscode\tds-webtoolkit\node_modules\@vscode-elements\react-elements\dist'       
Did you mean 'VscodeTree.js'?

BREAKING CHANGE: The request './components/VscodeTree' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.

Add the extension to the request.

Any suggestions on how to resolve it?

Grateful

[bendera]

Could you provide a reproducible example? If your extension includes a standalone frontend build that can be launched with minimal setup, that would be ideal.

[bendera]

Anyway, try this:

npm i @vscode-elements/react-elements@next

Please let me know if it resolved your issue, and I will publish it in the latest channel too.

[brodao2]

@bendera

The initial incident has been resolved. Now, WebPack runs without problems. When running my application, the new error now occurs.

Uncaught Error: Cannot find module './components/VscodeBadge'
    at webpackMissingModule (index.js:9439:42)
    at ./node_modules/@vscode-elements/react-elements/dist/main.js (index.js:9439:149)
    at __nested_webpack_require_458394__ (index.js:9530:1)
    at ./src/components/form/content.tsx (index.js:7730:26)
    at __nested_webpack_require_458394__ (index.js:9530:1)
    at ./src/components/form/form.tsx (index.js:7911:35)
    at __nested_webpack_require_458394__ (index.js:9530:1)
    at index.js:9623:14
    at index.js:9679:2
    at ../../tds-webtoolkit/dist/index.js (index.js:9681:11)

Thank you for your attention.

[bendera]

Is this the codebase we are talking about? https://github.com/totvs/TDS-WebToolKit/blob/0c7992c5bc42605048e865ebf19903c62fe74fd7/package.json#L36 If yes, update the package to the 0.6.0-0 or install with npm i @vscode-elements/react-elements@next (The @next part is important, that means it is a pre-release version.)

[brodao2]

@bendera

I made the suggested adjustments, but the problem persists.

The project in which this occurrence is https://github.com/totvs/TDS-WebToolKit.git, branch: DEV.

To reproduce, run npm run build.

I appreciate the support.

[brodao2]

Resolved. Thank you very much.