Dependency update (meshline) breaks a lot of features

[Josje92]

• three version: 0.146.0
• @react-three/fiber version: 8.9.1
• @react-three/drei version: 9.40.0
• node version: 14.18.1
• npm (or yarn) version: 6.14.15
• spite/THREE.MeshLine version: 3.1.1

Problem description:

I get all kinds of compilation issues when I use basic components like <PointerLockControls /> or <Environment />. Errors:

ERROR in ./node_modules/@react-three/drei/core/Trail.js 104:38-54
export 'MeshLineGeometry' (imported as 'MeshLineGeometry') was not found in 'meshline' (module has no exports)

ERROR in ./node_modules/@react-three/drei/core/Trail.js 107:18-34
export 'MeshLineMaterial' (imported as 'MeshLineMaterial') was not found in 'meshline' (module has no exports)

ERROR in ./node_modules/meshline/dist/index.js 1:0-35
Module not found: Error: Can't resolve './MeshLineGeometry' in '/Users/joshua/Documents/projects/metaboards/node_modules/meshline/dist'
Did you mean 'MeshLineGeometry.js'?
BREAKING CHANGE: The request './MeshLineGeometry' 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.

ERROR in ./node_modules/meshline/dist/index.js 2:0-35
Module not found: Error: Can't resolve './MeshLineMaterial' in '/Users/joshua/Documents/projects/metaboards/node_modules/meshline/dist'
Did you mean 'MeshLineMaterial.js'?
BREAKING CHANGE: The request './MeshLineMaterial' 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.

ERROR in ./node_modules/meshline/dist/index.js 3:0-26
Module not found: Error: Can't resolve './raycast' in '/Users/joshua/Documents/projects/metaboards/node_modules/meshline/dist'
Did you mean 'raycast.js'?
BREAKING CHANGE: The request './raycast' 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.

Relevant code:

<Canvas
    camera={{ position: [0, 0, 0], rotation: [0, 0, 0] }}>
    <PointerLockControls />
    <Environment preset={"city"} />
</Canvas>

Suggested solution:

I have another project with practically the same setup (versions), but an older version of the meshline package (2.0.4) without all these errors. However, when I simply copy/paste this entire directory to overwrite the 3.1.1 version, it reduces the number of errors but still doesn't work. The errors I then get are:

(node:34716) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:34716) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

Attempted import error: 'MeshLineGeometry' is not exported from 'meshline' (imported as 'MeshLineGeometry').
ERROR in ./node_modules/@react-three/drei/core/Trail.js 104:38-54
export 'MeshLineGeometry' (imported as 'MeshLineGeometry') was not found in 'meshline' (possible exports: MeshLine, MeshLineMaterial, MeshLineRaycast)

[Josje92]

Update: Two smart fellas here found out that downgrading in a proper way (it seems my tries failed) does help. Just revert back to 9.46.3 and this issue will be gone.

The way to a fix might have something to do with this dependency, so I'll leave this report open for someone with more knowledge of this project to look into.

[arpadkdweb]

I can confirm 9.46.3 is fine, but 9.46.4 is also producing the issue

[krutoo]

same issue, thanks to workaround

[tengj]

same issue

[drcmda]

should be fine now, it's about navigating nodes esm package.json jungle 😩

[yunusyuksel]

I still get the problem for react native, Downgrading the version did not fix my problem. If i downgrade it, i get react-dom error.

The erorr I get: Error While trying to resolve module meshline from file as importing PerformanceMonitor from @react-three/drei/native.

The error I get after downgrading : Error: Unable to resolve module react-dom/client. @react-three/drei/native/index.js: react-dom/client could not be found within the project or in these directories: node_modules/@react-three/drei/node_modules node_modules 108 | import '../core/pivotControls/AxisArrow.js'; 109 | import '../web/Html.js'; 110 | import 'react-dom/client'; | ^ 111 | import '../core/pivotControls/context.js'; 112 | import '../core/pivotControls/PlaneSlider.js'; 113 | import '../core/pivotControls/AxisRotator.js';

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!

[github-actions[bot]]

We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.

If you’d like to continue working on this, please feel free to re-open it or reach out on Discord — our community is always ready to support you. Thanks again for helping us stay organized and for understanding our approach!