I have the ESLint installed globally in VSCode. In one of my React projects it is working. Later, I created a React Native projects using Expo and it isn't running there.
I saw that I had the following settings in my packages.json file for my React project:
"dependencies": {
"#next/font": "13.1.1",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
"next": "13.1.1",
"react": "18.2.0",
"react-dom": "18.2.0"
}
I copied the
"eslint": "8.31.0",
"eslint-config-next": "13.1.1",
lines into my React Native project like so:
"dependencies": {
"expo": "~47.0.12",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"eslint": "8.31.0",
"eslint-config-next": "13.1.1"
},
but it still doesn't work, even after closing and reopening my React Native project.
I came across ESLint not working in VS Code?
I've tried running eslint in a terminal in VSCode, but I get the following error in both my React and React Native projects.
C:\Users\myuser\source\globomantics> eslint
eslint : The term 'eslint' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included,
verify that the path is correct and try again.
At line:1 char:1
+ eslint
+ ~~~~~~
+ CategoryInfo : ObjectNotFound: (eslint:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Related
I've just created my NextJS app, and the first load bundle size is about 1.5Mb. This is my first time using Nextjs, and from what I understand 1.2Mb is incredibly massive. I've attached an image of the yarn build and also of my package.json.
All pages in my app query from a database, and right now the pages are rendering as static html.
I've tried all the basic stuff, such as using ES6 imports(for components rendered conditionally), but none of that is working. I believe that the issue lies in that all my pages are first fetching data from the database (if I'm wrong please correct me), however I'm not too sure how to fix that.
I know I can fetch data directly from front end using useEffect, however I don't know if that will reduce the build size.
If someone has experience with NextJs, I'd really appreciate it if they could look at my project and let me know where I'm going wrong.
Thanks!
PACKAGE.JSON
"dependencies": {
"#chakra-ui/react": "^2.3.6",
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#next/bundle-analyzer": "^13.0.2",
"dotenv": "^16.0.3",
"framer-motion": "^7.6.5",
"moralis-v1": "^1.11.0",
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-moralis": "^1.4.2",
"react-redux": "^8.0.4",
"web3uikit": "^0.1.159"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"file-loader": "^6.2.0",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2",
"url-loader": "^4.1.1"
}
}
Bundle:
The problem seems to be in _app.js. This file is shared by all other files and it's 1.03MB. So something in there is going wrong. You have to post the contents of that file to find the problem
I just ejected from expo and everything went well but I'm now getting the following error when trying to run my ios app in Xcode :
No visible #interface for 'RCTAsyncLocalStorage' declares the selector
'initWithStorageDirectory:'
Here is part of my package.json
"dependencies": {
"axios": "^0.17.1",
"expo": "^23.0.6",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-cloudinary": "^1.0.1",
"react-native-communications": "^2.2.1",
"react-native-elements": "^0.18.5",
"react-native-fetch-blob": "^0.10.8",
"react-native-gifted-chat": "^0.3.0",
"react-native-image-picker": "^0.26.7",
"react-native-image-to-base64": "^0.1.0",
"react-native-modal-datetime-picker": "^4.13.0",
"react-native-router-flux": "^4.0.0-beta.24",
"react-navigation": "^1.0.0-beta.22",
"redux-thunk": "^2.2.0"
}
I actually managed to fix it, this is how:
I updated my "react-native" dependency to the latest one available:
"https://github.com/expo/react-native/archive/sdk-23.0.0.tar.gz"
I removed all dependency that I had installed by mistake in my previous expo app that actually required react-native link using the npm uninstall --save command:
react-native-image-to-base64, react-native-cloudinary
Then I also had to remove them from the General > Linked Frameworks and Libraries
Now it works! I'm having issues with the Facebook Login now but at least it doesn't crash my app.
Good luck to you.
I feel really dumb for not realizing it sooner, but I had this issue when I forgot to run yarn after switching branches with a different Expo version.
Hope that saves someone else some debugging.
I'm developing a Vue app solely for Chrome, which leads me to believe (please correct me if wrong) that I can write native ES6 and don't need to transpile.
The Vue CLI generates a package.json like this:
"devDependencies": {
"babel-core": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babelify": "^7.2.0",
"browserify": "^13.0.1",
"browserify-hmr": "^0.3.1",
"cross-env": "^1.0.6",
"envify": "^3.4.1",
"http-server": "^0.9.0",
"npm-run-all": "^2.1.2",
"uglify-js": "^2.5.0",
"vueify": "^9.1.0",
"watchify": "^3.4.0"
},
"browserify": {
"transform": [
"vueify",
"babelify"
]
}
But if I remove the 4 references to Babel, I get compile errors on my very first file. So really I just have two questions:
1) Am I correct in thinking that I can ditch Babel?
2) How do I do it?
I don't think browserify can handle ES6 imports without Babel. Usually, you could just get away with using something like gulp to uglify and minify without transpiling, because browserify is intended to allow require to be used in the browser, but if the browser supports import then you don't really need it. Unfortunately, this means that you won't be able to use vueify, so you lose the ability to use single file components, so I guess it's down to whether you think that trade-off is acceptable.
You may be interested in this discussion on GitHub: https://github.com/substack/node-browserify/issues/1186
I have a very strange problem. I have cloned the react-boilerplate repository from here:
https://github.com/mxstbr/react-boilerplate
I add the following dependencies:
"body-parser": "^1.15.0",
"cors": "^2.7.1",
"feathers-client": "^1.6.1",
"feathers-rest": "^1.5.0",
"material-ui": "^0.16.0-rc2",
"node-uuid": "^1.4.7",
"react-json-viewer": "^1.1.0",
"request-promise": "^4.1.1",
"rest-client": "^0.1.5",
"socket.io-client": "^1.4.8"
When I run 'npm run setup' the file internals/scripts/setup.js is deleted which means that I get an error the next time I run 'npm run setup'.
Any suggestion as to how this can happen will be appreciated.
It turns out that
npm run setup
is only intended to run once. Afterwards I assume I should
run npm install
I found out after reading this article:
https://github.com/mxstbr/react-boilerplate/issues/339
In the boiler plate you are working there will be a file setup.js that will be missing in your boilerplate and the path where it should be will be provided in the error, Copy that setup.js file from original boiler plate and paste there where it is missing. This solution worked for me perfectly
I'v just deployed my app to Heroku but when I run it in a browser the network tells me it cannot find the system.js file which lives in jspm_packages/system.js
The app works fine locally so I presume heroku is not installing jspm? Do I need to add a script just for Heroku?
here is the jspm settings in my my package.json
"jspm": {
"directories": {
"baseURL": "www"
},
"dependencies": {
"google-maps-api": "npm:google-maps-api#^1.1.0",
"react": "npm:react#^0.14.2",
"react-dom": "npm:react-dom#^0.14.2"
},
"devDependencies": {
"babel": "npm:babel-core#^5.8.24",
"babel-runtime": "npm:babel-runtime#^5.8.24",
"core-js": "npm:core-js#^1.1.4"
}
},
"devDependencies": {
"babel-eslint": "^4.1.3",
"eslint-plugin-react": "^3.5.1",
"jspm": "^0.16.14"
}
You do not need to submit your jspm packages on heroku. For production run:
jspm bundle-sfx lib/main
and replace your scripts with:
<script src="build.js"></script>
(or wherever is your bundled javascript file is)