我正在尝试使用电子webpack用Atlaskit构建电子应用程序。
我已经设置了最小可能的存储库来复制问题:fstephany/bug-report-electron-webpack。
这是我的软件包:
{
"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"
}
}
和我的src/renderer/index.js
,它只是加载外部依赖性:
import { LayoutManager } from "@atlaskit/navigation-next";
let app = document.getElementById("app");
let layoutManager = LayoutManager;
console.log(app);
console.log(layoutManager);
当我使用$ yarn dev
运行该应用时。我从电子窗口中在Web控制台中遇到错误:
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
让我认为Babel移动中缺少某些东西。特别是当 @atlaskit/avaigation-next版本5.0.0的发行说明明确提及:
从所有流量模块中删除ES5
在所有@Atlaskit软件包中丢弃CJS支持
作为破坏的变化,所有@ATlaskit软件包都将删除CJS 分发,只会分发ESM。这意味着所有分布 代码将被转移,但仍将包含导入和导出 声明。
关于如何解决此问题的任何想法?我尝试了不同的babel配置,但我想绕圈...
我通过puttin在电子webpack的leleristedModule设置中使用Atlaskit依赖性来使其起作用。请参阅上下文的提交。
"electronWebpack": {
"whiteListedModules": ["@atlaskit/navigation-next"]
},