Getting error no such file or directory, open '/{workdirectory}/node_modules/amazon-chime-sdk-js/src/websocketadapter/WebSocketReadyState.ts'

[MasahiroHanawa]

What happened and what did you expect to happen?

Hello, I try to install amazon-chime-sdk-component-library-react by below command.

yarn add amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system

and write MeetingProvider component like this.

`import * as React from 'react'; import { createRoot } from 'react-dom/client'; import CssBaseline from '@mui/material/CssBaseline'; import { ThemeProvider } from '@mui/material/styles'; import App from './App'; import theme from './theme'; import { MeetingProvider, lightTheme, } from 'amazon-chime-sdk-component-library-react';

const rootElement = document.getElementById('root'); const root = createRoot(rootElement!);

root.render( <ThemeProvider theme={theme}> <MeetingProvider> <CssBaseline /> <App /> </MeetingProvider> </ThemeProvider>, ); `

But I'm getting some errors like below.

WARNING in ./node_modules/amazon-chime-sdk-js/build/websocketadapter/WebSocketReadyState.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/{workdirectory}/node_modules/amazon-chime-sdk-js/src/websocketadapter/WebSocketReadyState.ts' file: Error: ENOENT: no such file or directory, open ''/{workdirectory}/node_modules/amazon-chime-sdk-js/src/websocketadapter/WebSocketReadyState.ts' I checked node_modules/amazon-chime-sdk-js. I couldn't find any src directory. How to resolve this issue?

Have you reviewed our existing documentation?

• [X] Amazon Chime SDK for JavaScript GitHub issues
• [X] Amazon Chime SDK React Components Library GitHub issues
• [X] Storybook documentation
• [X] README page
• [X] How-to documentation
• [X] React SDK meeting demo

Reproduction steps

yarn add amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system

and write MeetingProvider component like this.

`import * as React from 'react'; import { createRoot } from 'react-dom/client'; import CssBaseline from '@mui/material/CssBaseline'; import { ThemeProvider } from '@mui/material/styles'; import App from './App'; import theme from './theme'; import { MeetingProvider, lightTheme, } from 'amazon-chime-sdk-component-library-react';

const rootElement = document.getElementById('root'); const root = createRoot(rootElement!);

root.render( <ThemeProvider theme={theme}> <MeetingProvider> <CssBaseline /> <App /> </MeetingProvider> </ThemeProvider>, ); `

Amazon Chime SDK React Components Library version

3.2.0

What browsers are you seeing the problem on?

chrome

Browser version

Version 102.0.5005.115 (Official Build) (x86_64)

Device Information

MacOS Monterey version 12.4

Meeting and Attendee ID Information.

No response

Browser console logs

WARNING in ./node_modules/amazon-chime-sdk-js/build/websocketadapter/WebSocketReadyState.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/{workdirectory}/node_modules/amazon-chime-sdk-js/src/websocketadapter/WebSocketReadyState.ts' file: Error: ENOENT: no such file or directory, open ''/{workdirectory}/node_modules/amazon-chime-sdk-js/src/websocketadapter/WebSocketReadyState.ts'

Add any other context about the problem here.

No response

[michhyun1]

Can you try to do a clean install? Meaning remove js sdk from yarn and then adding it back?

[MasahiroHanawa]

@michhyun1 No, it doesn't work. I just try to install create react app by below command.

npx create-react-app my-app

After that, I try to install sdk by below command .

yarn add amazon-chime-sdk-component-library-react amazon-chime-sdk-js styled-components styled-system

and I set up on index.js like this.

` import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { ThemeProvider } from 'styled-components'; import { MeetingProvider, lightTheme, } from 'amazon-chime-sdk-component-library-react';

const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ThemeProvider theme={lightTheme} MeetingProvider App / /MeetingProvider /ThemeProvider ); `

is it something wrong?

[michhyun1]

I see - this is a missing src file from the source map. So apparently the Amazon Chime SDK for Javascript has a sourcemap=true property enabled in the package.json, but we don't actually package the src/ in the npm module when we publish it, so we have the source map but not the src/ code that its mapping to.

I've created a backlog item for our team, and we'll either remove the source map property from the amazon-chime-sdk-js package, or we'll add the src/ folder to the npm module. Not sure which one we'll do yet.

In the meantime, you can apply this property to get rid of the warning: GENERATE_SOURCEMAP=false to your build script. https://create-react-app.dev/docs/advanced-configuration/

