Build ohif index.umd.js - reactjs

I have started with OHIF dicom viewer(https://github.com/OHIF/Viewers).
I forked it and I am running in dev mode.
But, I´d like to create a umd as said in src code: 'index-umd.js'.
I read several docs from ohif code but I ddn´t find what scripts from package.json I have to run to generate a 'index-umd.js'
The viewer package.json is something as:
{
"name": "root",
"private": true,
"workspaces": [
"platform/*",
"extensions/*"
],
"engines": {
"node": ">=10",
"npm": ">=6",
"yarn": ">=1.16.0"
},
"scripts": {
"cm": "npx git-cz",
"build": "lerna run build:viewer --stream",
"build:lt": "lerna run build:viewer:lesion-tracker --stream",
"build:ci": "lerna run build:viewer:ci --stream",
"build:demo": "lerna run build:viewer:demo --stream",
"build:package": "lerna run build:viewer:package --stream",
"build:package-all": "lerna run build:package --parallel --stream",
"dev": "lerna run dev:viewer --stream",
"dev:lt": "lerna run dev:viewer:lesion-tracker --stream",
"dev:project": ".scripts/dev.sh",
"dev:orthanc": "lerna run dev:orthanc --stream",
"orthanc:up": "docker-compose -f .docker/Nginx-Orthanc/docker-compose.yml up",
"start": "yarn run dev",
"test": "yarn run test:unit",
"test:unit": "jest --collectCoverage",
"test:unit:ci": "lerna run test:unit:ci --parallel --stream",
"test:e2e": "lerna run test:e2e --stream",
"test:e2e:script-tag": "lerna run test:e2e:script-tag --stream",
"test:e2e:ci": "lerna run test:e2e:ci --stream",
"test:e2e:dist": "lerna run test:e2e:dist --stream",
"test:e2e:serve": "lerna run test:e2e:serve --stream",
"see-changed": "lerna changed",
"docs:publish": "chmod +x ./build-and-publish-docs.sh && ./build-and-publish-docs.sh",
"release": "yarn run lerna:version && yarn run lerna:publish",
"lerna:cache": "./netlify-lerna-cache.sh",
"lerna:restore": "./netlify-lerna-restore.sh",
"lerna:version": "npx lerna version prerelease --force-publish",
"lerna:publish": "lerna publish from-package --canary --dist-tag canary",
"link-list": "npm ls --depth=0 --link=true"
},
"dependencies": {
"#babel/runtime": "^7.5.5",
"core-js": "^3.2.1"
},
"devDependencies": {
"#babel/core": "^7.5.0",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/plugin-proposal-object-rest-spread": "^7.5.5",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-transform-arrow-functions": "^7.2.0",
"#babel/plugin-transform-regenerator": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.5.0",
"#babel/preset-env": "^7.5.0",
"#babel/preset-react": "^7.0.0",
"#percy/cypress": "^2.2.0",
"#webpack-cli/serve": "^1.6.1",
"babel-eslint": "9.x",
"babel-loader": "^8.0.6",
"babel-plugin-inline-react-svg": "1.1.0",
"babel-plugin-module-resolver": "^3.2.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.0.3",
"cross-env": "^5.2.0",
"css-loader": "^3.2.0",
"cypress-file-upload": "^3.5.3",
"dotenv": "^8.1.0",
"eslint": "5.16.0",
"eslint-config-prettier": "^6.4.0",
"eslint-config-react-app": "^4.0.1",
"eslint-plugin-flowtype": "2.x",
"eslint-plugin-import": "2.x",
"eslint-plugin-jsx-a11y": "6.x",
"eslint-plugin-node": "^9.1.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "7.x",
"eslint-plugin-react-hooks": "1.5.0",
"extract-css-chunks-webpack-plugin": "^4.5.4",
"html-webpack-plugin": "^3.2.0",
"husky": "^3.0.0",
"jest": "^24.8.0",
"jest-canvas-mock": "^2.1.0",
"jest-junit": "^6.4.0",
"lerna": "^3.15.0",
"lint-staged": "^9.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"prettier": "^1.18.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.12.11",
"redux-testkit": "^1.0.6",
"serve": "^11.1.0",
"shader-loader": "^1.3.1",
"start-server-and-test": "^1.10.0",
"style-loader": "^1.0.0",
"styled-components": "^5.3.5",
"stylelint": "^10.1.0",
"stylelint-config-recommended": "^2.2.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"terser-webpack-plugin": "^2.1.0",
"webpack": "^4.35.2",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3",
"webpack-hot-middleware": "^2.25.0",
"webpack-merge": "^4.2.1",
"workbox-webpack-plugin": "^5.0.0-beta.1",
"worker-loader": "^2.0.0"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,json,css}": [
"prettier --write",
"git add"
]
},
"resolutions": {
"**/node-gyp": "8.4.1",
"**/#babel/runtime": "7.5.5"
}
}

