1

Having trouble with using Framework7 with Aurelia. in aurelia.json I have the following:

          {
        "name": "Framework7",
        "path": "../node_modules/framework7",
        "main": "dist/js/framework7",
        "exports": "Framework7"
      }

In F7.js I have this code:

import Framework7 from "framework7";

export const F7 = new Framework7();

I get this error: commonJs.convert: COULD NOT CONVERT:services/f7.js, so skipping it. Error was: Error: Line 1: Unexpected token

I'm trying to follow https://github.com/Jenselme/tests-ionic2-and-aurelia-framework7/blob/master/aurelia-f7-todo/app/services/f7.js and also trying to look at the docs at Aurelia

I've also tried with import statement like this:

import "framework7"
Sathees
  • 119
  • 6

2 Answers2

4

What about just loading Framework7 with a script tag? The Aurelia CLI uses RequireJS for module loading. I found this page that explains how to use Framework7 w/RequireJS and they use a script tag to load Framework7.

There's nothing wrong with using a script tag to load a legacy JS library that isn't module aware.

Additional comment:

Adding this script to the prepend section of vendor-bundle works as well. prepend section Proof Framework7 global is available

Ashley Grant
  • 10,879
  • 24
  • 36
  • Yeah I guess you are right... But I also tried another option.. adding it to the prepend array which gave the same error. I just hate going on without knowing why it doesn't work. – Sathees Oct 13 '16 at 21:12
  • I did the same thing as what is described here: https://medium.com/@russell.seamer/aurelia-cli-and-non-module-libraries-ac62c44bd6c2#.k3twjdpmc – Sathees Oct 13 '16 at 21:18
  • Does adding `"node_modules/framework7/dist/js/framework7.js",` to your `prepend` section of `vendor-bundle.js` work? It works for me. – Ashley Grant Oct 13 '16 at 21:22
  • No getting error on F7.js file. that file looks like this now: export const F7 = new Framework7(); Maybe I should try to start again with a blank project – Sathees Oct 13 '16 at 21:26
  • Check the updates to my answer above. I've installed F7 via npm and then am loading it from the prepend section. I have not modified the f7 js file. – Ashley Grant Oct 13 '16 at 21:31
  • nvm,. I imported the filename as "f7" when I named it "F7" . My mistake – Sathees Oct 13 '16 at 21:31
  • btw, I'm looking in to loading this as a module. – Ashley Grant Oct 13 '16 at 21:31
  • After looking at it, I think you're best off loading this using script tags/link tags for css. It's a legacy library that isn't module aware, so just load it outside the loader. There's nothing wrong with this. The official Intermediate Aurelia training course has a section where we do this exact type of thing. – Ashley Grant Oct 13 '16 at 21:36
  • After I fixed my error that I mentioned in the earlier comment it works it looks like. The prepend method works it looks like. Since it works it should be as good as including it in script tag? – Sathees Oct 13 '16 at 21:44
  • 1
    Yeah, but you still have to worry about loading the CSS. If I were doing this in my own project using the Aurelia CLI, I would just load the script via a script tag and the CSS w/a link tag. I wouldn't use NPM to manage Framework7, I'd put all of it's files in a folder at the root. Something like `components\Framework7` or something. Or I would look at using Webpack if bundling everything and managing deps via NPM were absolutely required. Googling Aurelia Framework7 looks like it has some good stuff, as well. – Ashley Grant Oct 13 '16 at 21:50
1

Framework7 contains many resources like css and images which Aurelia can't process. You must manually bundle it.

Example with font-awesome library: How can I add Font Awesome to my Aurelia project using npm?

Community
  • 1
  • 1
JayDi
  • 1,037
  • 15
  • 24