No files matching the pattern were found with STYLELINT - expo

I just installed STYLELINT and I'm following the documentation, but I encountered the following problem:
$ npx stylelint --config ./stylelintrc './**/*.tsx'
Error: No files matching the pattern "'./src/**/*.tsx'" were found.
at standalone (C:\Users\thiag\OneDrive\Documentos\PROJETOS\sugar\node_modules\stylelint\lib\standalone.js:273:43)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
error Command failed with exit code 1.
Here's my hierarchy:
Here's my code .stylelintrc:
{
"processors": ["stylelint-processor-styled-components"],
"extends": ["stylelint-config-recommended", "stylelint-config-styled-components"],
"customSyntax": "postcss-scss",
"rules": { // BAR }
}
Package code:
{
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"stylelint:check": "stylelint-config-prettier-check",
"stylelint:css": "npx stylelint './**/*.{tsx, ts}'",
"prepare": "husky install"
},
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#stylelint/postcss-css-in-js": "^0.37.2",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"#types/styled-components": "^5.1.25",
"#types/styled-components-react-native": "^5.1.3",
"#typescript-eslint/eslint-plugin": "^5.19.0",
"#typescript-eslint/parser": "^5.19.0",
"eslint": "8.2.0",
"eslint-config-airbnb": "19.0.4",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "2.25.3",
"eslint-plugin-jsx-a11y": "6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "7.28.0",
"eslint-plugin-react-hooks": "4.3.0",
"husky": "^7.0.4",
"lint-staged": "^12.3.7",
"postcss-scss": "^4.0.3",
"postcss-syntax": "^0.36.2",
"prettier": "^2.6.2",
"stylelint": "^14.6.1",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^7.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"typescript": "~4.3.5"
}
}
What is happening here? I've tried everything with these paths and nothing works. I'm using it in a project with EXPO + STYLED-COMPONENTS.

Stylelint is throwing the following error because there is no src folder in your hierarchy and therefore no .tsx files to lint:
Error: No files matching the pattern "'./src/**/*.tsx'" were found.
The error will go away once you create a .tsx file in a src folder. Alternatively, you can use the --allow-empty-input flag, like so:
npx stylelint './**/*.tsx' --allow-empty-input
Additionally, you don't need the --config flag as Stylelint will find a .stylelintrc file automatically.

Related

NextJS - null is not an object (evaluating 'anchorElement.parentNode')