Related

sh: 1: react-app-rewired: not found when building Dockerfile

I'm getting the following error when trying to build a Create React App v5.0.1 using node 16.15.0 on docker.
It was working fine using node 14.17.0, but due to a failure when I was starting the project in this version I needed to update to node 16.15.0 and now it's failing and I have no clue why, because if I run npm run build outside docker it works well :(
react-app-rewired --max-old-space-size=8192 build sh: 1: react-app-rewired: not found
Dockerfile
FROM node:16.15.0
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install --legacy-peer-deps
RUN ls -lrt
RUN npm i serve -g
EXPOSE 80
ENV NODE_ENV=production
RUN npm run build
ENTRYPOINT [ "sh","bootstrap.sh"]
My package.json
{
"name": "harvest-front",
"version": "1.7.4",
"private": true,
"dependencies": {
"#ant-design/icons": "^4.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.22",
"#fortawesome/free-solid-svg-icons": "^5.10.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"#types/jest": "^27.4.1",
"#types/node": "^17.0.23",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"antd": "^4.20.7",
"apexcharts": "^3.19.2",
"apisauce": "^1.1.0",
"connected-react-router": "^6.5.2",
"dotenv": "^10.0.0",
"formik": "^2.2.9",
"har-validator": "^5.1.5",
"history": "4.10.1",
"js-file-download": "^0.4.9",
"leaflet": "^1.7.1",
"lodash": "^4.17.21",
"moment": "^2.22.2",
"moment-timezone": "^0.5.33",
"papaparse": "^5.2.0",
"password-validator": "^5.0.2",
"prop-types": "^15.6.2",
"query-string": "^6.8.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.7",
"react-clear-cache": "^1.4.12",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "npm:#hot-loader/react-dom#^17.0.2",
"react-error-boundary": "^3.1.4",
"react-intl": "^2.4.0",
"react-leaflet": "2.8.0",
"react-number-format": "^4.3.1",
"react-redux": "^7.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"redis": "^3.1.2",
"redux": "^4.0.1",
"redux-persist": "^6.0.0",
"redux-saga": "^1.0.2",
"source-map-explorer": "^2.5.2",
"typescript": "^4.6.3",
"url-search-params": "^1.1.0",
"xlsx": "^0.18.5",
"yup": "^0.32.11"
},
"resolutions": {
"moment": "2.24.0",
"antd": "4.2.4",
"immer": "9.0.6",
"property-expr": "2.0.3",
"ansi-html": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
"glob-parent": "6.0.1",
"styled-components": "^5"
},
"scripts": {
"prebuild": "npm install react-dom#17.0.2 --save --legacy-peer-deps",
"sonar": "node sonar-project.js",
"start": "react-app-rewired start",
"start::dev": "env-cmd -e dev react-app-rewired start",
"start::qa": "env-cmd -e qa react-app-rewired start",
"start::np": "env-cmd -e np react-app-rewired start",
"build": "react-app-rewired --max-old-space-size=8192 build",
"test": "react-app-rewired test",
"test::ci": "react-app-rewired test --coverage=false --ci --watchAll=false --collectCoverageFrom=src/**/*.js --collectCoverageFrom=!src/assets/**/*.js",
"qa": "PORT=8081 react-scripts start",
"cy::op": "cypress open",
"cy::ru": "cypress run",
"lint": "eslint --max-warnings 0 --ignore-path .gitignore --fix --ext .js,.jsx,.ts,.tsx src",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\"",
"format": "yarn run prettier -- --write",
"check-format": "yarn run prettier -- --list-different",
"validate": "yarn run lint && yarn run test --watchAll --bail",
"createJob": "node ci/createJob.js",
"deleteJob": "node ci/deleteJob.js",
"checkEnvironment": "node ci/checkEnvironment.js",
"cm": "cz",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"generate:gc": "plop --plopfile ./generators/globalComponent.js"
},
"devDependencies": {
"#babel/plugin-proposal-class-properties": "^7.16.0",
"#babel/plugin-proposal-private-methods": "^7.14.5",
"#babel/plugin-proposal-private-property-in-object": "^7.15.4",
"#babel/preset-typescript": "^7.16.7",
"#commitlint/cli": "^16.0.2",
"#commitlint/config-conventional": "^16.0.0",
"#testing-library/cypress": "^8.0.1",
"#testing-library/dom": "^8.5.0",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.1.0",
"#testing-library/react-hooks": "^7.0.2",
"#testing-library/user-event": "^13.3.0",
"#types/lodash": "^4.14.182",
"#types/react-router-dom": "^5.3.3",
"#types/styled-components": "^5.1.24",
"#types/yup": "^0.29.13",
"#typescript-eslint/eslint-plugin": "^5.18.0",
"#typescript-eslint/parser": "^5.18.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^2.0.6",
"commitizen": "^4.2.4",
"customize-cra": "^1.0.0",
"customize-cra-less-loader": "^2.0.0",
"cypress": "9.5.2",
"cypress-file-upload": "^5.0.8",
"cypress-mochawesome-reporter": "^2.3.0",
"cz-conventional-changelog": "^3.3.0",
"env-cmd": "^10.1.0",
"eslint": "^7.11.0",
"eslint-config-prettier": "^6.9.0",
"eslint-plugin-jest-dom": "^3.9.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.29.3",
"eslint-plugin-sonarjs": "^0.6.0",
"eslint-plugin-testing-library": "^4.12.2",
"husky": "^4.2.3",
"jest-axe": "^5.0.1",
"jest-styled-components": "^7.0.8",
"less": "^4.1.2",
"less-loader": "^10.2.0",
"less-vars-to-js": "^1.3.0",
"lint-staged": "^11.1.2",
"plop": "^3.0.5",
"postcss-normalize": "^10.0.1",
"prettier": "^2.3.0",
"react-app-rewired": "^2.2.1",
"react-extras": "^3.0.0",
"react-ga": "^3.3.0",
"react-hot-loader": "^4.13.0",
"reactotron-apisauce": "^3.0.0",
"reactotron-react-js": "^3.3.2",
"reactotron-redux": "^3.1.1",
"reactotron-redux-saga": "^4.2.2",
"resolve-url-loader": "^3.1.2",
"sonarqube-scanner": "^2.8.0",
"styled-components": "^5.3.5"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"#components/(.*)": "<rootDir>/./src/components/$1",
"#util/(.*)": "<rootDir>/./src/util/$1",
"#hooks/(.*)": "<rootDir>/./src/hooks/$1",
"#constants/(.*)": "<rootDir>/./src/constants/$1",
"#containers/(.*)": "<rootDir>/./src/containers/$1",
"#routes/(.*)": "<rootDir>/./src/routes/$1",
"#appRedux/(.*)": "<rootDir>/./src/appRedux/$1"
}
}
}
I did the same update on my Dockerfile and It was solved!
I put all my variables on ENV, and instead of use RUN I used CMD to build my app.
FROM node:16.15.0
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY . /usr/src/app
RUN npm install
RUN npm i serve -g
EXPOSE 80
ENV NODE_ENV=production REACT_APP_API_URL=https://url REACT_APP_AUDITORIA_API_URL=https://url GENERATE_SOURCEMAP=false DISABLE_ESLINT_PLUGIN=true
CMD ["npm", "run", "build"]
ENTRYPOINT ["sh","bootstrap.sh"]