Question - how is this blocking you? It's just a warning, right? Is your application failing to build?

[MasahiroHanawa]

@michhyun1 I just add GENERATE_SOURCEMAP=false on .env. It could remove all warning. Thank you!

Question - how is this blocking you? It's just a warning, right? Is your application failing to build? I got these warning only when I try to do same things on clean create-react-app.

Ah, sorry. I make a mistake how to make create-react-app. I just made create-react-app below command.

npx create-react-app my-app --template typescript

and set up above code

Then, it's getting below error.

Should I set something param in MeetingProvider?

`Issues checking in progress... ERROR in src/index.tsx:16:4 TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Props'. 14 | 15 | root.render(

16 | <MeetingProvider> | ^^^^^^^^^^^^^^^ 17 | <BackApp /> 18 | </MeetingProvider>, 19 | );`

[michhyun1]

@MasahiroHanawa I don't quite understand what you're trying to do. Why do you need to create a MeetingProvider? We already provided the Meeting Provider component. Have you looked at the sample demo built with the React library?

https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting

[devalevenkatesh]

closing due to in-activity, please feel free to re-open if still an issue.

[mutaimwiti]

I'm still struggling with this. Going GENERATE_SOURCEMAP=false route is not great for me as I lose the benefit of source maps for local dev.

[devalevenkatesh]

I think the error you are seeing is due to mismatching version of amazon-chime-sdk-js and the component library versions.

Since, you are on v3 for component library check whether you are also on v3 for Amazon Chime SDK for JavaScript (JS SDK). Cause the error you are seeing I believe is coming from 1.x of JS SDK.

I would suggest to go through and setup the Amazon Chime SDK React component library demo first and build based on it to help with the build setup or webpack configs used in the demo.

Michael, provided the link in previous comments: https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting

Here is the same PR on one of the demo we fixed with similar issue: https://github.com/aws-samples/amazon-chime-sdk-smart-video-sending-demo/pull/12

That is just for reference :) please do not use it for your fix and build your apps using latest v3 of both the component library and the JS SDK. Let us know if you are still facing issues with v3 versions.

[Bannini]

We are suffering from the same issue. Unable to remove the line GENERATE_SOURCEMAP=false else our builds fail. Using latest Chime and component library libs.

[devalevenkatesh]

Sorry for the delayed response, but suggest checking my previous comment. I suggest you to update both the component library to either latest v2 or better latest v3 version. This should only occur if you are using mismatched versions I believe.

I linked a PR here in which we fixed a similar issue. I am resolving this for now, but even after upgrading you are still facing this issue, please feel free to re-open this.

[manojkalpana24]

I see - this is a missing src file from the source map. So apparently the Amazon Chime SDK for Javascript has a sourcemap=true property enabled in the package.json, but we don't actually package the src/ in the npm module when we publish it, so we have the source map but not the src/ code that its mapping to.

I've created a backlog item for our team, and we'll either remove the source map property from the amazon-chime-sdk-js package, or we'll add the src/ folder to the npm module. Not sure which one we'll do yet.

In the meantime, you can apply this property to get rid of the warning: GENERATE_SOURCEMAP=false to your build script. https://create-react-app.dev/docs/advanced-configuration/

Question - how is this blocking you? It's just a warning, right? Is your application failing to build?

Since 'src/' is not published we lose the ability to debug the actual source. We need this urgently as it's blocking us from debugging.

[christo-pr]

Any update on this? I'm facing this issue but I'm only using amazon-chime-sdk-js": "^3.12.0", but I'm still getting same sourcemap error for a bunch of libs like:

• /node_modules/amazon-chime-sdk-js/src/activespeakerdetector/DefaultActiveSpeakerDetector.ts
• /node_modules/amazon-chime-sdk-js/src/activespeakerpolicy/DefaultActiveSpeakerPolicy.ts
• node_modules/amazon-chime-sdk-js/src/devicecontroller/NotReadableError.ts

gotta say, I'm only using the messaging sdk from chime. Is there any fix besides GENERATE_SOURCEMAP=false?

[JuanLouTech]

Same here (a year later). I'm also using only "amazon-chime-sdk-js": "^3.18.2" so it looks it is not a version mismatch with another aws package. It is very annoying to see 236 warnings constantly and we need to be able to see real warnings.

Any news?