I am working on AWS, it works for 1 years with no errors.
Today I made some updtes on my code (I didnt update any packages), and It begins to return this.
I am using AWS CodeBuild, and I guess It must be about that (It may be updated or sth.)
But couldnt resolve tthe problem.
Unhandled Runtime Error
TypeError: null is not an object (evaluating 'anchorElement.parentNode')
Call Stack
eval
[native code]
./src/assets/scss/style.scss
file:///var/app/current/.next/static/chunks/pages/_app.js (827:5)
Here's my codebuild variables:
version: 0.2
phases:
install:
runtime-versions:
nodejs: 14
pre_build:
commands:
- printenv > .env
build:
commands:
- echo Installing dependency...
- npm install -g next#12.0.4-canary.10
- npm install
- echo Compiling the Node.js code
- npm run build
post_build:
commands:
- echo Build completed on `date`
artifacts:
files:
- '**/*'
Here's my packages.json
{
"name": "Try this",
"version": "0.1.0",
"private": true,
"engines" : {
"node" : "14"
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "node server.js",
"analyze": "cross-env ANALYZE=true next build",
"analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
},
"dependencies": {
"#fullhuman/postcss-purgecss": "^4.1.3",
"#next/bundle-analyzer": "^11.1.2",
"#sentry/nextjs": "^6.11.0",
"#thecodingmachine/redux-toolkit-wrapper": "^1.3.0",
"#tjoskar/react-lazyload-img": "^1.2.3",
"#uppy/core": "^2.3.0",
"#uppy/progress-bar": "^2.1.0",
"#uppy/react": "^2.2.0",
"#uppy/tus": "^2.3.0",
"#uppy/xhr-upload": "^2.1.0",
"axios": "^0.21.1",
"bootstrap": "^4.6.0",
"cross-env": "^7.0.3",
"express": "^4.17.1",
"file-saver": "^2.0.5",
"framer-motion": "^6.2.9",
"heroku-ssl-redirect": "^0.1.1",
"lottie-web": "^5.7.8",
"moment": "2.24.0",
"moment-timezone": "^0.5.28",
"next": "^12.0.4-canary.10",
"next-compose-plugins": "^2.2.1",
"nextjs-progressbar": "0.0.10",
"nprogress": "^0.2.0",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.4.2",
"react": "^17.0.2",
"react-bootstrap": "^1.0.0",
"react-color-extractor": "^1.1.2",
"react-copy-to-clipboard": "^5.0.3",
"react-countdown": "^2.3.2",
"react-custom-scroll": "^4.2.0",
"react-dom": "^17.0.2",
"react-facebook-pixel": "^1.0.4",
"react-google-recaptcha-v3": "^1.9.8",
"react-hooks-paginator": "^0.4.4",
"react-icons": "^3.11.0",
"react-id-swiper": "^3.0.0",
"react-image-gallery": "^1.1.1",
"react-infinite-scroll-component": "^6.0.0",
"react-input-mask": "^3.0.0-alpha.2",
"react-lightgallery": "^0.6.3",
"react-livechat": "^1.1.1",
"react-lottie": "^1.2.3",
"react-mailchimp-subscribe": "^2.1.0",
"react-modal": "^3.14.3",
"react-modal-video": "^1.2.3",
"react-parallax": "^3.0.3",
"react-redux": "^7.2.0",
"react-scroll": "^1.7.16",
"react-select": "^4.3.1",
"react-slidedown": "^2.4.5",
"react-sticky-box": "^0.9.3",
"react-tippy": "^1.3.4",
"react-toast-notifications": "^2.4.3",
"react-tooltip": "^4.2.21",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"sweetalert2": "^10.16.7",
"swiper": "^6.8.4",
"uuid": "^8.3.2"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/runtime": "^7.13.10",
"#react-native-community/eslint-config": "^2.0.0",
"#zeit/next-css": "^1.0.1",
"babel-jest": "^26.6.3",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^7.13.0",
"eslint-import-resolver-babel-module": "^5.1.2",
"eslint-plugin-import": "^2.22.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"metro-react-native-babel-preset": "^0.64.0",
"next-purgecss": "^4.0.0",
"react-test-renderer": "17.0.1",
"sass": "^1.26.3"
},
"jest": {
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"setupFiles": [
"./jest.setup.js"
],
"timers": "fake",
"testEnvironment": "jsdom"
}
}
What could be wrong?
It works on vercel when I try to build,
But It returns error on AWS. (It was working for 1 year)

Expo EAS build failing on Prebuild

The build was working fine before installing expo-image-picker. But it's not working now even after removing the package.
This is the build command.
eas build -p android --profile preview2
Both android and ios build failing.
It looks like an image error, i removed all the images from my app but the issue still persists
Here's my package.json
{
"name": "my-app",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#eva-design/eva": "^2.1.1",
"#expo/webpack-config": "~0.16.2",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-masked-view/masked-view": "^0.2.6",
"#react-navigation/bottom-tabs": "^6.3.1",
"#react-navigation/material-bottom-tabs": "^6.2.1",
"#react-navigation/native": "^6.0.10",
"#react-navigation/native-stack": "^6.6.2",
"#react-navigation/stack": "^6.2.1",
"#sentry/react-native": "^3.4.2",
"#ui-kitten/components": "^5.1.2",
"axios": "^0.27.2",
"expo": "~45.0.0",
"expo-application": "~4.1.0",
"expo-blur": "~11.1.0",
"expo-constants": "~13.1.1",
"expo-dev-client": "~0.9.6",
"expo-device": "~4.2.0",
"expo-image-picker": "~13.1.1",
"expo-linear-gradient": "~11.3.0",
"expo-localization": "~13.0.0",
"expo-notifications": "~0.15.2",
"expo-splash-screen": "~0.15.1",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.1",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-gesture-handler": "~2.2.1",
"react-native-modern-datepicker": "^1.0.0-beta.91",
"react-native-reanimated": "^2.8.0",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg": "12.3.0",
"react-native-vector-icons": "^9.1.0",
"react-native-web": "0.17.7",
"sentry-expo": "^4.2.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/lodash": "^4.14.182",
"#types/react": "~17.0.21",
"#types/react-native": "~0.67.6",
"#types/react-native-vector-icons": "^6.4.10",
"#types/styled-components": "^5.1.25",
"#types/styled-components-react-native": "^5.1.3",
"ts-node": "^10.7.0",
"typescript": "~4.3.5"
},
"private": true
}
I ended up removing all the images I optimized with expo-optimize, deleted node_modules and rebuild yarn or npm install and that did the trick for me. Fortunately I had a back up of the images.

