Using a dependency with an 'export' statem

Question

I'm trying to use electron-webpack to build an electron app with atlaskit.

I've setup the smallest possible repo to reproduce the issue: fstephany/bug-report-electron-webpack.

Here's my package.json:

{
  "name": "electron-webpack-quick-start",
  "version": "0.0.0",
  "license": "MIT",
  "esm": "auto",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
  },
  "dependencies": {
    "source-map-support": "^0.5.12",
    "esm": "^3.2.25",
    "@atlaskit/navigation-next": "6.3.0"
  },
  "devDependencies": {
    "electron": "5.0.4",
    "electron-builder": "^20.44.4",
    "electron-webpack": "^2.7.1",
    "webpack": "~4.35.0"
  } 
}

And my src/renderer/index.js which simply loads the external dependency:

import { LayoutManager } from "@atlaskit/navigation-next";

let app = document.getElementById("app");
let layoutManager = LayoutManager;
console.log(app);
console.log(layoutManager);

When I run the app with $ yarn dev. I get an error in the web console from the Electron window:

Uncaught /home/fstephany/Code/Play/new-electron-webpack-project/node_modules/@atlaskit/navigation-next/index.js:2
export { default as ContainerHeader } from './components/presentational/ContainerHeader';
^^^^^^

SyntaxError: Unexpected token export
    at new Script (vm.js:85:7)
    at createScript (vm.js:266:10)
    at Object.runInThisContext (vm.js:314:10)
    at Module._compile (internal/modules/cjs/loader.js:742:26)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:820:10)
    at Module.load (internal/modules/cjs/loader.js:677:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:609:12)
    at Function.Module._load (internal/modules/cjs/loader.js:601:3)
    at Module.require (internal/modules/cjs/loader.js:715:19)
    at require (internal/modules/cjs/helpers.js:14:16)

SyntaxError: Unexpected token export makes me think that something is missing from the Babel transpiling. Especially when the release note of @atlaskit/navigation-next version 5.0.0 explicitly mentions:

Drop ES5 from all the flow modules

Dropping CJS support in all @atlaskit packages

As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only distribute esm. This means all distributed code will be transpiled, but will still contain import and export declarations.

Any idea on how to fix this? I've tried different babel config but I feel like turning in circle...

Answer 1

I made it work by puttin the atlaskit dependency in the whilelistedmodule settings of electron-webpack. See the commit for context.

"electronWebpack": {
  "whiteListedModules": ["@atlaskit/navigation-next"]
},