how to fix this error when build next build

error occur when doing build next build, I have installed the module that was not found, but the error still appears
./node_modules/mdx-bundler/dist/client.js
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /vercel/path0/node_modules/preact (see exports field in /vercel/path0/node_modules/preact/package.json)
this my package
{
"name": "x",
"version": "1.2.0",
"private": true,
"scripts": {
"develop": "vercel",
"start": "node ./scripts/next-remote-watch.js ./data",
"dev": "next dev",
"build": "next build && node ./scripts/generate-sitemap",
"serve": "next start",
"analyze": "cross-env ANALYZE=true next build",
"lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts",
"prepare": "husky install"
},
"dependencies": {
"#mailchimp/mailchimp_marketing": "^3.0.65",
"esbuild": "^0.12.15",
"github-slugger": "^1.4.0",
"gray-matter": "^4.0.2",
"image-size": "1.0.0",
"isomorphic-unfetch": "^3.1.0",
"mdx-bundler": "^8.0.1",
"motion": "^10.4.0",
"next": "12.0.2",
"next-themes": "^0.0.14",
"preact": "^10.6.6",
"querystring": "^0.2.1",
"react": "^17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.3.1",
"reading-time": "1.3.0",
"rehype-autolink-headings": "^6.0.0",
"rehype-katex": "^6.0.0",
"rehype-prism-plus": "^1.1.0",
"rehype-slug": "^5.0.0",
"remark-footnotes": "^4.0.0",
"remark-gfm": "^2.0.0",
"remark-math": "^5.0.0",
"sharp": "^0.28.3",
"swr": "^1.1.2",
"unist-util-visit": "^4.0.0"
},
"devDependencies": {
"#next/bundle-analyzer": "12.0.2",
"#svgr/webpack": "^5.5.0",
"#tailwindcss/aspect-ratio": "^0.4.0",
"#tailwindcss/forms": "^0.4.0",
"#tailwindcss/line-clamp": "^0.3.0",
"#tailwindcss/typography": "^0.5.0",
"#types/react": "^17.0.14",
"#types/tailwindcss": "^2.2.0",
"#typescript-eslint/eslint-plugin": "^4.28.1",
"#typescript-eslint/parser": "^4.28.1",
"autoprefixer": "^10.4.0",
"cross-env": "^7.0.3",
"dedent": "^0.7.0",
"eslint": "^7.29.0",
"eslint-config-next": "12.0.2",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"file-loader": "^6.0.0",
"globby": "11.0.3",
"husky": "^6.0.0",
"inquirer": "^8.1.1",
"lint-staged": "^11.0.0",
"next-remote-watch": "^1.0.0",
"postcss": "^8.4.5",
"prettier": "2.2.1",
"socket.io": "^4.1.3",
"socket.io-client": "^4.1.3",
"tailwindcss": "^3.0.7",
"typescript": "^4.3.5",
"vercel": "^24.0.0"
},
"lint-staged": {
"*.+(js|jsx|ts|tsx)": [
"eslint --fix"
],
"*.+(js|jsx|ts|tsx|json|css|md|mdx)": [
"prettier --write"
]
}
}