CRA / PostCSS 8 - Cannot read properties of undefined (reading 'unprefixed')

I have a little problem with postcss, i update this package because of audit issue.
First when i started my app, but i fixed this one by adding
"postcss-preset-env": "^7.2.3",
in my package.json resolutions.
But then, when i tried to build my app, i get the following one, and i dont find anything directly related to this specific
Cannot read properties of undefined (reading 'unprefixed')
complete error here:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
cssnano-util-raw-cache: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
Failed to compile.⠂⸩ ⠧ : timing npm:load Completed in 32ms
Cannot read properties of undefined (reading 'unprefixed')
CompileError: Begins at CSS selector undefined
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
npm timing command:run-script Completed in 16564ms
npm timing npm Completed in 16715ms
i know it because of
"resolutions": {
"postcss": "^8.2.13",
...
}
if i remove this, the error go away (but my 'yarn audit' rise vulnerabilities)
Can someone help me to understand the error? What kind of css issue can make this error? I found on google that sometimes, empty rules like
.myrules {
}
Can rise error, but not exactly the one i get, and even, i looked each scss file without finding empty rules.
my complete package.json:
{
"name": "x",
"version": "0.1.0",
"private": true,
"dependencies": {
"#redux-offline/redux-offline": "^2.6.0",
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/dom": "^8.11.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^27.0.3",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-router-dom": "^5.3.1",
"#yaireo/tagify": "^4.9.5",
"axios": "^0.24.0",
"date-fns": "^2.28.0",
"dompurify": "^2.3.3",
"dotenv": "^10.0.0",
"enzyme": "^3.11.0",
"i18next": "^21.6.3",
"i18next-browser-languagedetector": "^6.1.2",
"i18next-parser": "^5.4.0",
"jest-webpack-resolver": "^0.3.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.34",
"react": "^17.0.2",
"react-datepicker": "^4.6.0",
"react-dom": "^17.0.2",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.15.1",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
"react-test-renderer": "^17.0.2",
"react-transition-group": "^4.4.2",
"redux": "^4.1.1",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.4.0",
"sass": "^1.43.3",
"typescript": "^4.1.2",
"url-search-params-polyfill": "^8.1.1",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "REACT_APP_VERSION=$npm_config_vers REACT_APP_YMD=$npm_config_ymd REACT_APP_CUSTO=$npm_config_customer REACT_APP_ENV=$npm_config_env yarn startenv",
"build": "REACT_APP_VERSION=$npm_config_vers REACT_APP_YMD=$npm_config_ymd REACT_APP_CUSTO=$npm_config_customer REACT_APP_ENV=$npm_config_env yarn buildenv",
"startenv": "sh -ac '. .env.${REACT_APP_CUSTO}.${REACT_APP_ENV}; react-scripts start'",
"buildenv": "sh -ac '. .env.${REACT_APP_CUSTO}.${REACT_APP_ENV}; react-scripts build'",
"test": "jest test --watch --config=jest.config.js",
"trans-extract": "i18next",
"trans-convert-po-to-json": "node scripts/trans-po-to-json.js",
"trans-convert-json-to-po": "node scripts/trans-json-to-po.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/dompurify": "^2.3.1",
"#types/enzyme": "^3.10.10",
"#types/react-datepicker": "^4.3.4",
"#types/react-html-parser": "^2.0.2",
"#types/react-test-renderer": "^17.0.1",
"#types/react-transition-group": "^4.4.4",
"#types/redux-mock-store": "^1.0.3",
"#types/yaireo__tagify": "^4.9.0",
"#wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
"mock-local-storage": "^1.1.19",
"ts-jest": "26.4.2"
},
"resolutions": {
"node-forge": "^1.0.0",
"browserslist": "^4.16.5",
"glob-parent": "^5.1.2",
"immer": "^9.0.6",
"nth-check": "^2.0.1",
"ansi-regex": "^5.0.1",
"nanoid": "^3.1.31",
"postcss": "^8.2.13",
"postcss-preset-env": "^7.2.3",
"follow-redirects": "^1.14.7"
}
}

