How can I get serverless-webpack to work with babel.v8 to solve - Error: Plugin/Preset files are not allowed to export objects, only functions?

Question

What went wrong?

Babel Migration from 7.x to 8.x Node Migration from 8.x to 10.x

What was the config you used?

Changed targets in .babelrc from 8.10 to 10.14.1 Changed runtime in serverless.yml from 8.10 to runtime: nodejs10.14.1

What stacktrace or error message from your provider did you see?

ERROR in ./getCaseRecord.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-preset-stage-3/lib/index.js
    at createDescriptor (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at buildRootChain (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/config-chain.js:120:22)
    at loadPrivatePartialConfig (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/partial.js:85:55)
    at Object.loadPartialConfig (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/@babel/core/lib/config/partial.js:110:18)
    at Object.<anonymous> (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:144:26)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:3:103)
    at _next (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:5:194)
    at /Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:5:364
    at new Promise (<anonymous>)
    at Object.<anonymous> (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:5:97)
    at Object._loader (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:224:18)
    at Object.loader (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:60:18)
    at Object.<anonymous> (/Users/MyDocs/DevOps/QuickAutoTags/services/v2.crm-case-record-api/node_modules/babel-loader/lib/index.js:55:12)

Here is what is in my .babelrc file:

{
    "plugins": [],
    "presets": [
        ["env", {"node": "10.14.1"}],
        "stage-3"
    ]
}

Here are my dependencies in my package.json:

"devDependencies": {
    "aws-sdk": "^2.350.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.6",
    "babel-plugin-source-map-support": "^2.0.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "eslint": "^5.15.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^9.1.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-standard": "^4.0.0",
    "jest": "^24.8.0",
    "serverless-offline": "^5.0.0",
    "serverless-webpack": "^5.1.0",
    "webpack": "^4.16.2",
    "webpack-node-externals": "^1.6.0"
  },

What do you think? I really want to stay current and use the most recent version of babel if at all possible. Does anyone know if serverless-webpack supports babel.v8 yet??

If so, how can I get them to work together considering the above info?

Thanks!

Answer 1

Just in case it helps, the only way I could get it to work was to comment out babel-loader as such:

module: {
    rules: [
      {
        test: /\.js$/,
        // TODO: This was the fix to sls deploy
        // loader: "babel-loader",
        include: __dirname,
        exclude: /node_modules/
      }
    ]
  }

Not sure if this is the best work-around but it helped me solve the current issue I was working on.