Unable to launch BotFramework-WebChat "playground" / npm-link into my project

I’d like to do some tinkering with some of WebChat components before I’m raising any other issues (or possibly a PR), however, I’m unable to launch the project - it results in errors. I have cloned master branch of repo, apparently it’s the 4.9.3-0 version.

As per following suggestion in one of the previous issues:

[…] I just cloned and built the repo with no issues. Are you following the steps listed in the build docs? As they indicate, from the root directory you’ll want to:

• Prep the repo by running
  • npm ci
  • npm install
• Run npm run bootstrap
• Run npm run build

_Originally posted by @stevkan in https://github.com/microsoft/BotFramework-WebChat/issues/3379#issuecomment-668735229_

Everything seems to be fine up until I run npm start (I’ve changed port on which the app should start to avoid conflict with other service that runs on my computer - I don’t think it should cause any issues), which produces the following output:

1 verbose cli [
1 verbose cli   '/Users/jc/.nvm/versions/node/v12.14.1/bin/node',
1 verbose cli   '/Users/jc/.nvm/versions/node/v12.14.1/bin/npm',
1 verbose cli   'start'
1 verbose cli ]
2 info using npm@6.13.4
3 info using node@v12.14.1
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle botframework-webchat-root@4.9.3-0~prestart: botframework-webchat-root@4.9.3-0
6 info lifecycle botframework-webchat-root@4.9.3-0~start: botframework-webchat-root@4.9.3-0
7 verbose lifecycle botframework-webchat-root@4.9.3-0~start: unsafe-perm in lifecycle true
8 verbose lifecycle botframework-webchat-root@4.9.3-0~start: PATH: /Users/jc/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/jc/DEV/BotFramework-WebChat/node_modules/.bin:/Users/jc/.nvm/versions/node/v12.14.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/share/dotnet:~/.dotnet/tools:/Library/Apple/usr/bin:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/jc/DEV/BotFramework-WebChat/node_modules/.bin
9 verbose lifecycle botframework-webchat-root@4.9.3-0~start: CWD: /Users/jc/DEV/BotFramework-WebChat
10 silly lifecycle botframework-webchat-root@4.9.3-0~start: Args: [
10 silly lifecycle   '-c',
10 silly lifecycle   'concurrently --kill-others --raw "serve" "serve -p 9009 -c serve-test.json" "lerna run --ignore playground --parallel --stream start"'
10 silly lifecycle ]
11 silly lifecycle botframework-webchat-root@4.9.3-0~start: Returned: code: 1  signal: null
12 info lifecycle botframework-webchat-root@4.9.3-0~start: Failed to exec start script
13 verbose stack Error: botframework-webchat-root@4.9.3-0 start: `concurrently --kill-others --raw "serve" "serve -p 9009 -c serve-test.json" "lerna run --ignore playground --parallel --stream start"`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/jc/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:223:5)
13 verbose stack     at ChildProcess.<anonymous> (/Users/jc/.nvm/versions/node/v12.14.1/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:223:5)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
14 verbose pkgid botframework-webchat-root@4.9.3-0
15 verbose cwd /Users/jc/DEV/BotFramework-WebChat
16 verbose Darwin 19.6.0
17 verbose argv "/Users/jc/.nvm/versions/node/v12.14.1/bin/node" "/Users/jc/.nvm/versions/node/v12.14.1/bin/npm" "start"
18 verbose node v12.14.1
19 verbose npm  v6.13.4
20 error code ELIFECYCLE
21 error errno 1
22 error botframework-webchat-root@4.9.3-0 start: `concurrently --kill-others --raw "serve" "serve -p 9009 -c serve-test.json" "lerna run --ignore playground --parallel --stream start"`
22 error Exit status 1
23 error Failed at the botframework-webchat-root@4.9.3-0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Hmm, okay, well, I tried killing the the service running on 5001, so that I can use that port for starting WebChat instance… Same error… Then I thought maybe it has something to do with v4.9.3-0, so I git fetch && git fetch --tags and git checkout v4.9.2, set the solution with npm ci -> npm i -> npm run bootstrap -> npm run build -> npm start… jeez… Again, same error, diffrent version numbers.

Alright, if I’m unable to start the project (I’m assuming it runs the playground package, if my package.json “scripts” skills are correct), I’ve heard that I can link packages into my solution.

So, what I want to achieve - is to try out variations of components used to render the chat, specifically one of the issues I’m having in my project is that I don’t want the screen reader to read out timestamps. It feels that developers of this repo can’t really decide themselves whether or not it should be read out #2226 and #2018 . I don’t really care about the reasoning why it’s like that. I want to be able to customise such behaviour and therefore I would love to access the source of components so that I can modify their behaviour to my liking, make it configurable and create a PR for that (if it doesn’t match the vision of library’s developers I’d be glad to keep it in my personal fork).

Okay, now with my reasoning out the way, as I mentioned before, I’m unable to run the project, therefore I wanted to try out the package linking (never done it before - what could go wrong?) - after ci | install | bootstrap | build I’d cd into packages/bundle directory - seems to be the main “botframework-webchat” as per package.json “name” key.

