search

jarek-foksa / xel

Xel - Widget toolkit for building native-like Electron and Web apps
https://xel-toolkit.org
Other
682 stars 59 forks source link

SyntxError: #24

Closed sandor closed 7 years ago

sandor commented 7 years ago

I am getting an Uncaught SyntaxError in devtools while launching my Electron project with Xel installed:

missing ) after argument list xel.min.html:1

Help is appreciated – would like to test out Xel...

jarek-foksa commented 7 years ago

  1. Does the file node_modules/xel/xel.min.html actually exist? If you installed Xel directly from the GitHub repo rather than NPM then you should run ./project build in order to generate that file.

  2. Are you sure you are importing Xel using exactly the following code? <link rel="import" href="node_modules/xel/xel.min.html">

sandor commented 7 years ago

Hey jarek,

  1. I am using the ElectronPhotonStarter project from GitHub, since I would also like to use the Header/Footer/Pane-Group from Photon

  2. I have done a "npm install xel" inside my project folder in terminal

  3. apparently I have got xel installed, since the xel directory is installed in node_modules – including xel.min.html

  4. in my index.html I am declaring this in the head section:

<head>
    <title>Photon</title>

    <!-- Xel Imports -->
    <link rel="import" href="node_modules/xel/xel.min.html">
    <link rel="stylesheet" href="node_modules/xel/stylesheets/macos.theme.css">

    <link rel="stylesheet" href="./css/photon.min.css">

    <!-- Javascript -->
    <script src="./js/menu.js" charset="utf-8"></script>
</head>

  1. even if I throw out the Photon css, I am getting the same error after running the photon project wit "npm start"

  2. aree you having a clean electron project with xel only that I could use instead? Or a quick advise?

Thanks

EDIT: this is the project I am using now – https://github.com/cwoodruff/electron-photon-demo

jarek-foksa commented 7 years ago

I'm attaching below the smallest possible Electron demo app that uses Xel. Does it work for you? (Don't forget to run npm install in app dir).

xel-electron-demo.zip

screenshot

sandor commented 7 years ago

Thanks Jarek,

  1. running "npm install xel" in the project folder returns errors in terminal
  2. running "electron ." will start the project in electron but again with that error

See both screenshots:

1 2

jarek-foksa commented 7 years ago
  1. running "npm install xel" in the project folder returns errors in terminal

Those are not errors, just warnings about missing fields in package.json file (which are not really needed by the demo).

  1. running "electron ." will start the project in electron but again with that error

What version of Electron and macOS are you using? The demo app works fine for me with Electron 1.7.1 (MAS) and macOS 10.12.4

sandor commented 7 years ago

regarding the electron version see the screenshot (sorry for my ignorance, but I don't know how to get the version number via terminal)... sorry again fro the newbish things here...

My OSX is 10.11.5 3

sandor commented 7 years ago

Sorry Mate! Have installed electron again globally "npm install -g electron". Not it seems to be running fine ;-) I think it was simply an old electron version I was using ... THANKS again!

sandor commented 7 years ago

BTW: are you planning something like the Head/Footer/Pane-Group like in Photon?

jarek-foksa commented 7 years ago

Electron 1.1.x is based on Chrome 50 which is rather old, I didn't even bother testing Xel with it. Please make sure you have installed at least Electron version 1.6.x which is based on Chrome 56.

jarek-foksa commented 7 years ago

BTW: are you planning something like the Head/Footer/Pane-Group like in Photon?

I'm not sure yet, I'm planning to keep adding new elements gradually as I develop new apps that need them.