[Bug]: Build issue if "@fluidframework/test-client-utils": "~1.2.3" isn't in devDependencies on Webpack 5

[mscherotter]

Please review FAQ and Known issues before filing a new item!

• [X ] I have reviewed the FAQ and known issues and did not find my topic

Please note: any submissions with insufficient reproducible information will be marked as 'Waiting for customer input' and may be closed is there is no response

Describe the bug
I have updated the packages in package.json for @microsoft/live-share to 1.0.0-preview.7 and the other packages and I now see these errors on TypeScript compiling:

teams.ts:75:44 - error TS2345: Argument of type 'ILiveShareHost | LiveShareHost' is not assignable to parameter of type 
'ILiveShareHost'.
  Type 'LiveShareHost' is not assignable to type 'ILiveShareHost'.
    The types returned by 'getFluidTenantInfo()' are incompatible between these types.
      Type 'Promise<import("D:/Source/Repos/gallery/web/node_modules/@microsoft/teams-js/dist/MicrosoftTeams").IFluidTenantInfo>' is not assignable to type 'Promise<import("D:/Source/Repos/gallery/web/node_modules/@microsoft/live-share/bin/interfaces").IFluidTenantInfo>'.
        Type 'IFluidTenantInfo' is missing the following properties from type 'IFluidTenantInfo': ordererEndpoint, storageEndpoint

       const client = new LiveShareClient(host);
                                          ~~~~