So, as per npm-link docs: ➜ bundle git:(master) ✗ npm link which spits out:

npm ERR! code ETARGET
npm ERR! notarget No matching version found for botframework-webchat-core@0.0.0-0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of 'bundle'
npm ERR! notarget 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jc/.npm/_logs/2020-08-07T09_51_23_454Z-debug.log

No matching version … @0.0.0-0 … eh? Oh really, the dependencies list ""botframework-*": "0.0.0-0" 😳 But wait - the “version” listed in packages/bundle/package.json is also 0.0.0-0 - now I’m lost.

Okay, okay, I don’t really need the bundle, I need the botframework-webchat-component to adjust the TimeStamp.js and check whether the screen reader behaves the way I want to:

➜ bundle git:(master) ✗ cd ../component && npm link followed by

npm ERR! code ETARGET
npm ERR! notarget No matching version found for botframework-webchat-core@0.0.0-0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of 'component'
npm ERR! notarget 

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jc/.npm/_logs/2020-08-07T10_04_23_928Z-debug.log

not impressed 🙄

What if I just npm install?

cd ~/DEV/my-custom-chat -> npm i ../BotFramework-WebChat/packages/component

[..]
4244 warn botframework-webchat@0.0.0-0 had bundled packages that do not match the required version(s). They have been replaced with non-bundled versions.
4245 warn ajv-keywords@3.4.1 requires a peer of ajv@^6.9.1 but none is installed. You must install peer dependencies yourself.
4246 warn botframework-webchat-component@0.0.0-0 requires a peer of react@^16.8.6 but none is installed. You must install peer dependencies yourself.
4247 warn botframework-webchat-component@0.0.0-0 requires a peer of react-dom@^16.8.6 but none is installed. You must install peer dependencies yourself.
4248 warn babel-loader@8.1.0 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
4249 warn babel-loader@8.1.0 requires a peer of webpack@>=2 but none is installed. You must install peer dependencies yourself.
4250 warn react-dictate-button@1.2.2 requires a peer of react@^16.4.1 but none is installed. You must install peer dependencies yourself.
4251 warn react-film@2.1.0 requires a peer of react@^16.8.6 but none is installed. You must install peer dependencies yourself.
4252 warn react-film@2.1.0 requires a peer of react-dom@^16.8.6 but none is installed. You must install peer dependencies yourself.
4253 warn react-redux@7.2.0 requires a peer of react@^16.8.3 but none is installed. You must install peer dependencies yourself.
4254 warn react-say@2.0.1-master.c5d6304 requires a peer of react@^16.8.6 but none is installed. You must install peer dependencies yourself.
4255 warn react-scroll-to-bottom@3.0.0 requires a peer of react@^16.8.6 but none is installed. You must install peer dependencies yourself.
4256 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
4257 warn enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename '/Users/jc/DEV/my-custom-chat/node_modules/.staging/fsevents-bf7840b8/node_modules/aproba' -> '/Users/jc/DEV/my-custom-chat/node_modules/.staging/aproba-3e68b35b'
4258 verbose enoent SKIPPING OPTIONAL DEPENDENCY: This is related to npm not being able to find a file.
4258 verbose enoent SKIPPING OPTIONAL DEPENDENCY:
4259 verbose stack Error: ENOENT: no such file or directory, rename '/Users/jc/DEV/my-custom-chat/node_modules/.staging/botframework-webchat-5628f055/node_modules/@babel/code-frame' -> '/Users/jc/DEV/my-custom-chat/node_modules/.staging/@babel/code-frame-8abfb7a6'
4260 verbose cwd /Users/jc/DEV/my-custom-chat
4261 verbose Darwin 19.6.0
4262 verbose argv "/Users/jc/.nvm/versions/node/v12.14.1/bin/node" "/Users/jc/.nvm/versions/node/v12.14.1/bin/npm" "i" "../../../BotFramework-WebChat/packages/bundle"
4263 verbose node v12.14.1
4264 verbose npm  v6.13.4
4265 error code ENOENT
4266 error syscall rename
4267 error path /Users/jc/DEV/my-custom-chat/node_modules/.staging/botframework-webchat-5628f055/node_modules/@babel/code-frame
4268 error dest /Users/jc/DEV/my-custom-chat/node_modules/.staging/@babel/code-frame-8abfb7a6
4269 error errno -2
4270 error enoent ENOENT: no such file or directory, rename '/Users/jc/DEV/my-custom-chat/node_modules/.staging/botframework-webchat-5628f055/node_modules/@babel/code-frame' -> '/Users/jc/DEV/my-custom-chat/node_modules/.staging/@babel/code-frame-8abfb7a6'
4271 error enoent This is related to npm not being able to find a file.
4272 verbose exit [ -2, true ]

Something about wrong versions of dependencies? my-custom-chat/package.json:

