Importing tag files from other npm modules

[pablowatson]

Hi,

I am creating a somewhat large project that is made up of a number of packages. I want to require a set of tag files from some of the dependencies and use them in the main package.

e.g.

main - Requires test1 and test2
package.json etc.
test1
package.json etc.
test2
package.json etc.

I saw that in order to compile the tags from the required packages you have to set the global option to true (in issue #25). I did this and everything compiles and bundles fine. I can the reference to the compiled tag in the bundled JS. e.g.

var riot = require('riot');
module.exports = riot.tag2('test', '<div>WHATEVER</div>', '', '', function(opts) {
});

},{"riot":557}],581:[function(require,module,exports){

When I look at all this in the browser, the tag never seems work. If I look at the generated HTML the tag is completely empty.

Is there something obvious that I am doing wrong?

Many thanks,
Paul

[pablowatson]

I should add that tag files within the 'main' project work perfectly.

[pablowatson]

I think I can shed some more light on this issue.

If I look at the bundled JS the output of the code for the tags varies slight depending on which node project they were from.

Below is the compiled tag for a tag that is from the main project.

[function(require,module,exports){
var riot = require('riot');
module.exports = riot.tag2('test2', '<div>TEST2</div>', '', '', function(opts) {
});

},{"riot":1541}]

The code below is the compiled tag from one of the tags that is in one of the dependency projects.

[function(require,module,exports){
var riot = require('riot');
module.exports = riot.tag2('test3', '<div>TEST3</div>', '', '', function(opts) {
});

},{"riot":557}]

As you can see the reference numbers for the riot instances are different. I guess that the tags are getting registered with different riot instances only one of which is actually active in the application.

I changed the reference number of the test3 tag in the bundled code from 557 to 1541 and everything works.

So the question is how do I ensure I have the same instance of riot across the different projects?

Thanks,
Paul

[GianlucaGuarini]

You can simply use something like:

const browserify = require('browserify')
const b = browserify({
  insertGlobalVars: {
    riot: function() {
      return "require('riot')"
    }
  }
})
b.transform(require('riotify'), {global: true})

this code should do the trick keeping the riot reference globally

[pablowatson]

Hi there,

Thanks for the help with this.

To try this out, I have the main project that contains a set of tag and another project (charts-common) that main project depends on that also contains some tags. Both have riot dependencies defined in their respective package.json files.

I took the suggested browserify script that you provided, modified slightly and ran it to generate the bundle. The browserify script looks like this.

const browserify = require('browserify');
const riotify = require('riotify');

const b = browserify('./index.js',{
  insertGlobalVars: {
    riot: function() {
      return "require('riot')";
    },
  },
});

b.transform(riotify, { global: true });
b.bundle().pipe(process.stdout);

It outputs the bundle, but I have exactly the same problem. The compiled tag is in the bundle, but does not appear to be registered with the right instance of riot.

I tried removing the dependency on riot from the charts-common project, but then I get the following error on trying to run the browserify build script.

events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: Cannot find module 'riot' from 'C:\glysade\software\javascript\chartsjs\charts-common\src\tag'
    at C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:46:17
    at process (C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:173:43)
    at ondir (C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:188:17)
    at load (C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:69:43)
    at onex (C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:92:31)
    at C:\glysade\software\javascript\chartsjs\ldp\node_modules\browser-resolve\node_modules\resolve\lib\async.js:22:47
    at FSReqWrap.oncomplete (fs.js:152:21)

Any ideas?

Thanks again for your help with this.

[GianlucaGuarini]

could you please create a demo repository? I will try to help you on that

[pablowatson]

Hi,

I create a demo repository that highlights the issue. You can find it here (https://github.com/pablowatson/riotify_demo). Let me know if there is anything else I can do.

Thanks,
Paul

[GianlucaGuarini]

@pablowatson thanks for your demo, I was able to find the issue. Browserify gets confused by your local dependencies definition (that is a symlink to your original folder) if you move the dep folder manually in your node_modules everything works fine. I was able to do a similar test using riot-mui installed via npm and everything worked as expected. It's not a riotify bug nor a riot one but thanks anyways for asking. Good luck

[pablowatson]

Hi,

Thanks for looking in to this. I moved the dep module in the the node_modules directory and it did not work properly until I removed the riot dependency from the dep module. After this everything works as expected.

I might try to bother the browserify folks with this to get this resolved. Given that node is meant to supposed to support local dependencies, I feel like browserify should too.

Thanks again,
Paul

[GianlucaGuarini]

I have debugged the project and browserify requires 2 versions of riot even if it's clearly required only once. If you have found a bug it's definitely in browserify. I was able to set up a fresh project loading nested riot dependencies without particular issues though.