PM2 Interpretor not using babel for my dev environment for react app

Question

I'm trying to set up pm2 for my development server,and it seems like its launched but upon going to my site in port 3000 it says that it can't be reached refuses to connect. I checked my pm2 logs and it says

SyntaxError: /var/www/html/ucdirectorapp/src/index.js: Unexpected token (33:4) 0|ucdirector-dev | 31 | ReactDOM.render( 0|ucdirector-dev | 32 | 0|ucdirector-dev | > 33 | 0|ucdirector-dev | | ^ 0|ucdirector-dev | 34 | , document.getElementById('root')); 0|ucdirector-dev | 35 |

So I think it has to do with my interpreter.

I've compiled and made a build folder.

I've pointed the interpreter to ./node_modules/@babel/cli/bin/babel.js and even ./node_modules/babel-cli/bin/babel-node.js.

I've tried reinstalling babel-cli. I've tried deleting my node_modules and reinstalling everything.

I've tried installing babel-cli globally.


//this is my pm2 config file

module.exports = {
    apps: [{
        name: "ucdirectorapp",
        script: "./src/index.js",
        watch: [
            "./build",
            "./public",
            "./src"
        ],
        watch_delay: 1000,
        ignore_watch: ["node_modules"],
        watch_options: {
            "followSymlinks": false
        },
        env: {
            name: 'ucdirector-dev',
            NODE_ENV: 'development',
            "PORT": 3000,
        },
        interpreter: "./node_modules/babel-cli/bin/babel.js"

    }],
};

--
//my webpack config uses these presets and plugins for js

 test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets:[ "@babel/preset-env", "@babel/preset-react"],
                            plugins: [
                                "@babel/plugin-syntax-dynamic-import", '@babel/plugin-proposal-class-properties'
                            ]
                        }
                    }
                ],


---

//in my package.json these are the dependecies i'm using for babel 

 "@babel/plugin-proposal-class-properties": "^7.4.4",
    "babel-plugin-async-to-promises": "^1.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"

//this is what i have in dev dependecies

 "@babel/core": "^7.4.5",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",


//and this is the script that I am using 

 "pm": "pm2 start config/server/pm2.config.js --watch",

I am expecting the site to be up on port 3000, and the syntax error to be removed. But I am seeing this syntax error. Which I am guessing its not recovnizing react classes.

SyntaxError: /var/www/html/ucdirectorapp/src/index.js: Unexpected token (33:4) 0|ucdirector-dev | 31 | ReactDOM.render( 0|ucdirector-dev | 32 | 0|ucdirector-dev | > 33 | 0|ucdirector-dev | | ^ 0|ucdirector-dev | 34 | , document.getElementById('root'));

score 0 · Answer 1 · answered Dec 17 '19 at 18:03

I found that ecosystem.config.js can use interpreter ./node_modules/.bin/babel-node but in their documentations says that only if it runs in:

"fork" mode

Remember that those commands will only work in fork_mode. If you want to run a PM2 cluster, please refer to the alternative below.

You can check all the info in their page.

http://pm2.keymetrics.io/docs/tutorials/using-transpilers-with-pm2#babel

PM2 Interpretor not using babel for my dev environment for react app

1 Answers1