SVGLoader: Make createShapes() usable for other modules.

[Mugen87]

Related issue: #24291 (comment)

Description

SVGLoader.createShapes() assumes userData.style is defined at a certain place. This breaks the usage of the method outside of the loader (e.g. in context of Font).

[mrdoob]

Thanks!

[dreammonkey]

Hello, for some reason this change is breaking my typescript build.
I'm getting the following error and I'm not sure how I can fix it...

ERROR in ./node_modules/three/examples/jsm/loaders/SVGLoader.js 2110:113
Module parse failed: Unexpected token (2110:113)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|               // check if path is solid or a hole
>               const isAHole = simplePaths.map( p => isHoleTo( p, simplePaths, scanlineMinX, scanlineMaxX, shapePath.userData?.style.fillRule ) );
| 
| 

[Mugen87]

Is it because of optional chaining? We use ?. elsewhere in the code base I don't think we revert its usage.

I'm not a TS user so I can't tell you how to fix this issue in your build.

[dreammonkey]

Yes, when removing the ? the error is gone. Very silly issue. It is actually not the build that breaks but the storybook that I'm using for development. It seems related to storybookjs/storybook#11515 but I'm unable to fix it using the proposed solution: "target": "ES2018"

[satyajitghana]

Is it because of optional chaining? We use ?. elsewhere in the code base I don't think we revert its usage.

I'm not a TS user so I can't tell you how to fix this issue in your build.

yes it's because of optional chaining, I had no issue till 0.140.2 but 0.146.0 gives this issue

[dreammonkey]

I resolved the issue by importing the SVGLoader from https://github.com/pmndrs/three-stdlib

The three jsm modules are not part of the three.js package and are ment to be copied into your own project.
The three-stdlib package solves this issue elegantly !

[Mugen87]

The three jsm modules are not part of the three.js package and are ment to be copied into your own project.

Sorry, that is not true. examples/jsm is part of the npm package. The import of SVGLoader looks like so:

import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader.js';

[dreammonkey]

You are right, they are part of the package, but importing from three-stdlib solved the issue for me.