Error: `fsevents` unavailable (this watcher can only be used on Darwin) in CRA v2.1.7 and craco v3.5.0

I am getting the above error while running jest v23 in a monorepo. The package i am running jest on is built on CRA and craco.
Package.json of my CRA
{
"name": "#sprinklr/chat-web-client",
"version": "0.1.0",
"dependencies": {
"#emotion/core": "^10.0.5",
"#emotion/styled": "^10.0.5",
"#sentry/browser": "^5.8.0",
"#sentry/integrations": "^5.8.0",
"#sprinklr/chat-constants": "2.0.0",
"#sprinklr/chat-entities": "2.0.0",
"#sprinklr/chat-utils": "2.0.0",
"#sprinklr/rest-client": "2.0.0",
"azure-storage": "^2.10.3",
"bluebird": "^3.4.0",
"classnames": "^2.2.6",
"core-js": "^3.0.1",
"emotion": "^10.0.2",
"emotion-theming": "^10.0.5",
"formik": "^1.3.2",
"immutability-helper": "^2.8.1",
"jstz": "^2.1.1",
"lodash": "^4.17.4",
"polished": "^2.3.0",
"prop-types": "^15.5.7",
"react": "^16.8.6",
"react-autosize-textarea": "^6.0.0",
"react-dom": "^16.8.6",
"react-frame-component": "^4.0.2",
"react-redux": "7.2.0",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.7",
"react-transition-group": "^2.5.3",
"react-use": "^14.1.1",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.1",
"reselect": "^4.0.0",
"scriptjs": "^2.5.8",
"shortid": "^2.2.14",
"styled-system": "^3.0.2",
"typesafe-actions": "^2.0.4",
"validate.js": "^0.13.1"
},
"scripts": {
"precommit": "pretty-quick --staged",
"start": "sh internals/build/build-packages.sh && craco start --workspace",
"prebuild": "NODE_ENV=production babel-node internals/build/tools/run prebuild",
"build": "sh internals/build/build.sh",
"analyze": "source-map-explorer build/static/js/main.*",
"eject": "react-scripts eject",
"docz:dev": "docz dev",
"docz:build": "docz build",
"static": "NODE_ENV=production babel-node internals/build/tools/run static/index",
"widget": "NODE_ENV=production babel-node internals/build/tools/run widget/index",
"i18n": "sh internals/i18n/index.sh",
"lint": "eslint src",
"format": "npm run prettier -- --write",
"prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
"validate": "npm run lint && npm run prettier -- --list-different",
"test": "craco test --workspace --env=jsdom",
"test-watch": "npm run test -- --watch",
"test-coverage": "npm run test -- --coverage",
"test-update": "npm run test -- --updateSnapshot"
},
"devDependencies": {
"#babel/cli": "7.2.3",
"#babel/core": "7.2.2",
"#babel/node": "7.2.2",
"#babel/preset-env": "^7.3.1",
"#craco/craco": "^3.5.0",
"#emotion/babel-preset-css-prop": "^10.0.7",
"#sprinklr/chat-types": "2.0.0",
"#testing-library/jest-dom": "4.2.4",
"#testing-library/react": "^9.4.0",
"#types/bluebird": "^3.5.26",
"#types/classnames": "^2.2.7",
"#types/jest": "26.0.0",
"#types/lodash": "^4.14.118",
"#types/node": "^11.13.7",
"#types/react": "^16.8.14",
"#types/react-dom": "^16.8.4",
"#types/react-intl": "^2.3.15",
"#types/react-redux": "^7.1.0",
"#types/react-router": "^4.4.2",
"#types/react-textarea-autosize": "^4.3.3",
"#types/react-transition-group": "^2.0.15",
"#types/redux-logger": "^3.0.6",
"#types/scriptjs": "^0.0.2",
"#types/shortid": "^0.0.29",
"#types/styled-system": "^3.0.8",
"aws-sdk": "^2.392.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-named-asset-import": "^0.2.3",
"babel-plugin-react-intl": "^3.0.1",
"babel-plugin-react-intl-auto": "^1.6.0",
"babel-preset-react-app": "^7.0.0",
"cheerio": "^1.0.0-rc.2",
"docz": "^0.12.15",
"eslint-plugin-prettier": "^2.6.2",
"glob": "^7.1.2",
"husky": "^0.14.3",
"node-sass-chokidar": "^1.3.0",
"prettier": "1.13.7",
"pretty-quick": "^1.6.0",
"react-intl": "^2.8.0",
"source-map-explorer": "^1.5.0",
"terser": "3.16.1",
"ts-jest": "26.1.1",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.16.0",
"tslint-react-hooks": "^1.1.0",
"typescript": "3.4.5",
"typescript-styled-plugin": "^0.13.0",
"webpack-merge": "^4.1.4"
},
"optionalDependencies": {
"fsevents": "1.2.4"
},
"browserslist": [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 11"
]
}
I checked my node_modules and it has fsevents installed. Still getting the error. Most common solution which I found was reinstalling node_modules after deleting yarn.lock but this solution isn't working for me. Neither installing watchman worked.
I am using jestConfig of CRA itself
Solved this issue by installing brew and then doing
brew install watchman
on my mac.

