React: Dev server logs full of warnings regarding source maps

[defaude]

Using a freshly-squeezed app made by create-react-app, I'm getting a ton of warnings regarding source maps like

WARNING in ./node_modules/@telekom/scale-components-react/dist/react-component-lib/utils/case.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/code/scale-issues/node_modules/@telekom/scale-components-react/src/react-component-lib/utils/case.ts' file: Error: ENOENT: no such file or directory, open '/code/scale-issues/node_modules/@telekom/scale-components-react/src/react-component-lib/utils/case.ts'
 @ ./node_modules/@telekom/scale-components-react/dist/react-component-lib/utils/index.js 62:13-30
 @ ./node_modules/@telekom/scale-components-react/dist/react-component-lib/createComponent.js 27:16-34
 @ ./node_modules/@telekom/scale-components-react/dist/react-component-lib/index.js 7:24-52
 @ ./node_modules/@telekom/scale-components-react/dist/components.js 13:30-62
 @ ./node_modules/@telekom/scale-components-react/dist/index.js 24:13-36
 @ ./src/App.tsx 5:0-64 10:35-48
 @ ./src/index.tsx 7:0-28 15:33-36

The app itself seems to work just fine, but this behavior in the dev server's console is quite annoying :)

[christopherGdynia]

Hello @defaude

you don't need to use the react wrapper to use Scale in React, see

with this change in the react-app-env.d.ts file you can use the scalecomponents as html elements not as react component.

But either way, the dropdown element isn't working as expected, see this

[defaude]

I'd strongly prefer using the React wrapper components off-the-shelf instead of having to handle the React <=> Web Component shenanigans myself and/or auto-generating my own wrapper components.

Just pointing out that maybe there's an issue with the source maps generation?

[W1ckh3ad]

@defaude
Sorry for my last answer, I forgot to tell you that the wrapper libraries will get deprecated.

I don't know if the team behind scale will put any more work into the wrapper library, because you can get it work with the answers of #615

But maybe @acstll or @marvinLaubenstein can give you more details about it

[acstll]

Hey @defaude thanks for opening this!

Thank you @W1ckh3ad also for contributing.

The Angular and Vue wrapper packages are indeed deprecated.

But the React wrappers are not. The warning says "might" 🙂

The reason for this is the following: Angular and Vue already have great support for web components, but in React support is still experimental (much better now than a year ago, but not quite there yet).

@defaude what version of Scale are you using?

[christopherGdynia]

@acstll it should be beta-43 as in his test repos https://github.com/defaude/scale-reactivity

[defaude]

Yup, beta-42. Thanks @christopherGdynia 👍

Let's just hope react will eventually get around to properly work with web components ;) Until then, we'll have to make do with some wrapper for react apps.

[acstll]

@defaude are you still getting the warnings with >=beta.100?

[acstll]

Closing this assuming it's all good, please re-open or get in touch if not. Thanks again for opening this!

[defaude]

Hey @acstll ! Sorry for not getting back to you sooner. In fact, I switched to another company and am no longer part of the project team that used the Scale components. I think they came up with their own "handwritten" Scale React component suite but I'm not sure.

[acstll]

Hey @defaude, no worries. Thanks a lot for the reply, I really appreciate it. All the best in the new company!

[andoo]

This issue is still there. It can be reproduced in four steps:

1. Use create-react-app to create a new npm project
2. npm install @telekom/scale-components-react
3. import ScaleAppShell in src/App.js
4. npm run build

The last command will show all the source map errors. Please see my attached "logfile" for details
scale-source-maps.txt

[tshimber]

hi! please, tell, is it resolved? for me seems not//
I used to have Scale with Angular and now only have first steps with React + Typescript. But I kinda started with all new and simple, and still this issue appears from the start.

Here's the screenshot: https://prnt.sc/qzIOEHJFgqPs

[tshimber]

it is appearing for React both JS and TS, when you use create-react-app (it will be now react 18.2.0), which uses react-scripts 5.0.1. If manually change react-scripts version to 2.1.3, this issue got resolved, but a lot of deprecated stuff appears.

Scale of newest versions as well:
"@telekom/scale-components": "^3.0.0-beta.119",
"@telekom/scale-components-react": "^3.0.0-beta.56"

[felix-ico]

Hi @tshimber I've looked into this topic a bit and it seems like the problem is related to create-react-app (discussion: facebook/create-react-app#11767). There is a workaround suggested at the end of that thread to at least remove the warnings from the console: facebook/create-react-app#11767 (comment). Would this be doable for you?

[tshimber]

Hi @felix-ico ! thanks a lot! sorry I was blaming Scale by default and couldn't even think, that it's React unresolved issue:/// really strange from their side/
We provide the basic solution for other developers, so I guess providing this strange workarounds by default would be a doubtful idea. Maybe we'll go with prev version of react-scripts, which is 4.0.3, with this one it works fine/

THANK YOU ones again!