I'm installing some demo React JS applications. Some of them don't show syntax errors while others do. Am I missing a package in my solution? Or is there a setting in my VS Project that needs set/changed?
Here's a screenshot. The project's package.json is below. The code builds and runs fine with the exception of deprecation warnings, etc. (not important at this point).
{
"name": "conversations-demo-sdk-update",
"version": "1.2.0",
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"#twilio/conversations": "1.2.0",
"antd": "^3.26.20",
"dotenv": "^10.0.0",
"ngrok": "^3.4.0",
"node-sass": "^6.0.1",
"prop-types": "^15.7.2",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-dropzone": "^10.2.2",
"react-router-dom": "^4.3.1",
"react-scripts": "4.0.1",
"request-promise": "^4.2.6",
"twilio": "~3.6.6"
},
"devDependencies": {
"concurrently": "^3.6.1",
"react-app-rewired": "^2.2.1"
},
"scripts": {
"start": "concurrently \"react-scripts start\" \"node index.js\"",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"keywords": [],
"description": ""
}
The problem ended up being JSX code in JS files. The fix is to enable Resharper's option to allow JSX in JS files.
Solution found here
Related
I'm trying to work out how to create a react + redux node module for my react + redux toolkit sites. I've got multiple sites with common components and I'd like to share them using a module.
I have managed to create, publish (using npm publish), and install my node module on to my site, but whenever I try and run with it installed I get the below error for any component I make in the module.
This is the package.json on my node module. I've made sure that any dependencies match the version I use on my sites.
`
{
"name": "cpl-react-test",
"version": "3.0.4",
"peerDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"devDependencies": {
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "27.4.1",
"#types/node": "16.11.27",
"#types/react": "18.0.6",
"#types/react-dom": "18.0.2",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-redux": "8.0.2",
"react-scripts": "5.0.1",
"typescript": "^4.6.3",
"web-vitals": "^3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) TS template.",
"main": "index.tsx",
"author": "",
"license": "ISC"
}
`
I have researched this a bit, but I'm struggling to find the solution, I think because I don't really understand the problem, or whether I'm going about this the right way at all. Any insight on what I should be looking for or doing would be greatly appreciated.
I'm trying to deploy an app on heroku, but I'm getting an error when it tried to build the app with the webpack command. I have tried a number of fixes but can't seem to get it to work. I tried running the webpack.js file from node_modules like this node node_modules/webpack/bin/webpack.js but that didn't work either. Any ideas would be greatly appreciated! Here is my package.json file:
{
"name": "waste-not-client",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "concurrently npm:watch:*",
"build": "webpack --mode production",
"watch:compile": "webpack --mode development --watch",
"watch:serve": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build && node server/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Blue-ocean-HR/blueocean-client.git"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/Blue-ocean-HR/blueocean-client/issues"
},
"homepage": "/",
"dependencies": {
"#auth0/auth0-react": "^1.12.0",
"axios": "^1.1.3",
"compression": "^1.7.4",
"concurrently": "^7.6.0",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"framer-motion": "^7.6.7",
"nodemon": "^2.0.20",
"path": "^0.12.7",
"react": "^18.2.0",
"react-autocomplete-input": "^1.0.19",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3",
"webpack-bundle-analyzer": "^4.7.0"
},
"devDependencies": {
"#babel/core": "^7.12.3",
"#babel/plugin-syntax-jsx": "^7.18.6",
"#babel/preset-env": "^7.12.1",
"#babel/preset-react": "^7.12.5",
"autoprefixer": "^10.4.13",
"babel-jest": "^29.1.2",
"babel-loader": "^8.2.1",
"compression-webpack-plugin": "^10.0.0",
"css-loader": "^6.7.1",
"dotenv-webpack": "^8.0.1",
"postcss": "^8.4.19",
"postcss-loader": "^7.0.1",
"postcss-preset-env": "^7.8.3",
"style-loader": "^3.3.1",
"tailwindcss": "^3.2.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"engines": {
"node": "v16.16.0"
}
}
The error when I try to deploy on heroku:
sh: 1: webpack: not found
Your start script looks like it's designed for development work with live reloading. That's not what you want on Heroku.
You could rewrite your package.json scripts, but the easiest solution is probably to add a Procfile that Heroku will use in preference to your start script, e.g.
web: node server/server.js
You'll also want to remove your heroku-postbuild script entirely. It just repeats two things that Heroku does automatically (installing dependencies and running your build), and it also includes the runtime command that we now have in our Procfile.
Normally I use yarn and start my Node.js app with yarn start. I tried the same in WebStorm to debug it, but app does not starts in browser, what is wrong? I can start app, but not debug it.
Package.json:
{
"name": "ticket",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.6.1",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.0",
"facebookgraph": "^0.4.0",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-facebook-login": "^4.1.1",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"prettier": "^1.19.1",
"pretty-quick": "^2.0.1"
}
}
WebStorm reads the package.json by default and places all commands in the left menu
So if you wanna add more commands just edit the scripts section in your package.json
You can click for example on start an will be run the script
I have spent over a day trying to get map view to work and along the way I picked up this error that I can't find anywhere at all on the internet. The error code shows up on iOS simulator with a red screen as is typical for react native.
I tried reinstalling the Dev Tools and that didn't work.
Here is my package.json
{
"name":"P77",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.7.0",
"react-native": "0.57.8",
"react-native-elements": "^0.19.1",
"react-native-maps": "^0.22.1",
"react-native-vector-icons": "^6.1.0",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"devDependencies": {
"babel-jest": "23.6.0",
"jest": "23.6.0",
"metro-react-native-babel-preset": "0.51.1",
"react-devtools": "^3.4.3",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
please help
I found out an answer that works for me, but I'm not sure. Maybe this can help people in the future. I ran:
"yarn add eslint-config-rallycoding --dev"
"npm start"
(in project directory)
I am currently developing an Electron app and I am able to generate the .app and .pkg for the macOS operating systems. Although I can run it from the .app generated, when I try to upload the .pkg (mas) I get the following error on AppStore Connect:
CFBundleIdentifier Collision -
The Info.plist CFBundleIdentifier value 'org.phantomjs' of 'phantomjs'
is already in use by another application.
I have tried updating Electron to the latest stable version (2.0.9), and updating electron-builder to the latest version (20.28.4). I've tried searching for the org.phantomjs string in the resulting .app and I am unable to find a Info.plist with that Bundle Identifier
Here I attach my package.json in case it is useful:
{
"name": "myAppName",
"version": "0.0.1",
"author": "Me <me#mymail.com>",
"description": "My Description",
"license": "MIT",
"main": "./dist/electron/main.js",
"repository": {
"type": "git",
"url": "git+https://github.com/****.git"
},
"scripts": {
"build": "node .electron-vue/build.js && electron-builder",
"build:dir": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
"dev": "node .electron-vue/dev-runner.js",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
"pack": "npm run pack:main && npm run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
"postinstall": "npm run lint:fix"
},
"build": {
"productName": "myAppName",
"appId": "this.is.a.real.appid",
"buildVersion": "5",
"directories": {
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns",
"category": "public.app-category.developer-tools",
"target": [
{
"target": "mas"
}
]
},
"mas": {
"entitlements": "build/entitlements.mas.plist",
"entitlementsInherit": "build/entitlements.mas.inherit.plist",
"icon": "build/icons/icon.icns",
"category": "public.app-category.developer-tools"
},
"win": {
"icon": "build/icons/icon.ico",
"target": [
{
"target": "nsis"
},
{
"target": "appx"
}
]
},
"linux": {
"icon": "build/icons"
},
"fileAssociations": [
{
"ext": "myExtension",
"name": "My Project",
"description": "File containing a My Project.",
"icon": "build/icons/Project.icns",
"role": "Editor",
"isPackage": true
}
],
"copyright": "Copyright © 2018 Me"
},
"dependencies": {
"#appshuttle.io/bell": "0.0.12",
"#appshuttle.io/pollock": "0.0.28",
"#appshuttle.io/turing": "0.0.16",
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.0.13",
"#fortawesome/free-regular-svg-icons": "^5.0.13",
"#fortawesome/free-solid-svg-icons": "^5.0.13",
"#fortawesome/vue-fontawesome": "0.1.1",
"axios": "^0.16.1",
"electron-updater": "^3.0.3",
"email-validator": "^2.0.4",
"grunt": "^1.0.3",
"nedb": "^1.8.0",
"p5": "^0.6.1",
"path": "^0.12.7",
"spectre.css": "^0.5.3",
"vue": "^2.3.3",
"vue-color": "^2.4.6",
"vue-electron": "^1.0.6",
"vue-router": "^2.5.3",
"vuedraggable": "^2.16.0",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-eslint": "^7.2.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"babili-webpack-plugin": "^0.1.2",
"cfonts": "^1.2.0",
"chalk": "^2.4.1",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"devtron": "^1.4.0",
"electron": "^2.0.0",
"electron-builder": "20.28.4",
"electron-debug": "^2.0.0",
"electron-devtools-installer": "^2.2.4",
"eslint": "^4.19.1",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.2",
"html-webpack-plugin": "^2.30.1",
"mini-css-extract-plugin": "^0.4.1",
"multispinner": "^0.2.1",
"node-loader": "^0.6.0",
"node-sass": "^4.9.2",
"sass-loader": "^6.0.7",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.7.1",
"webpack-hot-middleware": "^2.22.3"
}
}
Thanks so much in advance!
Found a solution (As mentioned by #countravioli in this Github Issue):
I found that there was a file called app.asar.unpacked that contained multiple Bundle Identifiers once the .pkg was created and signed. Deleting this file in the .app and then creating a .pkg didn't work for me so I used a Build Hook as proposed in the Github Issue. To prevent the file to being inserted to the .pkg file. To do this, I added a hook to the build section of my package.json at the end of the rest of its contents:
package.json
{ //package.json Root ...
build: {
// build content ...
"afterPack": "./afterPack.js"
}
}
An then created a file called afterPack.js in the folder where my package.json is located with the following contents:
const fs = require('fs');
const fse = require('fs-extra');
const path = require('path');
module.exports = function (params) {
const unpackFile = path.join(params.appOutDir, 'YOUR_APP_NAME.app/Contents/Resources/app.asar.unpacked');
console.log('EXISTS?', fs.existsSync(unpackFile));
console.log("REMOVE", unpackFile);
fse.removeSync(unpackFile);
};
I was able to upload the package to AppStore Connect without any issue.