Update imports and incorporate code review suggestions

package.json

@@ -4,37 +4,35 @@
     "description": "",
     "license": "MIT",
     "scripts": {
-        "build": "npm run format && npm run pack",
+        "build": "npm run format && npm run webpack",
         "compile": "tsc -b",
         "dev": "cross-env FLUID_CLIENT='local' webpack-dev-server",
         "dev:azure": "cross-env FLUID_CLIENT='azure' webpack-dev-server",
         "format": "prettier src --write",
         "lint": "eslint src",
-        "pack": "cross-env FLUID_CLIENT='azure' webpack",
+        "webpack": "cross-env FLUID_CLIENT='azure' webpack",
         "start": "npm run dev"
     },
     "dependencies": {
-        "@fluentui/react-icons": "^2.0.221",        
-        "@fluidframework/tree": "2.0.0-dev-rc.1.0.0.224419",
-        "@fluidframework/azure-client": "2.0.0-dev-rc.1.0.0.224419",
-        "@fluidframework/telemetry-utils": "2.0.0-dev-rc.1.0.0.224419",
-        "@fluidframework/test-runtime-utils": "2.0.0-dev-rc.1.0.0.224419",
+        "@fluentui/react-icons": "^2.0.221", 
+        "@fluidframework/azure-client": "2.0.0-dev-rc.1.0.0.225277",
+        "@fluidframework/telemetry-utils": "2.0.0-dev-rc.1.0.0.225277",
+        "@fluidframework/test-runtime-utils": "2.0.0-dev-rc.1.0.0.225277",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "axios": "^1.6.2",
         "dotenv": "^16.0.2",
-        "fluid-framework": "2.0.0-dev-rc.1.0.0.224419",
+        "fluid-framework": "2.0.0-dev-rc.1.0.0.225277",
         "guid-typescript": "^1.0.9",
         "hashids": "^2.2.10",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     },
     "devDependencies": {
-        "@fluidframework/devtools": "2.0.0-dev-rc.1.0.0.224419",
+        "@fluidframework/devtools": "2.0.0-dev-rc.1.0.0.225277",
         "@types/debug": "^4.1.7",
         "@typescript-eslint/eslint-plugin": "^5.38.0",
-        "@typescript-eslint/parser": "^5.38.0",
-        "clean-webpack-plugin": "^3.0.0",
+        "@typescript-eslint/parser": "^5.38.0",        
         "copy-webpack-plugin": "^11.0.0",
         "cross-env": "^7.0.3",
         "css-loader": "^5",

src/index.tsx

@@ -4,12 +4,12 @@ import { createRoot } from 'react-dom/client';
 import { loadFluidData, containerSchema } from './infra/fluid';
 import { initializeDevtools } from '@fluidframework/devtools';
 import { devtoolsLogger } from './infra/clientProps';
-import { ITree } from '@fluidframework/tree';
+import { ITree } from 'fluid-framework';
 import { treeConfiguration } from './schema';
 import './output.css';
 import { ReactApp } from './react_app';
 
-async function main() {
+async function start() {
     // create the root element for React
     const app = document.createElement('div');
     app.id = 'app';
@@ -56,4 +56,4 @@ async function main() {
     }
 }
 
-export default main();
+start().catch((error) => console.error(error));

src/infra/fluid.ts

@@ -1,6 +1,5 @@
 import { AzureClient, AzureContainerServices } from '@fluidframework/azure-client';
-import { ContainerSchema, IFluidContainer } from 'fluid-framework';
-import { SharedTree } from '@fluidframework/tree';
+import { ContainerSchema, IFluidContainer, SharedTree } from 'fluid-framework';
 import { clientProps } from './clientProps';
 
 const client = new AzureClient(clientProps);

src/react_app.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useEffect, useState } from 'react';
-import { TreeView, Tree } from '@fluidframework/tree';
+import { TreeView, Tree } from 'fluid-framework';
 import { App, StringArray } from './schema';
 
 export function ReactApp(props: { data: TreeView<App> }): JSX.Element {

src/schema.ts

@@ -1,4 +1,4 @@
-import { TreeConfiguration, SchemaFactory } from '@fluidframework/tree';
+import { TreeConfiguration, SchemaFactory } from 'fluid-framework';
 
 const sf = new SchemaFactory('d302b84c-75f6-4ecd-9663-524f467013e3');
 

webpack.config.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -47,6 +46,7 @@ module.exports = {
         // This line is VERY important for VS Code debugging to attach properly
         // Tamper with it at your own risks
         devtoolModuleFilenameTemplate: '[absolute-resource-path]',
+        clean: true,
     },
     plugins: [
         // No need to write a index.html
@@ -61,9 +61,7 @@ module.exports = {
         // Extract CSS to separate file
         new MiniCssExtractPlugin({
             filename: 'css/mystyles.css',
-        }),
-        // Do not accumulate files in ./dist
-        new CleanWebpackPlugin(),
+        }),        
     ],
     devServer: {
         // keep port in sync with VS Code launch.json