I've been having this issue with Jest. Jest is throwing an error pointing towards a dependency from within node_modules. Probably need to configure jest to support this syntax, because it can't parse it. But i'm not sure what for configurations.
I've tried to add transformIgnorePatterns in the jest.config.ts file with no luck,
"node_modules/(?!(geotiff)/)"
Any help would be highly appreciated!
Details:
/Users/Documents/Project/node_modules/quick-lru/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export default class QuickLRU extends Map {
^^^^^^
SyntaxError: Unexpected token 'export'
at Runtime.createScriptFromCode (node_modules/jest-cli/node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (node_modules/geotiff/dist-module/source/blockedsource.js:1:1)
This is the jest.config.ts
// jest.config.ts
import type {Config} from "#jest/types";
const config : Config.InitialOptions = {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!**/*.d.ts"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [
"<rootDir>/src/**/*.(test).{js,jsx,ts,tsx}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
],
"testEnvironment": "node",
"testEnvironmentOptions": {
"url" : "http://localhost"
},
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/config/jest/typescriptTransform.js",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
},
"transformIgnorePatterns": [
"node_modules/(?!(geotiff)/)"
],
"moduleFileExtensions": [
"web.ts",
"ts",
"web.tsx",
"tsx",
"web.js",
"js",
"web.jsx",
"jsx",
"json",
"node",
"mjs"
],
"globals": {
"ts-jest": {
"tsconfig": "./tsconfig.test.json"
}
},
"modulePaths": [
"<rootDir>/src/"
]
};
this is the package.json file
{
"name": "Project",
"version": "1",
"private": true,
"homepage": ".",
"files": [
"build/**/*"
],
"engines": {
"node": ">=16.14.0",
"npm": ">=8.11.0"
},
"repository": {
"type": "git",
"url": "ssh://Project},
"resolutions": {
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2"
},
"scripts": {
"build-css": "sass --style=compressed -I ./src -I ./node_modules src/:src/",
"watch-css": "npm run build-css && sass -I ./src -I ./node_modules src/:/src --watch",
"start-js": "node scripts/start.js",
"start": "npm-run-all -p watch-css start-js",
"debug": "npm-run-all -p --inspect=9227 watch-css start-js",
"prebuild": "cross-env CI=true npm run test --watchAll=false",
"build": "npm run build-css && node scripts/build.js",
"postbuild": "node scripts/zip.js",
"build-test": "npm run build-css node scripts/build.js",
"serve-build": "npm run serve -s build",
"test": "node scripts/test.js --env=jsdom",
"prepublishOnly": "npm run build",
"preversion": "CI=true npm run test",
"postinstall": "patch-package",
"lint": "./node_modules/.bin/ESLint -c .eslintrc.js -o ./lint.log"
},
"devDependencies": {
"#babel/cli": "^7.18.6",
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.18.6",
"#svgr/webpack": "^6.2.1",
"#turf/turf": "^6.4.0",
"#types/classnames": "^2.3.1",
"#types/enzyme": "^3.10.12",
"#types/jest": "^28.1.3",
"#types/node": "^18.0.0",
"#types/react": "^17.0.39",
"#types/react-autocomplete": "^1.8.6",
"#types/react-autosuggest": "^10.1.5",
"#types/react-beautiful-dnd": "^13.1.2",
"#types/react-highlight": "^0.12.5",
"#types/react-router-dom": "^5.3.3",
"#types/uuid": "^8.3.4",
"#typescript-eslint/parser": "^5.30.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
"adm-zip": "^0.5.9",
"autoprefixer": "10.4.7",
"awesome-typescript-loader": "^5.2.1",
"axios": "^0.27.2",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^28.1.1",
"babel-loader": "^8.2.2",
"babel-preset-react-app": "10.0.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"chalk": "5.0.1",
"classnames": "~2.2.6",
"core-js": "^3.6.5",
"cross-env": "^5.2.1",
"css-loader": "^6.7.1",
"dotenv": "16.0.1",
"enzyme": "^3.11.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jsdoc": "^39.3.3",
"eslint-plugin-prefer-arrow": "^1.2.3",
"eslint-plugin-react": "^7.22.0",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.1.1",
"fork-ts-checker-webpack-plugin": "^7.2.11",
"fs-extra": "10.1.0",
"geotiff": "^2.0.5",
"html-webpack-injector": "^1.1.4",
"html-webpack-plugin": "^5.5.0",
"jest": "^28.1.1",
"jest-canvas-mock": "^2.4.0",
"jest-environment-jsdom": "^28.1.1",
"joi-browser": "^13.4.0",
"mini-css-extract-plugin": "^2.6.1",
"neo-async": "^2.6.2",
"npm-run-all": "^4.1.3",
"object-assign": "^4.1.1",
"ol": "~6.14.1",
"ol-ext": "^3.2.26",
"patch-package": "^6.2.2",
"proj4": "^2.5.0",
"promise": "^8.0.1",
"raf": "^3.4.0",
"react": "^17.0.2",
"react-app-polyfill": "^3.0.0",
"react-autocomplete": "^1.8.1",
"react-autosuggest": "^10.1.0",
"react-beautiful-dnd": "^13.1.0",
"react-dev-utils": "^12.0.0",
"react-docgen-typescript-webpack-plugin": "^1.1.0",
"react-dom": "^17.0.2",
"react-highlight": "^0.14.0",
"react-redux": "^8.0.2",
"react-scripts": "^5.0.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"resolve": "^1.6.0",
"sass": "^1.49.9",
"serve": "^13.0.2",
"sneakpeek-cli": "^0.2.1",
"source-map-loader": "^4.0.0",
"swiper": "^6.8.4",
"ts-jest": "^28.0.5",
"ts-loader": "^9.3.1",
"ts-node": "^10.8.1",
"tsconfig-paths-webpack-plugin": "^3.5.1",
"typescript": "^4.7.4",
"url-loader": "^4.1.1",
"uuid": "^7.0.3",
"webpack": "~5.73.0",
"webpack-dev-server": "^4.9.2",
"webpack-manifest-plugin": "^5.0.0"
},
}
Related
I'm trying to reproduce the example given in Jest documentation about mocking module. The code is the following one.
users.js
import axios from 'axios'
class Users {
static all () {
return axios.get('/users.json').then(resp => resp.data)
}
}
export default Users
test.js
import axios from 'axios'
import Users from './users'
import { jest } from '#jest/globals'
jest.mock('axios')
test('should fetch users', () => {
const users = [ { name: 'Bob' } ]
const resp = { data: users }
axios.get.mockResolvedValue(resp)
// or you could use the following depending on your use case:
// axios.get.mockImplementation(() => Promise.resolve(resp))
return Users.all().then(data => expect(data).toEqual(users))
})
The code from test.js is a little bit different from the documentation. I had to add import { jest } from '#jest/globals' because of this issue
package.json
{
...
"type": "module",
"engines": {
"node": ">=14.17.6"
},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "8081"
}
},
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon --insecure-http-parser --inspect server/index.js --watch server",
"test-server": "cross-env CYPRESS_MODE=true THIRD_PARTY_ROUTES_ENABLED=false npm run start",
"ci-test-server": "npm run test-server & wait-on http://localhost:8081/fr-FR",
"build-for-cypress": "cross-env NUXT_ENV_CYPRESS_MODE=true npm run build",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node --insecure-http-parser server/index.js",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint",
"phrase": "node scripts/phraseapp/phraseapp.js",
"cypress:open-mocked": "cypress open --env env=mock",
"cypress:run-mocked": "cypress run --env env=mock",
"cypress:open-unmocked": "cypress open --env=real,\"TAGS=not #mockOnly\"",
"cypress:run-unmocked": "cypress run --env=real,\"TAGS=not #mockOnly\"",
"ci-test": "cross-env TEST_MODE=true jest tests --runInBand --coverage",
"front-unit-tests": "cross-env jest tests/client/unit",
"back-tests": "cross-env TEST_MODE=true jest tests/server --runInBand"
},
"dependencies": {
"#cospired/i18n-iso-languages": "^3.1.0",
"#jest/globals": "^27.2.5",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/i18n": "^7.0.3",
"#nuxtjs/proxy": "^2.1.0",
"#nuxtjs/style-resources": "^1.2.1",
"#nuxtjs/toast": "^3.3.1",
"#sport-activities/nuxt-di": "^0.1.2",
"#vtmn/css": "^0.22.1",
"#vtmn/icons": "^0.4.0",
"abort-controller": "^3.0.0",
"agentkeepalive": "^4.1.4",
"atob": "^2.1.2",
"axios": "^0.22.0",
"body-parser": "^1.19.0",
"cacheable-lookup": "^6.0.1",
"connect-redis": "^6.0.0",
"cookie-parser": "^1.4.5",
"cookie-universal-nuxt": "^2.1.5",
"cross-env": "^7.0.3",
"csurf": "^1.11.0",
"dd-trace": "^1.4.1",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-session": "^1.17.2",
"express-validator": "^6.12.2",
"google-libphonenumber": "^3.2.24",
"helmet": "^4.6.0",
"ioredis": "^4.27.9",
"lodash": "^4.17.21",
"luxon": "^2.0.2",
"memory-cache": "^0.2.0",
"moment": "^2.29.1",
"morgan": "^1.10.0",
"nock": "^13.1.3",
"node-cron": "^3.0.0",
"node-fetch": "^2.6.1",
"nuxt": "^2.15.8",
"nuxt-lazy-load": "^1.2.7",
"nuxt-purgecss": "^1.0.0",
"oauth": "^0.9.15",
"p-limit": "^3.1.0",
"passport": "^0.4.1",
"passport-oauth2": "^1.6.1",
"redlock": "^4.2.0",
"uuid": "^8.3.2",
"validator": "^13.6.0",
"vue-server-renderer": "^2.6.14",
"vue-toasted": "^1.1.28",
"wait-on": "^6.0.0",
"winston": "^3.3.3",
"world-countries": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/eslint-parser": "^7.15.7",
"#babel/preset-env": "^7.15.6",
"#jest/types": "^27.2.4",
"#types/jest": "^27.0.2",
"#vue/test-utils": "1.2.2",
"axios-mock-adapter": "^1.20.0",
"babel-core": "^7.0.0-bridge.0",
"css-loader": "^5.2.7",
"cypress": "8.5.0",
"cypress-cucumber-preprocessor": "^4.2.0",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-jest": "^24.5.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-standard": "^5.0.0",
"eslint-plugin-vue": "^7.18.0",
"file-loader": "^6.2.0",
"ioredis-mock": "^5.6.0",
"jest": "^27.2.4",
"less": "^4.1.1",
"less-loader": "^7.2.1",
"nodemon": "^2.0.13",
"supertest": "^6.1.6",
"vue-i18n": "8.26.5",
"vue-jest": "^3.0.7",
"vue-svg-loader": "^0.16.0"
},
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": false,
"step_definitions": "tests/client/e2e/integration/steps",
"cucumberJson": {
"generate": true,
"outputFolder": "tests/client/e2e/integration/cucumber-json",
"filePrefix": "",
"fileSuffix": ".cucumber"
}
}
}
jest.config.js
export default {
moduleNameMapper: {
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/tests/client/unit/__mocks__/fileMock.js',
'\\.(css|less)$': '<rootDir>/tests/client/unit/__mocks__/styleMock.js',
'^#/(.*)$': '<rootDir>/$1'
},
moduleFileExtensions: [
'js',
'json',
'vue',
'svg'
],
transform: {},
testMatch: [
'**/?(*.)+(test).[jt]s?(x)',
'**/tests/routes/**/*.spec.js'
],
testEnvironment : 'jsdom',
setupFilesAfterEnv: [
'./tests/jest-setup/jest.setup.ioredis-mock.js',
'./tests/jest-setup/jest.setup.timers.js',
'./tests/jest-setup/jest.setup.envvar.js',
'./tests/jest-setup/jest.setup.nock.js',
'./tests/jest-setup/jest.setup.redis-cache.js'
]
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
When executing the test, I'm getting this as a result:
axios.get.mockResolvedValue is not a function
TypeError: axios.get.mockResolvedValue is not a function
Looks like the mock won't work. What have I missed to make it work?
When I do npm link like this in Window 10:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react
In my app when I do import { useSnackbar } from 'notistack'; then I can use the notistack ok, and it's the global notistack. I want to modify it debug it locally so I forked it and did the npm link but when I npm start the the App get the "You might have more than one copy of React in the same app " error. I also test this and it's true so that's why I do the npm link react and it's also recommended so I don't know what I do wrong here
To be able to debug notistack in VSCode and use the notistack in my app in VSCode. I do npm link. I get the Duplicate React error so must npm link the App react version and tell notistack to us the app react.
But I get this error: I do this npm link on other library's without problem but now this error:
I have tried to fixed this but it's not working.
I also do:
L:\git\notistack> npm link L:\react\Greta100Weeks\greta100weeks\node_modules\react-dom
And that is resolving ok.
I fork the notistack library and is using it ok in the app but only when I do npm link it fails. What is the problem here I guess it's in the package.json
Here is the package.json for the forked library notistack:
{
"name": "notistack",
"version": "1.0.10",
"description": "Highly customizable notification snackbars (toasts) that can be stacked on top of each other",
"main": "dist/index.js",
"module": "dist/notistack.esm.js",
"types": "dist/index.d.ts",
"license": "MIT",
"author": {
"name": "Hossein Dehnokhalaji",
"email": "hossein.dehnavi98#yahoo.com",
"url": "https://github.com/iamhosseindhv/notistack"
},
"homepage": "https://www.iamhosseindhv.com/notistack",
"repository": {
"url": "git+https://github.com/iamhosseindhv/notistack.git",
"type": "git"
},
"scripts": {
"build": "tsdx build --transpileOnly --entry ./src/index.js",
"prebuild": "npm run docs",
"prepublishOnly": "npm run build",
"docs": "rimraf typedoc.json && typedoc --tsconfig",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"peerDependencies": {
"#material-ui/core": "^4.11.2",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"devDependencies": {
"#babel/preset-react": "^7.8.3",
"#material-ui/core": "^4.9.5",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"#types/react-is": "^16.7.1",
"#typescript-eslint/eslint-plugin": "^3.9.1",
"#typescript-eslint/parser": "^3.9.1",
"babel-plugin-optimize-clsx": "^2.6.1",
"eslint": "^7.7.0",
"eslint-config-airbnb": "~18.2.0",
"eslint-plugin-import": "~2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-react": "^7.20.6",
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0",
"rimraf": "^3.0.2",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-copy": "^3.3.0",
"tsdx": "^0.13.2",
"typedoc": "^0.16.11",
"typescript": "^3.8.3"
},
"dependencies": {
"clsx": "^1.1.0",
"hoist-non-react-statics": "^3.3.0"
},
"bugs": {
"url": "https://github.com/iamhosseindhv/notistack/issues"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/notistack"
},
"contributors": [
"Hossein Dehnokhalaji (https://www.iamhosseindhv.com/)"
],
"keywords": [
"notistack",
"enqueueSnackbar",
"snackbarprovider",
"useSnackbar",
"multiple",
"react",
"javascript",
"material-ui",
"toast",
"redux",
"snackbar",
"stacked",
"notification",
"material design",
"hossein",
"dehnokhalaji",
"iamhosseindhv"
]
}
Here is the package.json for the app using the library:
{
"name": "greta-thunberg-fff",
"version": "1.2.9",
"private": true,
"homepage": "https://greta.portplays.com",
"main": "index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"#material-ui/core": "^4.11.2",
"#material-ui/icons": "^4.11.2",
"#material-ui/lab": "^4.0.0-alpha.57",
"#material-ui/styles": "^4.11.2",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"change-case": "^4.1.2",
"classnames": "^2.3.1",
"clean-tag": "^3.1.1",
"clsx": "^1.1.1",
"comma-separated-values": "^3.6.4",
"crypto-js": "^4.0.0",
"date-fns": "^2.23.0",
"faker": "^5.5.3",
"firebase": "^7.23.0",
"formik": "^2.2.5",
"framer-motion": "^2.9.5",
"gsap": "^3.5.1",
"history": "^5.0.0",
"i": "^0.3.6",
"lodash": "^4.17.19",
"lodash.debounce": "^4.0.8",
"mammoth": "^1.4.11",
"material-table": "^1.69.2",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"notistack": "^1.0.10",
"npm": "^7.11.2",
"pdfjs-dist": "^1.8.357",
"preval.macro": "^5.0.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-activity": "^1.2.2",
"react-bootstrap": "^1.3.0",
"react-chartjs-2": "^2.11.1",
"react-data-grid": "^6.1.0",
"react-detect-offline": "^2.4.0",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-helmet": "^6.1.0",
"react-motion": "^0.5.2",
"react-perfect-scrollbar": "^1.5.8",
"react-redux": "^7.2.5",
"react-resize-detector": "^5.0.7",
"react-router": "^6.0.0-beta.4",
"react-router-dom": "^6.0.0-beta.4",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-spring": "^8.0.27",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0",
"sass": "^1.41.1",
"simplebar-react": "^2.3.5",
"slick-carousel": "^1.8.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"three": "^0.85.2",
"typescript": "^3.9.7",
"uuid": "^8.3.1",
"xlsx": "^0.10.1",
"yup": "^0.32.1"
},
"scripts": {
"start": "set PORT=6545&& react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.1.1",
"#typescript-eslint/parser": "^4.1.1",
"axios": "^0.19.2",
"babel-eslint": "^10.1.0",
"clean-tag": "^3.1.1",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-jsx-a11y": "^6.3.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.6",
"eslint-plugin-react-hooks": "^4.1.2",
"gh-pages": "^2.0.1",
"prettier": "^2.1.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"styled-system": "^5.1.5"
}
}
I'm trying to add typescript to a existing react project but I'm getting an error when re-starting the server with npm start.
I'm following the steps from this documentation but I'm getting an error message:
The only thing I might not have right is the react.scripts versions. Here is a copy of the results thrown by npm outdated:
Also, I checked my dependencies and everything seems to be normal.
Things I have done:
run npm update to update all react related packages
I have deleted the node files and re install them with npm install
I have renamed other files to .tsx including the index.js file but I get another error:
Really keen to move this project to the next level with typescript but I have been stack trying to get it to work. By the way, here are my dependencies too:
{
"name": "world-budget-react-v",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.34",
"#fortawesome/free-brands-svg-icons": "^5.15.2",
"#fortawesome/free-solid-svg-icons": "^5.15.2",
"#fortawesome/react-fontawesome": "^0.1.14",
"#types/jest": "^26.0.23",
"#types/node": "^15.0.2",
"#types/react": "^17.0.5",
"#types/react-dom": "^17.0.3",
"#types/react-redux": "^7.1.16",
"autoprefixer": "7.1.6",
"axios": "^0.21.1",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.6",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"firebase": "^8.2.6",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^17.0.2",
"react-dev-utils": "^5.0.2",
"react-dom": "^17.0.2",
"react-gtm-module": "^2.0.11",
"react-redux": "^7.2.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scroll-restoration": "^1.0.6",
"react-test-renderer": "^17.0.1",
"redux": "^4.1.0",
"redux-thunk": "^2.3.0",
"resolve": "1.6.0",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"typescript": "^4.2.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.11.3",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node",
"mjs"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Any recommendations? I hope I provided as much info as possible!
Lastly, I found this answer but not sure what they mean. Anyone keen to explain maybe Could not find a required file. - Adding TypeScript to React project
As per the react-scripts 2.10 you can add TypeScript to an existing project.
yarn add typescript #types/node #types/react #types/react-dom #types/jest --dev
Create a react-native app using : npx react-native init AwesomeProject
Once its up and running, follow this link to add typescript the right way.
Recently I update electron version from 9 to 10 and after updated getting this error on debug mode only
when I downgrade to 9 it's working correctly
Deleted Node_Module and package.lock file multiple times and reinstall all package but no luck
I tried to upgrade to 11 electrons also but facing the same issue
When I am running in production mode "Yarn Start" is working fine
The issue in dev mode only "Yarn dev"
ERROR:-
App threw an error during load Error: ENOENT: no such file or directory, open 'electron'
at Object.openSync (fs.js:462:3)
at Object.func [as openSync] (electron/js2c/asar.js:140:31)
at Object.readFileSync (fs.js:364:35)
at Object.fs.readFileSync (electron/js2c/asar.js:542:40)
at Module._extensions..js (internal/modules/cjs/loader.js:1165:22)
at Object.newLoader [as .js] (C:\SVN\mangocrossplatform\trunk\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:981:32)
at Module._load (internal/modules/cjs/loader.js:881:14)
at Function.Module._load (electron/js2c/asar.js:779:28)
at Module.require (internal/modules/cjs/loader.js:1023:19)
My Package.json File
{
"name": "mangoapps-messenger",
"productName": "Apps Messenger",
"version": "15.0.11",
"description": "Apps Messenger - An Universal Messenger For Apps",
"homepage": "",
"author": {
"email": "",
"name": ""
},
"scripts": {
"build": "yarn clean && concurrently \"yarn build-main\" \"yarn build-renderer\"",
"build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
"build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
"build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
"dev": "yarn clean && cross-env START_HOT=1 node -r #babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
"package": "yarn build && electron-builder build --publish never",
"package-linux": "yarn build && electron-builder build --linux",
"package-mac": "yarn build && CSC_LINK=./certs/mac.p12 && CSC_IDENTITY_AUTO_DISCOVER=false && electron-builder build --mac",
"package-win": "yarn build && electron-builder build --win --x64",
"package-win32": "yarn build && electron-builder build --win --ia32",
"postinstall": "electron-builder install-app-deps && yarn build-dll && opencollective-postinstall",
"preinstall": "node ./internals/scripts/CheckYarn.js",
"prestart": "yarn build",
"start": "cross-env NODE_ENV=production electron ./dist/main.prod.js",
"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r #babel/register ./app/main.dev.js",
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
"clean": "rimraf dist/"
},
"main": "./dist/main.prod.js",
"build": {
"productName": "Apps Messenger",
"appId": "com.mangoapps.electrondesktop",
"artifactName": "${name}-${version}.${ext}",
"generateUpdatesFilesForAllChannels": true,
"mac": {
"category": "productivity",
"type": "distribution",
"provisioningProfile": "certs/mac.provisionprofile",
"identity": "sdasdB",
"hardenedRuntime": true,
"entitlements": "build/entitlements.mac.inherit.plist",
"entitlementsInherit": "build/entitlements.mac.inherit.plist",
"gatekeeperAssess": false,
"extendInfo": {
"NSAppTransportSecurity": {
"NSAllowsArbitraryLoads": true,
"NSMicrophoneUsageDescription": "This lets you share using audio using the microphone.",
"NSCameraUsageDescription": "This lets you share a photo or video taken from your camera.",
"NSContactsUsageDescription": "This lets you enable access to your contacts and uses them to invite."
}
},
"target": [
"zip"
]
},
"linux": {
"target": [
"deb"
],
"category": "Productivity"
},
"win": {
"target": [
"nsis",
"msi"
],
"certificateFile": "",
"certificatePassword": "",
"publisherName": "",
"requestedExecutionLevel": "asInvoker",
"signAndEditExecutable": true,
"signDlls": true
},
"nsis": {
"oneClick": true,
"perMachine": false,
"deleteAppDataOnUninstall": true
},
"msi": {
"oneClick": true,
"perMachine": true
},
"files": [
"resources",
"dist/",
"dist/main.prod.js",
"dist/main.prod.js.map",
"package.json"
],
"directories": {
"buildResources": "resources",
"output": "release"
}
},
"keywords": [
"mangoapps",
"messenger"
],
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/plugin-proposal-class-properties": "^7.4.0",
"#babel/plugin-proposal-decorators": "^7.4.0",
"#babel/plugin-proposal-do-expressions": "^7.2.0",
"#babel/plugin-proposal-export-default-from": "^7.2.0",
"#babel/plugin-proposal-export-namespace-from": "^7.2.0",
"#babel/plugin-proposal-function-bind": "^7.2.0",
"#babel/plugin-proposal-function-sent": "^7.2.0",
"#babel/plugin-proposal-json-strings": "^7.2.0",
"#babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"#babel/plugin-proposal-nullish-coalescing-operator": "^7.2.0",
"#babel/plugin-proposal-numeric-separator": "^7.2.0",
"#babel/plugin-proposal-optional-chaining": "^7.2.0",
"#babel/plugin-proposal-pipeline-operator": "^7.3.2",
"#babel/plugin-proposal-throw-expressions": "^7.2.0",
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"#babel/plugin-syntax-import-meta": "^7.2.0",
"#babel/plugin-transform-react-constant-elements": "^7.2.0",
"#babel/plugin-transform-react-inline-elements": "^7.2.0",
"#babel/preset-env": "^7.4.2",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"#babel/register": "^7.4.0",
"#fortawesome/fontawesome-pro": "^5.12.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"babel-plugin-dev-expression": "^0.2.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"babel-register": "^6.26.0",
"chalk": "^2.4.2",
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"cross-spawn": "^6.0.5",
"css-loader": "2.1.1",
"detect-port": "^1.3.0",
"electron": "^10.0.0",
"electron-builder": "^22.9.1",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2",
"enzyme-to-json": "^3.3.5",
"fbjs-scripts": "^1.2.0",
"file-loader": "^4.2.0",
"html-webpack-plugin": "^3.2.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^24.5.0",
"mini-css-extract-plugin": "^0.8.0",
"node-sass": "^4.13.0",
"opencollective-postinstall": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"prettier": "^1.16.4",
"react-svg-loader": "^3.0.3",
"react-test-renderer": "^16.8.6",
"redux-logger": "^3.0.6",
"rimraf": "^3.0.0",
"sass-loader": "^7.1.0",
"sinon": "^7.3.1",
"spectron": "^5.0.0",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"testcafe": "^1.1.0",
"testcafe-browser-provider-electron": "^0.0.8",
"testcafe-live": "^0.1.4",
"testcafe-react-selectors": "^3.1.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"yarn": "^1.16.0"
},
"dependencies": {
"#babel/polyfill": "^7.7.0",
"#fortawesome/fontawesome-svg-core": "^1.2.26",
"#fortawesome/free-solid-svg-icons": "^5.12.0",
"#fortawesome/pro-duotone-svg-icons": "^5.12.0",
"#fortawesome/pro-light-svg-icons": "^5.12.0",
"#fortawesome/pro-regular-svg-icons": "^5.12.0",
"#fortawesome/pro-solid-svg-icons": "^5.12.0",
"#fortawesome/react-fontawesome": "^0.1.8",
"#trodi/electron-splashscreen": "^0.3.4",
"app-root-path": "^2.2.1",
"axios": "^0.21.1",
"babel-runtime": "^6.26.0",
"bootstrap": "^4.3.1",
"check-internet-connected": "^2.0.4",
"connected-react-router": "^6.3.2",
"copy-webpack-plugin": "^5.1.1",
"core-js": "2",
"custom-electron-titlebar": "^3.2.2-hotfix62",
"devtron": "^1.4.0",
"dotenv": "^8.2.0",
"electron-debug": "^2.1.0",
"electron-dl": "^3.0.2",
"electron-fetch": "^1.3.0",
"electron-localshortcut": "^3.1.0",
"electron-log": "^4.1.1",
"electron-positioner": "^4.1.0",
"electron-splashscreen": "^0.1.7",
"electron-store": "^3.2.0",
"electron-unhandled": "^3.0.2",
"electron-util": "^0.14.1",
"electron-window-state": "^5.0.3",
"emoji-mart": "^2.11.1",
"form-data": "^2.3.3",
"fs-extra": "^8.1.0",
"jquery": "^3.3.1",
"js-md5": "^0.7.3",
"lodash": "^4.17.15",
"mime-types": "^2.1.27",
"moment-timezone": "^0.5.27",
"node-mac-notifier": "file:local_dep/node-mac-notifier",
"node-machine-id": "^1.1.12",
"node-notifier": "^8.0.0",
"platform-folders": "^0.4.1",
"plist": "^3.0.1",
"popper.js": "^1.15.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.15",
"react-image-crop": "^8.4.0",
"react-lazyload": "^2.6.2",
"react-page-layout": "^0.9.8",
"react-phone-input-2": "^2.13.9",
"react-player": "^1.15.2",
"react-redux": "^7.2.0",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",
"react-select": "^3.0.3",
"react-tenor": "^2.1.1",
"react-toastify": "^6.0.8",
"reactstrap": "^8.5.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"source-map-support": "^0.5.11",
"styled-components": "^5.0.0",
"universal-analytics": "^0.4.23",
"xml2js": "^0.4.19",
"zip-folder": "^1.0.0"
},
"devEngines": {
"node": ">=12.13.0",
"npm": ">=6.12.0",
"yarn": ">=1.19.0"
},
"browserslist": [
"defaults"
]
}
Can't seem to test with Jest because I am using styled-components. Anyone find a solution to this?
I am putting my "StyledComponents.js" components in a seperate file and importing them into my pages as needed..ala.
import { Footer, Header, LeftNav } from "StyledComponents";
PASS src/app/components/Products/__tests__/Avatar.test.js
FAIL src/app/components/Products/__tests__/product-snapshot-test.js
● Test suite failed to run
TypeError: Cannot read property 'div' of undefined
at Object.<anonymous> (src/app/components/Products/styledComponents.js:9:148)
at Object.<anonymous> (src/app/components/Products/ProductsItem.js:3:41)
at Object.<anonymous> (src/app/components/Products/index.js:7:50)
at Object.<anonymous> (src/app/components/Products/__tests__/product-snapshot-test.js:5:14)
It is choking on the part of the imported files that includes my components from the styled.js file (ala: styled-components).
// #flow
import React from 'react';
import {
Products,
ProductItem
} from './styledComponents';
Basically, it is saying "styled" Is undefined. Yet, in my files, I have:
import styled from 'styled-components';
export const ProductContainer = styled.div`
border-radius: 5px;
overflow: hidden;
`;
etc....
UPDATED TO INCLUDE babelrc & package.json files
babelrc
{
"presets": ["es2015", "react", "flow"],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy"
],
"env": {
"development": {
"plugins": [
"transform-class-properties",
"transform-object-rest-spread",
"transform-decorators-legacy",
"react-hot-loader/babel"
]
},
"test": {
"plugins": [
"transform-es2015-modules-commonjs"
]
}
}
}
Package.json file
{
"name": "whatever",
"version": "0.0.1",
"main": "server.js",
"license": "UNLICENSED",
"scripts": {
"start": "npm-run-all --parallel start:server start:app",
"start:app": "webpack-dev-server --progress",
"start:server": "nodemon -i 'webpack*.js' -i 'src/app/**/*.js' server.js ",
"test": "npm run test:app",
"test:app": "jest --coverage",
"build": "webpack -p --define process.env.NODE_ENV=\"'production'\"",
"lint": "eslint ./",
"flow": "flow"
},
"dependencies": {
"app-module-path": "^2.2.0",
"autoprefixer": "^7.1.2",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"body-parser": "^1.17.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"express": "^4.15.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.29.0",
"immutability-helper": "^2.3.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"postcss-loader": "^2.0.6",
"react": "^15.6.1",
"react-addons-shallow-compare": "^15.6.0",
"react-bootstrap": "^0.31.1",
"react-dom": "^15.6.1",
"react-loader": "^2.4.2",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-transition-group": "^2.0.2",
"redux": "^3.7.1",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
"styled-components": "^2.1.1",
"webpack": "^3.3.0"
},
"devDependencies": {
"babel-eslint": "^7.1.1",
"babel-jest": "^20.0.3",
"eslint": "^4.2.0",
"eslint-plugin-babel": "^4.1.1",
"eslint-plugin-flowtype": "^2.35.0",
"eslint-plugin-jest": "^20.0.3",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.50.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^20.0.4",
"nock": "^9.0.14",
"nodemon": "^1.11.0",
"npm-run-all": "^4.0.2",
"react-hot-loader": "^3.0.0-beta.7",
"react-test-renderer": "^15.6.1",
"redux-mock-store": "^1.2.3",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"
},
"jest": {
"collectCoverageFrom": [
"src/app/**/*.js"
],
"coverageThreshold": {
"global": {
"statements": 60,
"branches": 60,
"functions": 80,
"lines": 70
}
},
"moduleFileExtensions": [
"js"
],
"moduleDirectories": ["node_modules", "src"],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/app/__mocks__/fileMock.js",
"\\.(css|less)$": "identity-obj-proxy",
"components(.*)$": "<rootDir>/src/app/components$1",
"constants(.*)$": "<rootDir>/src/app/constants$1",
"utils(.*)$": "<rootDir>/src/app/utils$1"
}
}
}