create-react-app script "start" vs manually typing in the command line behaves differently

I have a create-react-app project with the "start" script as "nodemon backend/app.js". Both running yarn start (npm start) or manually typing cd backend --> nodemon app.js run the server fine. However, the script runs into an error when calling for requests whereas the manual option works fine. Any guidance or help would be appreciated. The script option can't seem to retrieve the token whereas the manual option works fine.
package.json
{
"name": "personal_project",
"version": "1.0.0",
"description": "Personal website",
"main": "src/components/App/index.js",
"scripts": {
"test": "jest",
"format": "prettier \"src/**/*.{js,jsx, tsx}\" --write",
"lint": "tslint --project",
"dev": "parcel index.html",
"build": "parcel build index.html",
"start": "nodemon backend/app.js",
"predeploy": "yarn run build",
"deploy": "gh-pages -b master -d build"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wakoong/personal_website.git"
},
"author": "Woosik Koong <woosik.koong#gmail.com>",
"license": "ISC",
"bugs": {
"url": "https://woosika.com/"
},
"homepage": "https://wakoong.github.io/playground/",
"devDependencies": {
"#babel/cli": "^7.6.4",
"#babel/core": "^7.6.4",
"#babel/preset-env": "^7.6.3",
"#babel/preset-react": "^7.6.3",
"#testing-library/jest-dom": "^4.1.2",
"#testing-library/react": "^9.3.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"parcel-bundler": "^1.12.3",
"prettier": "^1.14.2",
"react-table": "^6.10.3",
"tslint": "^5.19.0",
"tslint-config-prettier": "^1.18.0",
"tslint-react": "^4.0.0"
},
"dependencies": {
"#material-ui/core": "^4.3.3",
"#material-ui/icons": "^4.2.1",
"#reach/router": "^1.2.1",
"#types/reach__router": "^1.2.4",
"#types/react": "^16.9.2",
"#types/react-dom": "^16.8.5",
"#types/react-redux": "^7.1.2",
"algotrader": "^2.4.9",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-fetch": "^3.0.4",
"d3": "^5.12.0",
"dotenv": "^7.0.0",
"express": "^4.16.4",
"file-loader": "^3.0.1",
"gh-pages": "^2.1.1",
"http-proxy-middleware": "^0.20.0",
"jest": "^24.9.0",
"marked": "^0.7.0",
"mixin-deep": "^2.0.1",
"mongodb": "^3.2.7",
"mongoose": "^5.6.4",
"morgan": "^1.9.1",
"react": ">=15",
"react-dom": "16.9.0",
"react-google-login": "^5.0.4",
"react-is": "^16.10.2",
"react-markdown": "^4.1.0",
"react-redux": "^6.0.1",
"react-router-dom": "^5.1.2",
"react-window-size": "^1.2.2",
"recharts": "^1.8.5",
"reducers": "^3.0.0-alpha",
"redux": "^4.0.1",
"redux-api-middleware": "^3.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"request": "^2.88.0",
"request-promise": "^4.2.5",
"robinhood": "^1.6.4",
"safer-eval": "^1.3.5",
"set-value": "^3.0.1",
"store": "^2.0.12",
"typescript": "^3.5.3",
"url-loader": "^1.1.2",
"warning": "^4.0.3"
},
"engines": {
"node": "11.x"
}
}