Test:unit failing because of firebase and bootstrap. How do I import these?

I tried editing vue.config.js but failed to resolve issue:
Here is my package.json:
{
"name": "tp-health-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.19",
"chart.js": "^2.8.0",
"firebase": "^5.11",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-class-component": "^7.1.0",
"vue-property-decorator": "^8.1.1",
"vue-router": "^3.0.6",
"vue-slider-component": "^3.0.31",
"vuefire": "^2.0.0-alpha.24",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.1.1",
"vuex-map-fields": "^1.3.4"
},
"devDependencies": {
"#types/chai": "^4.1.0",
"#types/mocha": "^5.2.4",
"#vue/cli-plugin-pwa": "^3.7.0",
"#vue/cli-plugin-typescript": "^3.7.0",
"#vue/cli-plugin-unit-mocha": "^3.7.0",
"#vue/cli-service": "^3.7.0",
"#vue/test-utils": "1.0.0-beta.29",
"chai": "^4.1.2",
"typescript": "^3.4.5",
"vue-template-compiler": "^2.6.10"
}
}
Terminal output:
Warning: This is a browser-targeted Firebase bundle but it appears it is being
run in a Node environment. If running in a Node environment, make sure you
are using the bundle specified by the "main" field in package.json.
If you are using Webpack, you can specify "main" as the first item in
"resolve.mainFields":
https://webpack.js.org/configuration/resolve/#resolvemainfields
If using Rollup, use the rollup-plugin-node-resolve plugin and set "module"
to false and "main" to true:
https://github.com/rollup/rollup-plugin-node-resolve
RUNTIME EXCEPTION Exception occurred while loading your tests
TypeError: Cannot read property 'stringify' of undefined
at Module../node_modules/#firebase/webchannel-wrapper/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/#firebase/webchannel-wrapper/dist/index.esm.js:21:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../node_modules/#firebase/firestore/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/#firebase/firestore/dist/index.esm.js:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../node_modules/firebase/firestore/dist/index.esm.js (/Users/TP/tp-health-test/dist/webpack:/node_modules/firebase/firestore/dist/index.esm.js:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)
at Module../src/main.ts (/Users/TP/tp-health-test/dist/webpack:/src/main.ts:1:1)
at __webpack_require__ (/Users/TP/tp-health-test/dist/webpack:/webpack/bootstrap:25:1)

Firebase Functions TypeScript unit testing devDependencies

Following the guideline here: https://firebase.google.com/docs/functions/unit-testing
I'm trying to write unit tests to my TS functions.
here's my package.json:
{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase serve --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log",
"test": "mocha --reporter spec"
},
"main": "lib/index.js",
"dependencies": {
"#types/algoliasearch": "^3.27.0",
"#types/axios": "^0.14.0",
"#types/nodemailer": "^4.6.0",
"#types/stripe": "^5.0.11",
"algoliasearch": "^3.27.1",
"axios": "^0.18.0",
"firebase-admin": "~5.12.0",
"firebase-functions": "^1.0.3",
"nodemailer": "^4.6.4",
"stripe": "^5.8.0",
"webpack": "^4.7.0"
},
"devDependencies": {
"#types/node": "^9.6.6",
"firebase-functions-test": "^0.1.2",
"mocha": "^5.2.0",
"ts-loader": "^4.2.0",
"tslint": "^5.8.0",
"typescript": "^2.8.3",
"webpack-cli": "^2.1.2",
"webpack-node-externals": "^1.7.2"
},
"private": true
}
and I have 1 problem and 1 question.
problem:
I can't import the firebase-functions-test
in my index.test.ts file.
it is looking for it in dependencies only and not in devDependencies...
(adding it inside dependencies solve it).
question:
Can I move all the #types to devDependencies?
Thanks.
If I am right you probably get error something like
Module 'firebase-functions-test' is not listed as dependency in package.json
In fact this is because you have enabled tslint rule no-implicit-dependencies. You can disable it and then you will not get error when importing devDependencies in your unit test.
You can change set tslint to consider dev,
{
...
"rules": {
"no-implicit-dependencies": [true, "dev"],
...
}
see https://github.com/houndci/hound/issues/1522#issuecomment-415760094