Deploying node/webpack/express/mysql project to Heroku error "Uncaught ReferenceError: regeneratorRuntime is not defined" bundle.js

Question

I have gone in so many circles since development, I'm now a bit lost and the code is a mess. This is my first node project (outside a framework) and I'm starting to wish I'd used PHP.Anyway, here is the webpack.common.js file.

const path = require('path');

require("babel-polyfill");

 const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: {
 app: ['babel-polyfill','./src/index.js'],
},

plugins: [

 new HtmlWebpackPlugin({
   title: 'Production',
   filename: 'index.html',
   template: './src/index.html',
 }),
],

output: {
 publicPath: '/',

 filename: 'js/bundle.js',

 path: path.resolve(__dirname, 'dist'),

},

module: {
rules: [
    {
    test: /\.js$/, 
    exclude: /node_modules/,

    use:{
        loader: 'babel-loader'
        }
    },
    {
    test: /\.css$/,

    exclude: /node_modules/,
    use: ['style-loader', 'css-loader'],
    },
]

},
};

When I push to Heroku master I set NPM_CONFIG_PRODUCTION is 'false' so that dev dependencies also get 
loaded. Here is the package.json so you know what I'm using and what I've tried to some extent.

{
"name": "stock",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {
"dev": "webpack-dev-server --mode development --open",

"start": "node backendindex.js",

"heroku-postbuild": "webpack -p"
 },

"keywords": [],

"author": "",

"license": "ISC",

"devDependencies": {
"@babel/core": "^7.7.5",

"@babel/plugin-transform-runtime": "^7.8.3",

"@babel/preset-env": "^7.7.6",

"babel-core": "^6.26.3",

"babel-loader": "^8.0.6",

"babel-plugin-transform-regenerator": "^6.26.0",

"babel-polyfill": "^6.26.0",

"babel-preset-env": "^1.7.0",

"babel-preset-es2015": "^6.24.1",

"babel-preset-stage-0": "^6.24.1",

"css-loader": "^3.4.0",

"html-webpack-plugin": "^3.2.0",

"style-loader": "^1.0.2",

"webpack": "^4.41.3",

"webpack-dev-server": "^3.10.0",

"webpack-merge": "^4.2.2"
},

"dependencies": {
"@babel/runtime": "^7.8.3",

"axios": "^0.19.0",

"bootstrap": "^4.4.1",

"core-js": "^3.6.0",

"cors": "^2.8.5",

"express": "^4.17.1",

"helmet-csp": "^2.9.4",

"jquery": "^1.12.4",

"mysql": "^2.17.1",

"popper.js": "^1.16.0",

"regenerator-runtime": "^0.13.3",

"serve-favicon": "^2.5.0",

"webpack-cli": "^3.3.10"
},

"engines": {
"node": "12.13.1",
"npm": "6.12.1"
}
}

The next bit I'm a bit unsure of when live as I have not got to test it yet, but it seems about right. This is a search class for the db calls.

import axios from 'axios';

"use strict";

export default class Router{
constructor(query){
   this.query = query;


}

async getResults(){

try{
const res = await axios(`https://stockapp.herokuapp.com/api/stockapi/${this.query}`);

this.result = res;

//console.log(this.result);

}catch(error){

    alert(error);

}
}

}

Finally here are my express settings. 

app.use(express.static(__dirname + '/dist'));

app.use(express.json());

app.use('/api/stockapi', apiRouter);

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {

console.log(`Server is running on port: ${PORT}`);

});

app.get('*', (req, res) => {


const index = path.join(__dirname, 'dist', 'index.html');

res.sendFile(index);

});

So once pushed to Heroku the index.html is served and looks OK, then when I make a call to the DB as soon as it wants to return regenerator runtime async it gives me this error. I have tried everything! Help me OB1 you're my only hope!!!

Answer 1

It transpires that I just needed to run a production build using npm run build.

I got this environment working now but for anyone using Heroku I think the single most important thing is to run 'heroku logs --tail' and check for errors. It is incredibly helpful for debugging!!