I'm building an Electron app with Parcel, using Babel 7. Basically a modified version of this tutorial.
I'm using a basic .babelrc:
{ "presets": [
["@babel/env", {
"targets": { "node": 7 },
"useBuiltIns": true
}],
"@babel/react"
],
"plugins": ["dynamic-import-node"]
}
This is my package.json
{
"name": "appName",
"productName": "App Name",
"version": "3.0.0",
"license": "MIT",
"scripts": {
"react-start": "parcel -p 3000 app.html --out-dir build",
"react-build": "parcel build app.html --out-dir build --public-url ./",
"clean-build": "rm -rf build/ .cache dist/",
"build": "yarn clean-build && yarn react-build",
"start": "concurrently \"cross-env NODE_ENV=development yarn react-start\" \"wait-on http://localhost:3000 && electron . \""
},
"main": "./src/main.js",
"browserslist": "electron 1.6",
"build": {
"productName": "AppName",
"appId": "org.company.AppName",
"files": [
"node_modules/",
"app.html",
"main.js",
"package.json"
],
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"mac": {
"target": "dmg",
"icon": "build/icon.ico"
},
"win": {
"target": "nsis",
"icon": "build/icon.ico"
},
"linux": {
"target": [
"deb",
"AppImage"
],
"icon": "build/icon.ico",
"category": "Development"
},
"directories": {
"buildResources": "resources",
"output": "release"
}
},
"dependencies": {
"@babel/polyfill": "^7.4.4",
"@react/react-spectrum": "^2.22.0",
"babel-plugin-dynamic-import-node": "^2.3.0",
"electron-devtools-installer": "^2.2.4",
"electron-store": "^4.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-redux": "^7.1.0",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.2",
"babel-plugin-dynamic-import-node-babel-7": "^2.0.7",
"concurrently": "^4.1.1",
"cross-env": "^5.2.0",
"electron": "^6.0.0",
"electron-is-dev": "^1.1.0",
"electron-log": "^3.0.7",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-compat": "^3.3.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.6.1",
"parcel-bundler": "^1.12.3",
"wait-on": "^3.3.0"
}
}
When I run just the React (react-build and react-start), I get 0 compile problems and a happy app in the browser, when I run the Electron (build and start) I get the following from my main.js file.
import path from 'path';
^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:722:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
at Module.load (internal/modules/cjs/loader.js:645:32)
at Function.Module._load (internal/modules/cjs/loader.js:560:12)
at loadApplicationPackage (/Users/lipton/symposium/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:109:16)
at Object.<anonymous> (/Users/lipton/symposium/node_modules/electron/dist/Electron.app/Contents/Resources/default_app.asar/main.js:155:9)
at Module._compile (internal/modules/cjs/loader.js:786:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
at Module.load (internal/modules/cjs/loader.js:645:32)
at Function.Module._load (internal/modules/cjs/loader.js:560:12)
I've tried switching between @babel/preset-env and @babel/env (doesn't seem to matter).
I've tried tracking down the existing issue either in electron docs, or parcel docs, or babel docs. I'm stumped.
UPDATE: Tried clearing out node_modules and reinstalling. Error is in my renderer where I'm using ES6 import. If I switch just the renderer to ES5 imports, it works.
