MicrosoftDocs / azure-docs

Open source documentation of Microsoft Azure
https://docs.microsoft.com/azure
Creative Commons Attribution 4.0 International
10.01k stars 21k forks source link

Fluid Framework Hello World Error - Dice Roller - Azure Fluid Relay #122188

Closed derekfreed closed 2 weeks ago

derekfreed commented 2 weeks ago

I wanted to open an issue on the FluidHelloWorld repo instead, but there was no option. I hope it is ok to open one here!

When I cloned the repo and ran npm install followed by npm start, I had some errors instead of seeing the hello world example functioning locally. I would appreciate any guidance as I was hoping to quickly get something up and running to try out the Fluid Framework. Thank you!

I am using:

Here's what I tried:

  1. npm install yielded:
45 packages are looking for funding
  run `npm fund` for details

45 vulnerabilities (2 low, 15 moderate, 23 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
  1. npm audit fix yielded:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: @fluid-example/hello-world@0.1.0
npm ERR! Found: fluid-framework@1.0.2
npm ERR! node_modules/fluid-framework
npm ERR!   fluid-framework@"~1.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer fluid-framework@"^1.2.5" from @fluidframework/azure-client@1.0.3
npm ERR! node_modules/@fluidframework/azure-client
npm ERR!   @fluidframework/azure-client@"~1.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution. 
  1. and finally npm start yielded:
    
    > @fluid-example/hello-world@0.1.0 start
    > start-server-and-test start:server 7070 start:client

1: starting server using command "npm run start:server" and when url "[ 'http://localhost:7070' ]" is responding with HTTP status code 200 running tests using command "npm run start:client"

@fluid-example/hello-world@0.1.0 start:server npx @fluidframework/azure-local-service@latest

info: Successfully connected to Db {"eventName":"LogMessage:C:\Users\user1\AppData\Local\npm-cache\_npx\9c5788540ecb78ee\node_modules\@fluidframework\server-services-core\dist\mongo.js:connect","id":"7b1bd967-2218-41de-a467-6964697e42c7","label":"winston","properties":"{}","timestamp":"2024-05-02T20:28:14.667Z","type":"Log"} info: Starting tinylicious@0.1.0 {"label":"winston","timestamp":"2024-05-02T20:28:14.672Z"} info: Listening on port 7070 {"label":"winston","timestamp":"2024-05-02T20:28:14.701Z"} info: HEAD / 200 3.453 ms - 107 {"label":"winston","timestamp":"2024-05-02T20:28:15.898Z"}

@fluid-example/hello-world@0.1.0 start:client webpack serve

(node:41912) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated. (Use node --trace-deprecation ... to show where the warning was created) i 「wds」: Project is running at http://localhost:8080/ i 「wds」: webpack output is served from / i 「wds」: Content not from webpack is served from C:\Users\user1\work\repos\FluidHelloWorld node:internal/crypto/hash:80 this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache()); ^

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:80:19) at Object.createHash (node:crypto:139:10) at module.exports (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\webpack\lib\NormalModule.js:471:10) at C:\Users\user1\work\repos\FluidHelloWorld\node_modules\webpack\lib\NormalModule.js:503:5 at C:\Users\user1\work\repos\FluidHelloWorld\node_modules\webpack\lib\NormalModule.js:358:12 at C:\Users\user1\work\repos\FluidHelloWorld\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array. (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\loader-runner\lib\LoaderRunner.js:205:4) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error', 'error:0308010C:digital envelope routines::unsupported' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }

Node.js v20.12.2 Error: Command failed with exit code 1: npm run start:client at makeError (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\start-server-and-test\node_modules\execa\lib\error.js:60:11) at handlePromise (C:\Users\user1\work\repos\FluidHelloWorld\node_modules\start-server-and-test\node_modules\execa\index.js:118:26) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) { shortMessage: 'Command failed with exit code 1: npm run start:client', command: 'npm run start:client', escapedCommand: '"npm run start:client"', exitCode: 1, signal: undefined, signalDescription: undefined, stdout: undefined, stderr: undefined, failed: true, timedOut: false, isCanceled: false, killed: false }



---
#### Document Details

⚠ *Do not edit this section. It is required for learn.microsoft.com ➟ GitHub issue linking.*

* ID: ef3439fd-6651-b743-3854-6fe89f120cbc
* Version Independent ID: 99ed4c62-0e99-5233-7e95-0d7072c2256a
* Content: [Quickstart: Dice roller - Azure Fluid Relay](https://learn.microsoft.com/en-us/azure/azure-fluid-relay/quickstarts/quickstart-dice-roll)
* Content Source: [articles/azure-fluid-relay/quickstarts/quickstart-dice-roll.md](https://github.com/MicrosoftDocs/azure-docs/blob/main/articles/azure-fluid-relay/quickstarts/quickstart-dice-roll.md)
* Service: **azure-fluid**
* GitHub Login: @GrantMeStrength
* Microsoft Alias: **jken**
derekfreed commented 2 weeks ago

I'm not sure what may have fixed it, but I just ran:

  1. npm install webpack@latest
  2. npm install html-webpack-plugin@latest
  3. npm install fluid-framework@latest
  4. npm audit fix --force
  5. npm start

and it worked! 🎉🎉🎉I'm seeing the dice now: image

this issue seems to have to do with out of date package dependencies.

PesalaPavan commented 2 weeks ago

@derekfreed It looks like your issue is resolved since you closed this thread. If there are further questions regarding this matter, please tag me in a comment. I will reopen it and we will gladly continue the discussion.