`require` es6 modules in actions bundled with Parcel does not work

[moritzraho]

Relates to https://github.com/parcel-bundler/parcel/issues/2581

Steps to Reproduce

1. npm install node-fetch
2. replace content actions/hello/index.js with

   const fetch = require('node-fetch')
   async function main (args) {
   try {
   const content = await fetch('https://jsonplaceholder.typicode.com/todos/1')
   return {
     body: await content.json()
   }
   } catch (e) {
   console.error(e)
   return {
     body: e.message
   }
   }
   }
   exports.main = main

3. (optional) In scripts/build.actions.js replace minify: true, with minify:false,
4. npm run build:actions && npm run deploy:actions
5. click on the action url you should see fetch is not a function

Note 1: node-fetch is exported as an es6 module Note 2: The same action works fine if deployed as a zip action

Workaround

In the action replace const fetch = require('node-fetch') with const fetch = require('node-fetch').default

[icaraps]

@moritzraho does Webpack have the same issue ? Maybe we can replace Parcel by Webpack for the starter since it's more popular ?

[moritzraho]

@icaraps thanks for your suggestion. Not sure if it works with webpack we need to try this out. I guess that this issue will be solved in parcel eventually. Also before switching we should do some more comparisons on build time and build size.

[devongovett]

I believe webpack would do the same thing unless you changed the mainFields config option to remove module entirely. module takes precedence over main, and therefore .default is necessary if you're using a require. I'd recommend using ES module syntax over require though.

See https://webpack.js.org/configuration/resolve/#resolvemainfields