So i have been trying to get my ejected create-react-app, switched to be server side rendered. This is a simplified version of my file structure:
...
/client
/build
/public
package.json
/src
index.js
/components
/app
App.js
/routes
/api
Canvas.js
.babelrc
server.js
package.json
...
I am trying to import App.js into Canvas.Js, So that i can use it in a ReactDOMServer.renderToString();
The problem though, is on the actual import. The import brings up this error:
client/src/components/app/App.js: Unexpected token (34:4)
32 |
33 | return (
> 34 | <div>
| ^
35 | <IconSettings
at Parser.raise (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/location.js:41:63)
at Parser.unexpected (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/util.js:150:16)
at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1116:20)
at Parser.parseExprSubscripts (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:526:23)
at Parser.parseMaybeUnary (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:506:21)
at Parser.parseExprOps (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:295:23)
at Parser.parseMaybeConditional (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:247:23)
at Parser.parseMaybeAssign (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:195:21)
at Parser.parseParenAndDistinguishExpression (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1293:16)
at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/#babel/parser/src/parser/expression.js:1023:21) {
pos: 1681,
loc: Position { line: 34, column: 4 },
code: 'BABEL_PARSE_ERROR'
}
I am just pulling it in with:
const App = require('../../client/src/components/app/App');
And i have used both require and import, with the same result. Not that, that should change anything but in case anyone asks.
Here is my babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-transform-react-jsx"]
}
Heres my package.json:
{
"name": "express-canvas-app",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "babel-node server.js",
"build": "babel server.js --out-file server.compiled.js",
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/node": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.0.0-beta.40",
"#babel/register": "7.8.3",
"#material-ui/core": "^4.4.3",
"#salesforce-ux/design-system": "^2.10.2",
"#salesforce/design-system-react": "^0.10.16",
"aws-param-store": "^3.2.0",
"aws-sdk": "^2.594.0",
"axios": "^0.19.0",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"babel-preset-es2015": "^6.24.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"crypto-js": "^3.1.9-1",
"dotenv": "^8.2.0",
"enzyme": "^3.10.0",
"express": "^4.17.1",
"express-sse": "^0.5.1",
"fs": "0.0.1-security",
"http": "0.0.0",
"https": "^1.0.0",
"jsforce": "^1.9.3",
"node-cache": "^5.1.0",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.1",
"salesforce-signed-request": "0.0.1",
"validator": "^11.1.0",
"webpack-node-externals": "^1.7.2"
},
"devDependencies": {
"#salesforce/babel-preset-design-system-react": "^3.0.0",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^23.0.4",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"eslint-plugin-react-hooks": "^1.7.0",
"nodemon": "^1.19.2",
"npm-run-all": "^4.1.5",
"salesforce-signed-request": "0.0.1",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-node-externals": "^1.7.2"
}
}
Any help or ideas would be awesome! I have spent the last couple days trying to nail down my errors and get babel configured!
I think in this particular case, i still had some webpack and package json files in the client folder. After porting over logic to a new app with webpack.server.js and package.json only living at root, i seem to have fixed the issue.
Related
My vscode terminal directory turns into a very very long combination of alphabets as soon as I type something in it. Like "\xe1\x84\x82\xe1\x85\xb3...."
above is how it looks when terminal is opened.
above is how it turns into as soon as I type something in it.
above is what I get when I click 'split terminal' icon.
I used parcel to to configure this react project. Below is my package.json file
{
"name": "vanilla-react",
"version": "1.0.0",
"description": "",
"scripts": {
"dev": "parcel public/index.html",
"format": "prettier --write \"src/**/*.{js,jsx}\"",
"format:check": "prettier --check \"src/**/*.{js,jsx}\"",
"lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
"test": "jest",
"test:watch": "jest --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"#parcel/transformer-sass": "^2.5.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.3",
"#testing-library/user-event": "^14.1.1",
"babel-jest": "^28.0.1",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.5.0",
"eslint-plugin-react-redux": "^4.0.0",
"jest": "^27.5.1",
"parcel": "^2.5.0",
"prettier": "^2.6.2"
},
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^8.0.1",
"sass": "^1.51.0"
},
"browsersList": [
"last 2 Chrome versions"
]
}
I'm trying to run yarn start and am getting the following error:
🚨 /User/platform/src/containers/App.js: Cannot resolve dependency 'core-js/modules/es6.array.iterator'
This is my package.json:
{
"name": "static-site-mailer",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"dependencies": {
"#babel/polyfill": "^7.8.7",
"aws-sdk": "^2.661.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"core-js": "^3.6.5",
"es6-promise": "^4.2.8",
"html-webpack-plugin": "^4.2.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "1.9.1 - 3",
"popper.js": "^1.16.0",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-dom": "^16.13.1",
"react-modal": "^3.11.2",
"react-modal-login": "^1.4.5",
"react-modal-plugin": "^1.0.3",
"react-router-dom": "^5.1.2",
"regenerator-runtime": "^0.13.5",
"xmlhttprequest": "^1.8.0"
},
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/plugin-proposal-class-properties": "^7.8.3",
"#babel/preset-env": "^7.9.5",
"#babel/preset-react": "^7.9.4",
"#testing-library/jest-dom": "^5.5.0",
"#testing-library/react": "^10.0.3",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.4.0",
"babel-loader": "^8.1.0",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.4",
"eslint-plugin-react": "^7.19.0",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.4.0",
"parcel-bundler": "^1.12.4",
"react-test-renderer": "^16.13.1",
"sass": "^1.26.3",
"webpack": "^4.43.0"
},
"scripts": {
"start": "parcel ./src/index.html",
"test": "jest",
"build": "rm -rf dist && parcel build ./src/index.html",
"watch": "parcel ./src/index.html"
},
"jest": {
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "identity-obj-proxy"
}
}
}
What's going on? I assume I am using the incorrect version of one of the packages? I have already uninstalled and reinstalled the packages a few times now but it doesn't seem to make a difference.
I downloaded core-js#3.6.5 via npm and took a look at the following path:
core-js/modules
The modules directory does NOT contain the file es6.array.iterator.js but it DOES contain es.array.iterator.
Try changing the path 'core-js/modules/es6.array.iterator.js' to 'core-js/modules/es.array.iterator.js' in the affected file.
I'm trying to deploy a Next application with custom server.js into GAE. I can run the project with no problems on local and even on the google GCP CLI. The problem right now is after the app is deployed to GAE successfully via gcloud app deploy, I'm getting the following error when opening the app.
2020-03-30 21:41:21.748 HKT
Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'
Expand all | Collapse all{
insertId: "5e81f701000b6ba4e770be02"
labels: {…}
logName: "projects/next-gae/logs/stderr"
receiveTimestamp: "2020-03-30T13:41:21.749839891Z"
resource: {…}
textPayload: "Error: EROFS: read-only file system, unlink '/srv/dist/functions/next/BUILD_ID'"
timestamp: "2020-03-30T13:41:21.748452Z"
}
My app.yaml is below:
runtime: nodejs10
.gcloudignore
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
*.hot-update.js*
# Other config and Files
README.md
.eslintignore
.eslintrc
package.json
{
"name": "next-gae",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.3",
"#babel/runtime": "^7.8.7",
"#sentry/browser": "^5.15.0",
"#sentry/integrations": "^5.15.0",
"#sentry/node": "^5.15.0",
"#storybook/addon-actions": "^5.2.6",
"#storybook/addon-info": "^5.2.6",
"#storybook/addon-knobs": "^5.2.6",
"#storybook/addon-links": "^5.2.6",
"#storybook/addon-notes": "^5.2.6",
"#storybook/addon-storysource": "^5.2.6",
"#storybook/addon-viewport": "^5.2.6",
"#storybook/react": "^5.2.6",
"antd": "^3.26.7",
"axios": "^0.19.0",
"connected-react-router": "^6.5.2",
"cookie-parser": "^1.4.4",
"cors": "^2.8.5",
"date-fns": "^2.9.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"firebase": "^7.8.0",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.3.0",
"formik": "^2.1.4",
"helmet": "^3.21.2",
"hpp": "^0.2.3",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.1.0",
"immutable": "^4.0.0-rc.12",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"morgan": "^1.9.1",
"next": "^9.1.7",
"next-antd-aza-less": "^1.0.2",
"next-optimized-images": "^2.5.5",
"next-redux-wrapper": "^4.0.1",
"nocache": "^2.1.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-smooth-scrollbar": "^8.0.6",
"react-stripe-elements": "^6.0.1",
"react-virtualized": "^9.21.2",
"redux": "^4.0.4",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"redux-multi": "^0.1.12",
"redux-observable": "^1.2.0",
"redux-persist": "^6.0.0",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"smooth-scrollbar": "^8.5.1",
"storybook-addon-figma": "^0.1.0",
"storybook-readme": "^5.0.8",
"styled-components": "^5.0.0",
"xss-clean": "^0.1.1",
"yup": "^0.28.2"
},
"engines": {
"node": "10"
},
"scripts": {
"test": "jest",
"flow": "flow",
"eslint": "eslint \"./**/*.{jsx,js}\"",
"lint": "eslint ./src/",
"lint:fix": "npm run lint --fix",
"lint:dry": "npm run lint --fix-dry-run",
"build-next": "next build \"src/app/\"",
"clean": "rimraf dist",
"predeploy": "npm run build-all",
"start": "cd \"src/app/\" ; NODE_ENV=production node server.js",
"deploy:gae": "npm run pre-start; npm run build-next; gcloud app deploy",
"fmt": "prettier --config .prettierrc.yml --write \"{!(node_modules),!(__mock__)/**/}*.{jsx,js,json,md,ts}\""
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{jsx,js}": [
"flow focus-check",
"npm run lint:fix",
"git add"
],
"*.{jsx,js,json,md,ts}": [
"npm run fmt",
"git add"
]
},
"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": {
"babel-eslint": "^10.0.3",
"babel-plugin-import": "^1.13.0",
"babel-plugin-inline-import": "^3.0.0",
"babel-plugin-inline-react-svg": "^1.1.1",
"babel-plugin-styled-components": "^1.10.6",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"cpx": "^1.5.0",
"cross-env": "^7.0.2",
"eslint": "^6.6.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-plugin-flowtype": "^4.4.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"firebase-functions-test": "^0.2.0",
"firebase-tools": "^7.15.1",
"flow-bin": "^0.111.3",
"husky": "^3.1.0",
"jest": "^24.8.0",
"lint-staged": "^9.4.2",
"nodemon": "^2.0.2",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"webpack": "^4.42.0"
}
}
The error you are getting is telling you that the path you are trying to delete from is read only. In GAE standard the paths you can write to are limited:
Java 8, Java 11, Node.js, Python 3.7, PHP 7.2, PHP 7.3, Ruby 2.5
(beta), Go 1.11, Go 1.12, and Go 1.13 have read and write access to
the /tmp directory.
You should handle your files in the /tmp directory or use App Engine Flex if you cannot do so.
I have upgraded the existing react native project from react native 0.59.6 to 0.61.5.
react-native upgrade command not working. So I have done the manual upgrade using upgrade helper. Resolved some post issues. Now project build success.
But After rendering into the ios emulator from Xcode, it is giving the following error.
I am not using Component.propTypes anywhere. package.lock.json have some packages with prop-types. I am not sure what it is doing exactly. Otherwise, inside my project, I am not using
prop-types also. Please find my package.lock.json below,
package.lock.json
...
...
...
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
....
"react": {
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react/-/react-16.9.0.tgz",
"integrity": "sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2"
}
},
....
package.json
{
"name": "wasfat",
"version": "1.0.3",
"private": true,
"rnpm": {
"assets": [
"app/assets/fonts/corbel"
]
},
"scripts": {
"prepare-repository": "npm i -g react-native-cli yarn;yarn install; react- native link",
"emulator": "emulator -avd Nexus5V6L23_x86_64 -scale 1.0",
"clean": "watchman watch-del-all && npm cache clean && cd android && ./gradlew clean && cd ..",
"test": "jest",
"postinstall": "rm -rf node_modules/react-native-twitter-signin/node_modules",
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"lint": "eslint ."
},
"dependencies": {
"jetifier": "^1.6.5",
"react": "16.9.0",
"react-native": "^0.61.5",
"react-native-actionsheet": "^2.4.2",
"react-native-android-keyboard-adjust": "^1.2.0",
"react-native-aws3": "0.0.8",
"react-native-deep-linking": "^2.2.0",
"react-native-device-info": "^5.3.1",
"react-native-double-tap": "^1.0.1",
"react-native-drawer": "^2.5.1",
"react-native-elements": "^1.0.0",
"react-native-exception-handler": "^2.10.8",
"react-native-fbsdk": "^1.1.0",
"react-native-firebase": "^5.5.6",
"react-native-gesture-handler": "^1.1.0",
"react-native-google-signin": "^1.2.3",
"react-native-hide-with-keyboard": "^1.2.0",
"react-native-image-crop-picker": "^0.25.3",
"react-native-image-picker": "^0.28.1",
"react-native-image-slider": "^2.0.3",
"react-native-image-view": "^2.1.5",
"react-native-keyboard-avoiding-view": "^1.0.0",
"react-native-keyboard-aware-scroll-view": "^0.8.0",
"react-native-keyboard-aware-scrollview": "^2.0.0",
"react-native-keyboard-aware-view": "0.0.14",
"react-native-keyboard-listener": "^1.1.0",
"react-native-modal": "^11.1.0",
"react-native-paper": "^2.15.0",
"react-native-picker-select": "^6.2.0",
"react-native-popup-menu": "^0.15.6",
"react-native-progress": "^3.6.0",
"react-native-read-more-text": "^1.1.0",
"react-native-responsive-image": "^2.3.1",
"react-native-responsive-screen": "^1.2.1",
"react-native-s3-upload": "0.0.12",
"react-native-share": "^1.2.1",
"react-native-side-drawer": "^1.1.9",
"react-native-side-menu": "^1.1.3",
"react-native-simple-toast": "0.0.8",
"react-native-snap-carousel": "^3.8.0",
"react-native-swiper-flatlist": "^1.0.10",
"react-native-twitter-signin": "^1.1.1",
"react-native-vector-icons": "^6.6.0",
"react-native-video": "^4.4.4",
"react-native-video-controls": "^2.2.3",
"react-native-video-player": "^0.10.0",
"react-native-view-more-text": "^2.1.0",
"react-navigation": "^3.3.0",
"react-redux": "^7.1.0",
"react-spinkit": "^3.0.0",
"redux": "^4.0.4"
},
"devDependencies": {
"#babel/core": "^7.6.2",
"#babel/runtime": "^7.6.2",
"#react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I have found this https://reactjs.org/warnings/dont-call-proptypes.html regarding this issue. But I am not sure how to use it. Because according to this. some third party libraries using propTypes directly. But how to handle it?
There is no help in 0.61 version Github issues. Please suggest some workarounds for this issue.
Thanks for any help.
No idea how to go about fixing this error. Did some google searching and followed what people recommended. Even removed node_modules and reinstalled but nothing works
I am getting this error:
Error: Cannot find module 'babel-runtime/helpers/interop-require-default' (While processing preset: "/Users/bli1/Development/node_modules/babel-preset-es2015/index.js")
package.json:
{
"name": "braddy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "npm-run-all --parallel testApp:watch testServer:watch open:src lint:watch",
"open:src": "babel server/server.js",
"testApp": "mocha --reporter nyan tests/testSetup.js \"app/**/*.test.js\"",
"testApp:watch": "npm run testApp -- --watch",
"testServer": "mocha --reporter progress tests/testSetup.js \"server/**/*.test.js\"",
"testServer:watch": "npm run testServer -- --watch",
"lint": "node_modules/.bin/esw webpack.config.* app server tests",
"lint:watch": "npm run lint -- --watch"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-register": "^6.18.0",
"babel-runtime": "^6.18.0",
"express": "^4.14.0",
"jquery": "^3.1.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-preset-react": "^6.16.0",
"babel-runtime": "^6.18.0",
"cheerio": "^0.22.0",
"eslint": "^3.11.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-react": "^6.8.0",
"eslint-watch": "^2.1.14",
"eventsource-polyfill": "^0.9.6",
"extract-text-webpack-plugin": "^1.0.1",
"jsdom": "^9.8.3",
"loglevel": "^1.4.1",
"mocha": "^3.2.0",
"npm-run-all": "^3.1.2",
"open": "0.0.5",
"react-hot-loader": "^1.3.1",
"webpack": "^1.13.3",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.2",
"webpack-hot-middleware": "^2.13.2"
}
}
The plugin babel-preset-es2015 is missing in your package.json, and not installed when you do npm install. Add it, and install again.