`

Provide a clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

Provide a clear and concise description of what you expected to happen.

Screenshots

If applicable, add screenshots to help explain your problem.

Desktop(s) (please complete the following information):

• OS: [e.g. macOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

Add any other context about the problem here.

[ryanbliss]

@mscherotter not getting a repro. Can you please share your package.json dependencies and devDependencies?

[mscherotter]

It built this time, but now I'm getting an error during webpack:
"dependencies": {
"@adobe/spectrum-css-grid": "^0.5.0",
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
"@azure/cognitiveservices-computervision": "^8.2.0",
"@azure/cognitiveservices-personalizer": "^2.0.1",
"@azure/data-tables": "^13.1.2",
"@azure/ms-rest-azure-js": "^2.1.0",
"@azure/msal-node": "^1.14.5",
"@azure/storage-blob": "^12.12.0",
"@babylonjs/accessibility": "^5.50.1",
"@microsoft/applicationinsights-web": "^2.8.5",
"@microsoft/live-share": "1.0.0-preview.7",
"@microsoft/live-share-canvas": "1.0.0-preview.7",
"@microsoft/teams-js": "^2.5.0",
"@spectrum-css/accordion": "^3.0.24",
"@spectrum-css/actionbutton": "^1.1.14",
"@spectrum-css/actiongroup": "^1.0.26",
"@spectrum-css/asset": "^3.0.22",
"@spectrum-css/button": "^6.0.13",
"@spectrum-css/buttongroup": "^5.0.13",
"@spectrum-css/card": "^4.0.22",
"@spectrum-css/checkbox": "^3.1.3",
"@spectrum-css/clearbutton": "^1.2.12",
"@spectrum-css/closebutton": "^1.2.13",
"@spectrum-css/dialog": "^6.0.15",
"@spectrum-css/divider": "^1.0.27",
"@spectrum-css/fieldlabel": "^4.0.28",
"@spectrum-css/icon": "^3.0.23",
"@spectrum-css/logicbutton": "^1.2.11",
"@spectrum-css/menu": "^4.0.4",
"@spectrum-css/modal": "^3.0.23",
"@spectrum-css/page": "^5.0.11",
"@spectrum-css/pagination": "^5.0.14",
"@spectrum-css/picker": "^1.2.11",
"@spectrum-css/popover": "^5.0.18",
"@spectrum-css/progressbar": "^1.0.32",
"@spectrum-css/progresscircle": "^1.0.23",
"@spectrum-css/quickaction": "^3.0.26",
"@spectrum-css/radio": "^3.0.24",
"@spectrum-css/search": "^4.2.12",
"@spectrum-css/searchwithin": "^3.4.19",
"@spectrum-css/site": "^3.0.0",
"@spectrum-css/slider": "^3.1.7",
"@spectrum-css/splitbutton": "^5.0.13",
"@spectrum-css/switch": "^1.0.23",
"@spectrum-css/table": "^4.0.19",
"@spectrum-css/tabs": "^3.2.18",
"@spectrum-css/tag": "^3.3.14",
"@spectrum-css/taggroup": "^3.3.14",
"@spectrum-css/textfield": "^3.2.4",
"@spectrum-css/thumbnail": "^2.0.17",
"@spectrum-css/toast": "^7.0.11",
"@spectrum-css/tokens": "^4.0.0",
"@spectrum-css/treeview": "^6.0.20",
"@spectrum-css/typography": "^4.0.20",
"@spectrum-css/underlay": "^2.0.31",
"@spectrum-css/vars": "^8.0.0",
"@stripe/stripe-js": "^1.32.0",
"@types/applicationinsights-js": "^1.0.9",
"@types/bingmaps": "0.0.1",
"@types/jqueryui": "^1.12.16",
"@types/office-runtime": "^1.0.25",
"adaptivecards-templating": "^2.3.1",
"applicationinsights": "^2.3.3",
"axios": "^0.21.4",
"azure-storage": "^2.10.7",
"babylonjs": "^5.44.0",
"babylonjs-gui": "^5.39.0",
"babylonjs-loaders": "^5.44.0",
"bingmaps": "^2.0.3",
"botbuilder": "^4.19.2",
"commonjs": "0.0.1",
"compression": "^1.7.4",
"connect-azuretables": "^1.0.20",
"cookie-parser": "^1.4.6",
"core-js": "^3.23.4",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.1",
"express-session": "^1.17.3",
"fluid-framework": "~1.2.3",
"i18n": "^0.13.4",
"jquery": "^3.6.0",
"jquery-ui": "^1.13.2",
"loadicons": "^1.0.0",
"localstorage-slim": "^2.4.0",
"ms-rest-azure": "^3.0.2",
"nocache": "^3.0.4",
"pepjs": "^0.5.3",
"pug": "^3.0.2",
"read-excel-file": "^5.4.2",
"rss-parser": "^3.12.0",
"sharp": "^0.30.7",
"stripe": "^8.222.0",
"swup": "^2.0.16",
"typescript": "^4.7.4",
"uuid": "^8.3.2",
"webpack-jquery-ui": "^2.0.1",
"xhr2": "^0.2.1"
},
"devDependencies": {
"@babel/preset-typescript": "^7.18.6",
"@babylonjs/core": "^5.44.0",
"@babylonjs/loaders": "^5.44.0",
"@playwright/test": "^1.30.0",
"@types/cors": "^2.8.12",
"@types/express": "^4.17.13",
"@types/express-session": "^1.17.5",
"@types/gtag.js": "0.0.8",
"@types/jest": "^26.0.24",
"@types/jquery": "^3.5.14",
"@types/office-js": "^1.0.267",
"jest": "^27.5.1",
"office-addin": "0.0.1",
"supertest": "^6.3.1",
"supertest-session": "^4.1.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
},

ERROR in ./node_modules/@microsoft/live-share/bin/LiveShareClient.js 22:28-72
Module not found: Error: Can't resolve '@fluidframework/test-client-utils' in 'D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\bin'
resolve '@fluidframework/test-client-utils' in 'D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\bin'
Parsed request is a module
using description file: D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\package.json (relative path: ./bin)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\bin\node_modules doesn't exist or is not a directory
looking for modules in D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules
single file module
using description file: D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\package.json (relative path: ./node_modules/@fluidframework/test-client-utils)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules@fluidframework\test-client-utils doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules@fluidframework\test-client-utils.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules@fluidframework\test-client-utils.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules@fluidframework\test-client-utils.wasm doesn't exist
D:\Source\Repos\gallery\web\node_modules@microsoft\live-share\node_modules@fluidframework\test-client-utils doesn't exist
D:\Source\Repos\gallery\web\node_modules@microsoft\node_modules doesn't exist or is not a directory
D:\Source\Repos\gallery\web\node_modules\node_modules doesn't exist or is not a directory
looking for modules in D:\Source\Repos\gallery\web\node_modules
single file module
using description file: D:\Source\Repos\gallery\web\package.json (relative path: ./node_modules/@fluidframework/test-client-utils)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@fluidframework\test-client-utils doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@fluidframework\test-client-utils.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@fluidframework\test-client-utils.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
D:\Source\Repos\gallery\web\node_modules@fluidframework\test-client-utils.wasm doesn't exist
D:\Source\Repos\gallery\web\node_modules@fluidframework\test-client-utils doesn't exist
D:\Source\Repos\gallery\node_modules doesn't exist or is not a directory
D:\Source\Repos\node_modules doesn't exist or is not a directory
D:\Source\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
@ ./node_modules/@microsoft/live-share/bin/index.js 32:13-41

[ryanbliss]

If you add "@fluidframework/test-client-utils": "~1.2.3" do your devDependencies, does that change anything? It shouldn't, since @microsoft/live-share already takes a dev dependency on it...but we normally put it in our samples so might be worth a shot.

I'm seeing something about "Field browser doesn't contain a valid alias configuration", this may be a Webpack 5 quirk (Webpack 5 doesn't polyfill). Here is one thread on this specific one: https://stackoverflow.com/questions/43037590/field-browser-doesnt-contain-a-valid-alias-configuration

Hopefully one of these two things helps, let me know if not.

[mscherotter]

Adding that to the devDependencies fixes the build and I'm not getting the browser error either.

Thanks!

[ryanbliss]

@pradeepananth looks like there are build errors if you don't have "@fluidframework/test-client-utils": "~1.2.3" in devDependencies. This would have been an issue before as well, something to look into.