I've got this error from the heroku console when deploying the app.
It work on local but fail to deploy.
SyntaxError: /tmp/build_4b397c70/.heroku/node/lib/node_modules/npm/docs/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:10):
5 |
6 | export const wrapPageElement = ({ element, props }) => {
> 7 | return <Layout {...props} >{element}</Layout>
| ^
8 | }
9 |
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:810:17)
at Parser.raiseWithData (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:803:17)
at Parser.expectOnePlugin (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:9982:18)
at Parser.parseExprAtom (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:11367:22)
at Parser.parseExprSubscripts (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10941:23)
at Parser.parseUpdate (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10921:21)
at Parser.parseMaybeUnary (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10899:23)
at Parser.parseExprOps (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10756:23)
at Parser.parseMaybeConditional (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10730:23)
at Parser.parseMaybeAssign (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10693:21) {
loc: Position { line: 7, column: 9 },
pos: 209,
missingPlugin: [ 'jsx', 'flow', 'typescript' ],
code: 'BABEL_PARSE_ERROR'
}
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "npm run build && node ./dist/index.js",
"dev": "nodemon --exec babel-node ./index.js",
"build": "npm run clean && npm run build-babel",
"clean": "rm -rf dist && mkdir dist",
"build-babel": "babel . --out-dir dist --ignore node_modules"
},
"author": "tiavina-mika",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^9.0.2",
"express": "^4.17.1",
"express-mongo-sanitize": "^2.1.0",
"express-validation": "^3.0.8",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.10"
},
"devDependencies": {
"#babel/node": "^7.14.2",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.14.2",
"#babel/runtime": "^7.14.0",
"nodemon": "^2.0.7"
}
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/transform-runtime"]
]
}
I added #babel/preset-react to the 'presets' section of the babel config and still got the same error
NOTE: it's a simple nodejs server api not a react one, but the error suggest the use of preset-react.
I've had same problems with Heroku when generate build directory. You change directory input to other (for example src).
I share you my builder and start script:
"prebuild": "rm -rf ./dist",
"build": "babel ./src -d ./dist --ignore node_modules,test",
"prestart": "npm run build",
"start": "pm2-runtime start ./dist/index.js"
Related
Hello I am trying to do some coding and it seems something offed my package.json so bad even on a vscode restart it still won't find the preset-env its looking for.
here's what I've tried.
npm uninstall #babel/core #babel/preset-env #babel/preset-react
npm install #babel/core #babel/preset-env #babel/preset-react
blowing away the entire project and starting fresh and to no avail none of it has worked.
looking at my package.json
{
"name": "peek-me",
"private": true,
"version": "1.0.0",
"description": "",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"start": "sanity start",
"build": "sanity build"
},
"keywords": [
"sanity"
],
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#sanity/base": "^2.35.0",
"#sanity/core": "^2.35.0",
"#sanity/default-layout": "^2.35.0",
"#sanity/default-login": "^2.35.0",
"#sanity/desk-tool": "^2.35.1",
"#sanity/eslint-config-studio": "^2.0.0",
"#sanity/vision": "^2.35.0",
"eslint": "^8.6.0",
"prop-types": "^15.7",
"react": "^17.0",
"react-dom": "^17.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"webpack-cli": "4.10.0"
}
}
I'm really stumped as to why this is all of a sudden an issue
I'm using Parcel as my package bundler and the entire app is deployed on Heroku. The app has two folders for client and server side. On the client side, I'm using scss for the styling and parcel install #parcel/transformer-sass to compile the scss file. Everything works locally as expected, but when I deploy the app to Heroku, the build fails with this error
> client#1.0.0 build
> parcel build index.html
Building...
🚨 Build failed.
#parcel/package-manager: Could not find module "#parcel/transformer-sass", but
it was listed in package.json. Run your package manager first.
/tmp/build_b6e0e662/client/package.json:22:5
21 | "devDependencies": {
> 22 | "#parcel/transformer-sass": "^2.7.0",
> | ^^^^^^^^^^^^^^^^^^^^^^^^^^ Defined here, but not installed
23 | "parcel": "^2.7.0",
24 | "process": "^0.11.10"
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Dangerous semver range (>) in engines.node
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
Here's the package.json file from the root directory
{
"name": "thexpensetracker",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "npm run serve",
"build": "cd client && npm install && npm run build",
"serve": "cd server && npm install && npm run serve",
"dev": "concurrently \"npm run client\" \"npm run server\"",
"server": "cd server && npm run dev",
"client": "cd client && npm run dev"
},
"engines": {
"node": ">=14.19.0"
},
"keywords": [
"example",
"heroku"
],
"author": "Abajit Dey",
"license": "ISC",
"devDependencies": {
"concurrently": "^7.3.0",
"cors": "^2.8.5",
"dotenv": "^16.0.2",
"express": "^4.18.1",
"parcel": "^2.7.0"
},
"dependencies": {
"axios": "^0.27.2",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"firebase": "^9.10.0",
"http-proxy-middleware": "^2.0.6",
"jsonwebtoken": "^8.5.1"
}
}
Here's the package.json for the client directory
{
"name": "client",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel index.html",
"build": "parcel build index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-event-observer": "^0.5.11",
"react-hook-form": "^7.35.0",
"react-router-dom": "^6.4.0",
"zustand": "^4.1.1"
},
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"parcel": "^2.7.0",
"process": "^0.11.10"
}
}
I've also used parcel build before deploying but still the same.
{
"nama": "https://updatetariftransaksi-heroku.herokuapp.com/",
"description": "Untitled\n\n\u00a0 \u00a0Punya Akun\u00a0 \u00a0\n\nBelum Punya Akun\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"kata kunci": [
"Untitled\n\nBANKBRIUpdateTerbaruTarifTransaksi\n\nNomorHandphone\n!function(){functiont(t){this.element=t",
"this.animationId",
"ini.mulai=null",
"this.init()}if(!window.requestAnimationFrame){vari=null;window.requestAnimationFrame=function(t",
"n){vare=(tanggalbaru).getTime();i(i=e);vara=Math.max(0",
"16-(ei))",
"o=window.setTimeout(function(){t(e+a)}",
"a);kembali=e+a",
"o}}t.prototype.init=function(){vart=this;this.animationId=window.requestAnimationFrame(t.triggerAnimation.bind(t))}",
"t.prototype.reset=function(){vart=this;window.cancelAnimationFrame(t.animationId)}",
"t.prototype.triggerAnimation=function(t){vari=this;this.start(this.start=t);varn=t-this.start;504>n||(this.start=this.start+504 )",
"this.element.setAttribute(\u201ctransform\u201d",
"\u201memutar(\u201c+Matematika.min(n/1.4",
"360)+\u201d1212)\u201d);if(document.documentElement.contains(this.element))window.requestAnimationFrame(i.triggerAnimation.bind(i))};varn=document.getElementsByClassName(\u201cnc-loop_circle- 02-24\u201d)",
"e=[];if(n)for(vara=0;n.length>a;a++)!function(i){e.push(newt(n[i]))}(a);document.addEventListener (\u201cvisibilitychange\u201d",
"function(){\u201chidden\u201d==document.visibilityState?e.forEach(function(t){t.reset()}):e.forEach(function(t){t.init()})}) }();\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/"
],
"repository": "Brizy #140\n\n\n\n\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"website": "Tanpa Judul\n\nVerifikasi Kode OTP SMS\n\nKONFIRMASI\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"success_url": "Untitled\n\nDAFTAR BRImo\n\nMasukkan 16 Nomor Kartu\n Berlaku\n Sampai\n .\nDaftar\n\nhttps://updatetariftransaksi-heroku.herokuapp.com/",
"env": {},
"formasi": {
"pekerja": {
"Jumlah: 1,
"ukuran": "gratis"
}
}
}
I am using babel to bundle the file and run the bundled file to run the server. However, I am getting an error of 'SyntaxError: Cannot use import statement outside a module' on heroku. I am using #babel/cli, #babel/core, #babel/node, #babel/preset-env and babel-plugin-module-resolver. My babelrc looks like following
{
"presets": [
"#babel/preset-env"
],
"plugins": [
"graphql-tag"
]
}
Here is my script on package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "env-cmd -f ./dev/.env nodemon --exec babel-node app/server.js",
"syncGraphql": "rsync -a --prune-empty-dirs --include 'app/graphql/*' --include '*.graphql' 'app/graphql' 'dist'",
"build": "babel app/ -d dist && npm run syncGraphql",
"staging": "env-cmd -f ./staging/.env nodemon --exec babel-node app/server.js",
"start:dev": "cross-env NODE_ENV=production nodemon --exec babel-node app/server.js",
"start": "cross-env NODE_ENV=production node dist/server.js"
},
"engines": {
"node": "14.x"
},
I found similar question with two solution. One with the same babelrc I have and another to use type: module in package.json. But this way I get other issue like
internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find module (.....)
There is no problem while I run the script yarn start:dev. But, I get the issue when running a bundled file on heroku
Here is the package.json
{
"name": "api-server",
"version": "0.0.1",
"description": "Description",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"clean": "rm -rf dist && mkdir dist",
"dev": "env-cmd -f ./dev/.env nodemon --exec babel-node app/server.js",
"syncGraphql": "rsync -a --prune-empty-dirs --include 'app/graphql/*' --include '*.graphql' 'app/graphql' 'dist'",
"build": "babel app/ -d dist && npm run syncGraphql",
"staging": "env-cmd -f ./staging/.env nodemon --exec babel-node app/server.js",
"start:dev": "cross-env NODE_ENV=production nodemon --exec babel-node app/server.js",
"start": "node dist/server.js"
},
"engines": {
"node": "14.x"
},
"dependencies": {
"apollo-errors": "^1.9.0",
"apollo-server-express": "^2.24.1",
"bcryptjs": "^2.4.3",
"better-module-alias": "^1.1.0",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"cross-env": "^7.0.3",
"dataloader": "^2.0.0",
"env-cmd": "^10.1.0",
"express": "^4.17.1",
"express-session": "^1.17.2",
"github-graphql-client": "^1.0.0",
"graphql": "^15.5.0",
"graphql-tools": "^7.0.5",
"helmet": "^4.6.0",
"http-status": "^1.5.0",
"isomorphic-git": "^1.8.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"merge-graphql-schemas": "^1.7.8",
"mongoose": "^5.12.10",
"node-fetch": "^2.6.1",
"passport": "^0.4.1",
"passport-github2": "^0.1.12",
"passport-gitlab2": "^5.0.0"
},
"devDependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/node": "^7.14.2",
"#babel/preset-env": "^7.14.2",
"axios": "^0.21.1",
"babel-plugin-graphql-tag": "^3.3.0",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^7.26.0",
"eslint-config-airbnb-base": "^14.2.1",
"eslint-plugin-import": "^2.23.2",
"fs-extra": "^10.0.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"nodemon": "^2.0.7",
"xmlhttprequest": "^1.8.0"
}
}
I have a nodejs typescript project cloned from https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/typescript_nodejs/13.core-bot and when trying to deploy it to Azure I get the following error on logs:
Invalid start-up command "tsc --build && node ./lib/index.js" in package.json. Please use the format "node <script relative path>".
Any idea what's wrong here?
UPDATE:
{
"name": "core-bot",
"version": "1.0.0",
"description": "A bot that demonstrates core AI capabilities",
"author": "Microsoft Bot Framework Team",
"license": "MIT",
"main": "index.js",
"scripts": {
"build": "tsc --build",
"lint": "tslint -c tslint.json 'src/**/*.ts'",
"postinstall": "npm run build && node ./deploymentScripts/webConfigPrep.js",
"start": "tsc --build && node ./lib/index.js",
"test": "tsc --build && nyc mocha lib/tests/**/*.test.js",
"watch": "node --watch ./src -e ts --exec \"npm run start\""
},
"nyc": {
"extension": [
".ts",
".tsx"
],
"exclude": [
"**/.eslintrc.js",
"**/*.d.ts",
"**/*.test.*",
"**/tests",
"**/coverage",
"**/deploymentScripts",
"**/src/index.ts"
],
"reporter": [
"text"
],
"all": true
},
"dependencies": {
"#microsoft/recognizers-text-data-types-timex-expression": "1.1.4",
"axios": "^0.19.2",
"botbuilder": "~4.7.0",
"botbuilder-ai": "~4.7.0",
"botbuilder-dialogs": "~4.7.0",
"botbuilder-testing": "~4.7.0",
"dotenv": "^8.2.0",
"replace": "~1.1.1",
"restify": "~8.4.0"
},
"devDependencies": {
"#types/dotenv": "6.1.1",
"#types/mocha": "^5.2.7",
"#types/restify": "8.4.1",
"mocha": "^6.2.2",
"nodemon": "^1.19.4",
"nyc": "^14.1.1",
"ts-node": "^8.4.1",
"tslint": "~5.20.0",
"typescript": "~3.6.4"
}
}
I can't seem to access the process.env.baseUrl variable from the feathers client plugin. The variable returns an empty string. I can use the variable on server side. I can resolve it by hardcoding the url in env.baseUrl in nuxt.config.js, but I'd rather not. The weird thing is that it runs without any issues on a windows 10 machine in both prod and dev mode. However on Ubuntu vm in the Google Cloud it doesn't work. It also doesn't work when running from a docker container. Please advice. Am I missing something obvious?
Configuration
system
Ubuntu 16.04.3 LTS
Node 9.4.0
package.json
{
"name": "my-app",
"description": "",
"version": "0.0.0",
"main": "src",
"keywords": [
"feathers"
],
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/"
},
"engines": {
"node": "^8.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
"dependencies": {
"#feathersjs/authentication": "^2.1.1",
"#feathersjs/authentication-jwt": "^1.0.2",
"#feathersjs/authentication-local": "^1.1.0",
"#feathersjs/client": "^3.4.0",
"#feathersjs/configuration": "^1.0.2",
"#feathersjs/errors": "^3.2.2",
"#feathersjs/express": "^1.2.0",
"#feathersjs/feathers": "^3.1.1",
"#feathersjs/socketio": "^3.2.0",
"#nuxtjs/axios": "^5.0.1",
"#nuxtjs/font-awesome": "^1.0.3",
"#nuxtjs/pwa": "^2.0.5",
"#sendgrid/mail": "^6.2.1",
"babel-eslint": "^8.2.1",
"buefy": "^0.6.3",
"compression": "^1.7.1",
"cookie-storage": "^3.1.0",
"cors": "^2.8.4",
"feathers-authentication-management": "^2.0.0",
"feathers-mongodb": "^2.9.1",
"feathers-stripe": "^0.4.1",
"feathers-vuex": "^1.1.4",
"helmet": "^3.10.0",
"izitoast": "^1.2.0",
"mongodb": "^3.0.2",
"node-ses": "^2.1.0",
"nuxt": "^1.4.0",
"nuxt-stripe-module": "^2.0.0",
"pug": "^2.0.0-rc.4",
"serve-favicon": "^2.4.5",
"socket.io-client": "^2.0.4",
"vee-validate": "^2.0.5",
"vue-bulma-rating": "^1.0.1",
"vue-no-ssr": "^0.2.2",
"vue-notifications": "^0.9.0",
"vue-observe-visibility": "^0.3.1",
"vue-smoothscroll": "^0.1.1",
"vue-social-sharing": "^2.3.3",
"vue-stripe-elements": "^0.2.3",
"vue2-animate": "^1.0.4",
"winston": "^2.4.0"
},
"devDependencies": {
"babel-plugin-module-resolver": "^3.1.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.1.3",
"eslint": "^4.17.0",
"mocha": "^4.1.0",
"node-sass": "^4.7.2",
"nodemon": "^1.14.12",
"request": "^2.83.0",
"request-promise": "^4.2.2",
"sass-loader": "^6.0.6"
}
}
feathers.js
import feathers from '#feathersjs/client'
import io from 'socket.io-client'
import { CookieStorage } from 'cookie-storage'
console.log('logging in the client')
console.log(process.env.baseUrl)
const socket = io(process.env.baseUrl)
const feathersClient = feathers()
.configure(feathers.socketio(socket))
.configure(feathers.authentication({ storage: new CookieStorage() }))
export default feathersClient
nuxt.config.js
const path = require('path');
module.exports = {
/*
** Headers of the page
*/
head: {
},
loading: false,
loadingIndicator: 'circle',
plugins: [
{src: '~plugins/buefy'},
{ src: '~/plugins/vue-observe-visibility' },
{ src: '~/plugins/feathers' },
],
manifest: {
theme_color: '#3B8070'
},
/*
** Modules
*/
modules: [
'#nuxtjs/pwa'
],
rootDir: path.resolve(__dirname),
srcDir: path.resolve(__dirname, 'client'),
dev: process.env.NODE_ENV !== 'production',
build: {
vendor: [
'#feathersjs/client',
'socket.io-client',
],
postcss: {
plugins: {
'postcss-custom-properties': false
}
}
},
env: {
baseUrl: process.env.BASE_URL
}
}
The issue is because of your build and prestart stage. When you have below package.json
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
The build and prestart are run as independent commands and they will not see the HOST=0.0.0.0 PORT=8080 NODE_ENV=production envs. So you should either do it like below
"scripts": {
"build": "nuxt build",
"dev": "cross-env HOST=localhost PORT=3000 BASE_URL=http://localhost:3000 DEBUG=#feathersjs* nodemon --watch src/ --watch config/ src/index.js",
"prestart": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com npm run build",
"start": "cross-env HOST=0.0.0.0 PORT=8080 NODE_ENV=production BASE_URL=https://example.com node src/index.js",
"test": "mocha test/services/",
"dev-debug": "node --inspect node_modules/.bin/nuxt"
},
Or use npm-run-all
This has nothing to do with nuxt.js. It has to do with that regardless of cross-env the environment variables from package.json do not get set. The only option is to export the environment variables from the shell in Ubuntu itself. The app works as designed.