{
  "name": "my-custom-chat",
  "description": "",
  "private": true,
  "dependencies": {
    "@mdi/js": "^4.7.95",
    "@mdi/react": "^1.2.1",
    "@microsoft/applicationinsights-react-js": "^2.5.4",
    "@microsoft/applicationinsights-web": "^2.5.4",
    "abort-controller": "^3.0.0",
    "botframework-webchat": "^4.9.2",
    "classnames": "^2.2.6",
    "core-js": "^2.6.9",
    "css-vars-ponyfill": "^2.1.1",
    "file-saver": "^2.0.2",
    "focus-trap-react": "^6.0.0",
    "http-proxy": "^1.18.0",
    "moment": "^2.27.0",
    "query-string": "^6.7.0",
    "react": "^16.13.1",
    "react-app-polyfill": "^1.0.6",
    "react-day-picker": "^7.4.5",
    "react-dom": "^16.13.1",
    "react-dropzone": "^10.2.1",
    "react-ga": "^3.1.2",
    "react-gtm-module": "^2.0.10",
    "react-markdown": "^4.3.1",
    "react-redux": "^7.2.1",
    "react-remove-scroll": "^2.3.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "react-transition-group": "^4.3.0",
    "redux": "^4.0.5",
    "redux-persist": "^5.10.0",
    "redux-persist-transform-filter": "0.0.18",
    "redux-saga": "^1.0.3",
    "scroll-into-view-if-needed": "^2.2.24"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.11.2",
    "@testing-library/react": "^10.4.7",
    "@testing-library/react-hooks": "^3.4.1",
    "@types/classnames": "^2.2.8",
    "@types/core-js": "^2.5.1",
    "@types/enzyme": "^3.10.5",
    "@types/enzyme-adapter-react-16": "^1.0.6",
    "@types/file-saver": "^2.0.1",
    "@types/jest": "^25.2.3",
    "@types/markdown-it": "0.0.7",
    "@types/node": "^10.14.8",
    "@types/query-string": "^6.3.0",
    "@types/react": "^16.9.34",
    "@types/react-dom": "^16.9.6",
    "@types/react-gtm-module": "^2.0.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-router-dom": "^4.3.3",
    "@types/react-transition-group": "^2.9.2",
    "@types/redux-mock-store": "^1.0.2",
    "@types/redux-persist": "^4.3.1",
    "@types/redux-persist-transform-filter": "0.0.4",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.5.0",
    "eslint": "^6.8.0",
    "express": "^4.17.1",
    "husky": "^1.3.1",
    "jest-mock-console": "^1.0.1",
    "lint-staged": "^8.2.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.4",
    "redux-saga-test-plan": "^4.0.0-beta.3",
    "tslib": "^1.11.1",
    "tslint": "^5.18.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.2.0",
    "typesafe-actions": "^3.4.0",
    "typescript": "^3.8.3"
  },
  "optionalDependencies": {
    "fsevents": "1.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json}\"",
    "serve": "node serve.ts"
  }
}

So, two questions:

1. how do I npm start “BotFramework-WebChat” project?
2. how do I correctly link individual packages into my own project?

[compulim]

We are using lerna for monorepo management. It handle npm link and other symlink/junction automatically. When you run npm run bootstrap, it run lerna bootstrap, which actually do the following:

• Go to every packages/* folder, then run the following
  • Backup package.json
  • Remove peer packages from package.json
    • For example, in packages/component/, it remove botframework-webchat-core under dependencies. This is because the package is a peer at /packages/core/
  • Run npm install
  • Restore the backup package.json
• Go to every packages/* folder again after all npm install are done
  • Build symlink for every peer packages
    • For example, as package/component/ depends on packages/core/
    • cd packages/component/node_modules
    • mklink /j botframework-webchat-core ../../core

So, after your ran npm run bootstrap, you should see:

• packages/component/node_modules is populated with tons of packages
• packages/component/node_modules/botframework-webchat-core is a symlink/junction to packages/core
• packages/bundle/node_modules/botframework-directlinejs is installed normally (it is outside of Web Chat)

You should not need to handle npm link or symlink yourself.

If you don’t see this, please check why lerna bootstrap failed to do so.

I am trying out on a “new machine” by using Docker on a Node.js 14.6.0 image on Linux. I start a new machine by running:

docker run --entrypoint bash -it --rm -p 3000:3000 node:14.6.0

This means, run node:14.6.0 image, using bash shell, interactive with terminal, remove/cleanup after exit, expose port 3000 as port 3000.

Then, after it started:

cd ~
git clone https://github.com/microsoft/BotFramework-WebChat.git
cd BotFramework-WebChat
npm install
npm run bootstrap
npm run build
cd packages/playground
npm start

Will report more here when it’s done.

[stevkan]

@cimbis, I know you are using nvm, but have you made any changes to the .npmrc (or equivalent) file that is changing how Node is running on your machine?

As for building the repo, could you try the following to see if any make a difference:

• Building with elevated rights?
• Not using nvm and instead use a direct install of Node?
• Attempting on a different machine you have access to?

@compulim, do you have any thoughts that might assist the customer on this?