search

OfficeDev / teams-toolkit

Developer tools for building Teams apps
Other
468 stars 194 forks source link

React with Fluent UI Tab Error: #12261

Open ThomasPe opened 3 months ago

ThomasPe commented 3 months ago

Describe the bug A newly created Tab => React with Fluent UI => TypeScript results in the following error when running the app without any other changes:

WARNING in ./node_modules/@fluentui/react-window-provider/lib/WindowProvider.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\WindowProvider.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\WindowProvider.tsx'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\index.ts'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/version.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\version.ts' file: Error: ENOENT: no such file or directory, open 'C:\Code\temp\fluenttest\node_modules\@fluentui\react-window-provider\src\version.ts'

I've tried it twice with the same result. Also on a different PC.

VS Code Extension Information (please complete the following information):

CLI Information (please complete the following information):

Yimin-Jin commented 3 months ago

We apologize for the inconvenience caused by this warning log. Please note that it is a warning-level log and does not prevent the app from starting. We are actively working on resolving this issue and expect to release a fix in the upcoming pre-release.

vsonkar-csod commented 2 months ago

Im facing the same error and it's not loading the app for me!

github-actions[bot] commented 2 months ago

The issue is milestoned with sprint milestone CY24Q3-2Wk11 (Aug 25 - Sep 07) and a work item created: https://msazure.visualstudio.com/9660fff2-2363-48b0-9e15-64df2283e932/_workitems/edit/29244323

Yimin-Jin commented 2 months ago

Im facing the same error and it's not loading the app for me!

Could you please provide the error logs? From our side, the warning logs you mentioned do not seem to prevent the Teams app from starting.

Yimin-Jin commented 2 months ago

We have fixed this bug and will release it in the next prerelease. https://github.com/OfficeDev/teams-toolkit/pull/12332

redlab-chris commented 1 month ago

The same warnings are generated when using Fluent UI v8 (8.121.4) in my project in combination with web pack and source-map-loader.

WARNING in ./node_modules/@fluentui/react-window-provider/lib/WindowProvider.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C...\node_modules\@fluentui\react-window-provider\src\WindowProvider.tsx' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules\@fluentui\react-window-provider\src\WindowProvider.tsx'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/index.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules\@fluentui\react-window-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules\@fluentui\react-window-provider\src\index.ts'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/version.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules\@fluentui\react-window-provider\src\version.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules\@fluentui\react-window-provider\src\version.ts'

It looks like an issue in the 3 .js.map files in folder ..\node_modules\@fluentui\react-window-provider\lib. These source maps contain references to typescript source files (.ts, tsx) but the source files are javascript files (e.g. WindowProvider.js) and thus cannot be found by the source-map-loader.

The references to package react-window-provider are like this in my project.

├─┬ @fluentui/react@8.121.4 │ ├─┬ @fluentui/react-hooks@8.8.16 │ │ └── @fluentui/react-window-provider@2.2.28 deduped │ └── @fluentui/react-window-provider@2.2.28 └─┬ @fluentui/utilities@8.15.19 └── @fluentui/react-window-provider@2.2.28 deduped

adding this to the webpack.config.js helps ;)

ignoreWarnings: [/Failed to parse source map/],

Yimin-Jin commented 1 month ago

The same warnings are generated when using Fluent UI v8 (8.121.4) in my project in combination with web pack and source-map-loader.

WARNING in ./node_modules/@fluentui/react-window-provider/lib/WindowProvider.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C...\node_modules@fluentui\react-window-provider\src\WindowProvider.tsx' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules@fluentui\react-window-provider\src\WindowProvider.tsx'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/index.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules@fluentui\react-window-provider\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules@fluentui\react-window-provider\src\index.ts'

WARNING in ./node_modules/@fluentui/react-window-provider/lib/version.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from 'C:...\node_modules@fluentui\react-window-provider\src\version.ts' file: Error: ENOENT: no such file or directory, open 'C:...\node_modules@fluentui\react-window-provider\src\version.ts'

It looks like an issue in the 3 .js.map files in folder ..\node_modules@fluentui\react-window-provider\lib. These source maps contain references to typescript source files (.ts, tsx) but the source files are javascript files (e.g. WindowProvider.js) and thus cannot be found by the source-map-loader.

The references to package react-window-provider are like this in my project.

├─┬ @fluentui/react@8.121.4 │ ├─┬ @fluentui/react-hooks@8.8.16 │ │ └── @fluentui/react-window-provider@2.2.28 deduped │ └── @fluentui/react-window-provider@2.2.28 └─┬ @fluentui/utilities@8.15.19 └── @fluentui/react-window-provider@2.2.28 deduped

adding this to the webpack.config.js helps ;)

ignoreWarnings: [/Failed to parse source map/],

You can check if your project uses react-scripts. If it does, our suggested solution is to replace react-scripts with vite. You can refer to this PR for more details: migrate react-script to vite.

microsoft-github-policy-service[bot] commented 3 weeks ago

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. As it is labeled with bug, it will be manually handled