Parcel: electron's window.loadURL('file://[path to file]'); works in dev, but not production

[mateodelnorte]

🐛 bug report

It seems parcel is not correctly mapping resource locations when loading from a file.

Instead of mapping to my ./build folder, images and resources other than my index.html are being mapped directly to / root.

🎛 Configuration (.babelrc, package.json, cli command)

relevant package.json

  "main": "main.js",
  "build": {
    "appId": "agent-ui",
    "files": [
      "main.js",
      "build/*"
    ]
  },
  "scripts": {
    "dev": "npm-run-all -p dev:*",
    "dev:build": "cross-env NODE_ENV=development parcel ./src/index.html -d build/",
    "dev:start": "URL_LAUNCHER_URL=http://localhost:1234 NODE_ENV=development electron .",
    "prod": "npm-run-all -p prod:*",
    "prod:build": "cross-env NODE_ENV=production parcel build ./src/index.html -d build/ --public-url ./ --target=node --target=electron",
    "prod:start": "NODE_ENV=production startx ./node_modules/electron/dist/electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "./support/electron-builder-install-app-deps"
  },

.babelrc

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-decorators-legacy",
    [
      "module-resolver",
      {
        "alias": {
          "app": "./"
        }
      }
    ]
  ]
}

🤔 Expected Behavior

I'd expect the app to appear the same in both dev mode, when loading from a url, as in production when loading from file. This would mean that in production mode, asset locations are mapped to the build folder.

😯 Current Behavior

Re-written resource locations are not mapping to build folder.

🔦 Context

I'm using parcel + react + redux + electron + react-router-redux for routing.

latest versions of all.

[mischnic]

Please test it with --target electron instead of --target=node --target=electron.

[mateodelnorte]

Still gives me incorrectly mapped assets:

Note, that setting the --public-url from ./ to ./build also does not work. For ./, the above asset gets mapped to file:///src.796abcfa.js. With ./build, the above asset gets mapped to file:///Users/matt/development/path-to-my-repo/app/build/build/src.796abcfa.js

[DeMoorJasper]

cross-env NODE_ENV=production parcel build ./src/index.html -d build/ --public-url ./ --target=electron === parcel build ./src/index.html --target=electron

cross-env NODE_ENV=production Is not required as parcel already sets production env by default
--public-url ./ is not required as / is the default public-url

If this is not the case plz update to 1.7

At first sight the mappings seem as requested though

[mateodelnorte]

Made the above changes and upgraded to 1.7. No dice.

"prod:build": "parcel build ./src/index.html --target electron",

path is file:///src.796abcfa.js

[DeMoorJasper]

@mateodelnorte It shouldn't have changed anything, just wanted to make the command smaller and more readable.

Perhaps try with --public-url ., not sure if parcel supports returning absolute system paths though

[mateodelnorte]

Tried that before as well. . and ./ both work the same.

[mateodelnorte]

FYI, the default build path is dist, not build.

[mateodelnorte]

So, with default options, I get a file not found on the main js file my index.html is including:
Failed to load resource: net::ERR_FILE_NOT_FOUND src.796abcfa.js. As such, nothing loads.

If I specify -d dist --public-url ./, then my main js file gets found but all other assets are incorrectly mapped. The main js file ends up at file:///Users/matt/development/path-to-my-repo/app/dist/src.796abcfa.js (correct). But the first image I've referenced from within my react app is incorrectly mapped to file:///logo-color.0069dd03.png (incorrect).

[Hammster]

Setting public-url should be enough to get your electron app running with the correct path. For me for example xlink:href="symbols.234ffd.svg" properly resolves to:

production: %electronbuild%/resources/app.asar/symbols.234ffd.svg
development: dist/symbols.234ffd.svg

How did you defined your pathname on the electron window creation ?

[lvlirko]

Same problem here with v1.10.3 - found this thread via google. Sorry it's old bug maybe, I know.
But solution for me -> add base in html head :
<base href="./" />

[elrumordelaluz]

Same here.

<base href="./" />

Do the trick, using CRA.

[mischnic]

So if the current output is <script src="src.238132e.js"></script>, what is the expected output?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[dkun9039]

aren't there anybody who solved it? :(
I'm in this situation, too.....