navigator.platform undefined when running Mocha tests with Brace

I'm trying to run tests on React components within Mocha, but I keep stumbling up on this error:
var os = (navigator.platform.match(/mac|win|linux/i) || ["other])[0].toLowerCase();
TypeError: Cannot read property 'match' of undefined
I understand that the error means that the module is having trouble figuring out what platform the code is running on. However this error is being thrown from node_modules/brace/index.js, so it is not something that I have written myself. Is there a way for Mocha to ignore this and continue with the tests?
Here is my package.json:
{
"name": "project",
"version": "0.2.0",
"description": "project",
"scripts": {
"clean:build": "node ./bin/clean.js createdir",
"build:html": "node ./bin/buildHtml.js",
"deployProduction": "node ./bin/deployProduction.js",
"start": "webpack-dev-server --config ./config/webpack.config.dev.js --hot --in line --progress",
"serve": "npm run deployProduction&& supervisor --watch ./production-copy src/js/server",
"prebuild": "npm run clean:build",
"postbuild": "node ./bin/postBuild.js",
"rebuild-win": "set BUILD_TYPE=preview& npm run prebuild & npm run build-win & npm run serve",
"build": "set BUILD_TYPE=final& npm run prebuild & npm run build-win",
"deploy": "npm run build & npm run serve",
"build-win": "set NODE_ENV=production & npm run element-build & npm run build-doc & npm run build:html & webpack -p --config ./config/webpack.config.prod.js --json > webpack.log.json & npm run postbuild",
"lint": "eslint config src/js/**/*.js",
"jscs": "jscs src/js/",
"test": "mocha --compilers js:babel-core/register --require ./test/unit/dom.js --recursive ./test/*.spec.js ",
"test:watch": "npm run test -- --watch",
"element-init": "node node_modules/element-theme/bin/element-theme -i src/js/core/ui/element-theme.css",
"element-build": "node node_modules/element-theme/bin/element-theme -c src/js/core/ui/element-theme.css -o src/js/core/ui/element-theme ",
"build-doc": "node bin/buildDoc.js "
},
"repository": {
"type": "git",
"url": "<our repository>"
},
"license": "MIT",
"bugs": {
"url": "<our url>"
},
"homepage": "<our homepage>",
"dependencies": {
"autoprefixer": "^6.3.6",
"axios": "^0.11.1",
"babel-standalone": "^6.10.3",
"bluebird": "^3.4.0",
"brace": "^0.8.0",
"browserify": "^13.0.1",
"classnames": "2.2.3",
"cls-bluebird": "^1.0.1",
"codemirror": "^5.16.0",
"continuation-local-storage": "^3.1.7",
"dateformat": "^1.0.12",
"diff": "^3.0.1",
"element-theme": "^0.4.0",
"element-ui": "^1.1.5",
"express-history-api-fallback": "^2.0.0",
"filedrop": "^2.0.0",
"fs-extra": "^0.30.0",
"history": "^2.0.2",
"humps": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"jszip": "^3.0.0",
"jszip-utils": "0.0.2",
"lodash": "^4.11.1",
"material-ui": "^0.16.2",
"materialize-css": "^0.97.6",
"normalizr": "^1.0.0",
"raven-js": "^3.9.1",
"react": "^15.4.2",
"react-ace": "^4.1.4",
"react-dom": "^15.4.2",
"react-redux": "^5.0.2",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"react-tap-event-plugin": "^2.0.1",
"redux": "^3.4.0",
"redux-logger": "^2.6.1",
"redux-saga": "^0.9.5",
"request": "^2.72.0",
"request-promise": "^3.0.0",
"save-as": "^0.1.7",
"showdown": "^1.4.2",
"three": "^0.79.0",
"vue": "^2.0.5",
"vue-loader": "^9.8.1",
"vue-router": "^2.0.1",
"vue-slider-component": "^2.0.4",
"walk": "^2.3.9"
},
"devDependencies": {
"babel-core": "^6.7.6",
"babel-eslint": "^6.1.0",
"babel-loader": "^6.0.2",
"babel-plugin-react-transform": "^2.0.2",
"babel-polyfill": "^6.6.1",
"babel-preset-airbnb": "^2.2.3",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-2": "^6.5.0",
"babel-register": "^6.7.2",
"chai": "^3.5.0",
"chai-jquery": "2.0.0",
"cheerio": "^0.22.0",
"colors": "1.1.2",
"concurrently": "^2.0.0",
"copy-webpack-plugin": "2.1.1",
"css-loader": "0.23.1",
"element-theme-default": "^1.1.5",
"enzyme": "^2.7.1",
"eslint": "^2.13.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-react": "^5.2.2",
"express": "^4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jquery": "2.2.3",
"jscs": "3.0.3",
"jsdoc-to-markdown": "^2.0.0",
"jsdom": "^9.11.0",
"mocha": "^3.2.0",
"ncp": "^2.0.0",
"node-sass": "3.7.0",
"postcss-loader": "0.8.2",
"react-addons-test-utils": "^15.4.2",
"react-hot-loader": "^1.3.1",
"react-transform-hmr": "^1.0.4",
"redux-devtools": "^3.3.1",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-log-monitor": "^1.0.11",
"remotedev": "^0.1.2",
"rimraf": "^2.5.2",
"sass-loader": "3.2.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "1.14.1",
"webpack-hot-middleware": "^2.10.0"
}
To solve this, as the OP mentioned you need to set up the navigator in your test setup and include two properties: platform and appName.
Here is a little snip-it of what your test setup script should contain to set this up properly:
var exposedProperties = ['window', 'navigator', 'document'];
global.window = document.defaultView;
global.navigator = {
userAgent: 'node.js',
platform: 'windows', // This can be set to mac, windows, or linux
appName: "Microsoft Internet Explorer", // Be sure to define this as well
};
Found the issue: I was recreating the navigator variable and forgetting to put the platform member inside of it.

Resources