Problem creating a package with templates

help
1

I am trying to create a package for Meteor, unsuccessfully unfortunately. I’m on Meteor 1.8.1. My goal is to make a template for a button that I can use in my application like this {{> testButton}} (I am just trying it out atm).

package.js

Package.describe({
	name: 'button-test',
	version: '0.0.1',
	summary: '',
	git: '',
	documentation: 'README.md'
});

Package.onUse(function (api) {
	api.use(['ecmascript']);
	api.use(['session', 'templating'], ['client', 'server']);
	api.mainModule('button-test.js');
});

Package.onTest(function (api) {
	api.use('ecmascript');
	api.use('tinytest');
	api.use('button-test');
	api.mainModule('button-test-tests.js');
});

button-test.js

// Variables exported by this module can be imported by other packages and
// applications. See button-test-tests.js for an example of importing.
import './testButton.js';

testButton.js

import { Template } from 'meteor/templating';

  Template.testButton.events({
	'click #buttonT': () =>
		console.log('Clicked the button')
 });

testButton.html

<template name="testButton"><button id="buttonT">TEST</button></template>

I have some problems with this;

  • Running the code like this returns the error TypeError: Cannot read property 'testButton' of undefined. So there is a problem with Template, but I don’t know what it is, since I have added it with api.use
  • When I try to add import ./testButton.html to testButton.js I get the error Error: Cannot find module './testButton.html'

I looked at the source code for accounts-ui-unstyled, but this is written on an older meteor version.

Does anybody have an idea as to what I am doing wrong?

2

The problem was with the api.mainModule, I solved it by having my Package.onUse like this:

Package.onUse(function (api) {
	api.use(['templating', 'blaze'], 'client');
	api.use('ecmascript');
	api.addFiles(['button-test.js'], 'client');
});

After using the addFiles instead of mainModule, I could import the html and the Template problem disappeared. I have no idea why this works and mainModule does not, but hey, it does.

3

Both of these issues is because templating is a noop on the server.
When it tries to run your code on the server, it finds Template is undefined, and html files aren’t compiled for the server, so they are just missing.

It looks like when you changed to api.addFiles, you also added the 'client' scope to your code.
api.mainModule will work fine with the client scope as well, for the same reason that it now works with addFiles

2 Likes