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!
