3

The Package

I have a shared library as Meteor package with the following structure:

ui
  - componentA.html
  - componentA.js
  - loader.js
  - ...
tools
  - toolXY.js
  - ...

and while tools are shared among many of my apps (and the ui), the ui part is only used by one app. Consider the template to be totally simple:

componentA.html

<template name="componentA">
  <span>yea component A</span>
</template>

componentA.js

import { Template } from 'meteor/templating'
import { toolXY } from '../tools/toolXY'
import './componentA.html'

// ... template code

loader.js (little helper, think the package has 100 ui components)

export const loader = {
  componentA: {
    template: 'componentA',
    load: async function () {
      return import('./componentA')
    }
  }
}

Because the ui is used in one app only, I made the templating and dynamic-import a weak dependency:

Package.onUse(function (api) {
  api.versionsFrom('1.6')
  api.use('ecmascript')
  api.use('dynamic-import', ['client'], { weak: true })
  api.use('templating', ['client'], { weak: true })
})

The Problem

I add my package and the weak dependencies to a project via

$ meteor add dynamic-import templating me:mypackage

and import the ui on the client like the following:

client/main.js

import { loader } from 'meteor/me:mypackage/ui/loader'

Meteor.startup(() => {
  loader.componentA.load()
    .then(() => console.log('loaded'))
    .catch(e => console.error(e))
})

It will result in the following error:

Error: "Cannot find module './componentA.html'"
    makeMissingError http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:232
    resolve http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:238
    moduleLink http://localhost:5050/packages/modules.js?hash=88e9e724ccc8459066fbe9e3889ef37c7bb7067f:353
    module /node_modules/meteor/me:mypackage/ui/componentA.js:16
    makeModuleFunction http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:138
    fileEvaluate http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346
    require http://localhost:5050/packages/modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248
    moduleLink http://localhost:5050/packages/modules.js?hash=88e9e724ccc8459066fbe9e3889ef37c7bb7067f:360
    getNamespace http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:187
    dynamicImport http://localhost:5050/packages/dynamic-import.js?hash=cf582bcc349503492678c9fd3f7bba4a610f70e5:40

Checking for Package.templating inside loader.js, as well as componentA.js resolves to Object { Template: Template(viewName, renderFunction) } (because it has been installed as package to the project).

The fix that isn't really a fix

If I turn off the weak dependency on templating it will work fine:

api.use('templating')

This, however, will cause all my applications to load templating, allthough they do not require it.

The question

Why is it behaving like this? Shouldn't this work with weak dependency when the dependency has been added to the project?

Jankapunkt
  • 8,128
  • 4
  • 30
  • 59
  • are you sure the difference in your non-solution is not the fact that you are now including templating on the server as well (rather than just the omission of the 'weak')? I would expect templating to be required on the server for the necessary files to be served. – Christian Fritz May 26 '20 at 22:06
  • Are these local or through a private package server? I suspect the issue is in the package compilation step, rather than during app runtime. Also, have you tried using deep imports for the component instead of the loader? `import 'meteor/me:mypackage/ui/componentA'` – coagmano May 27 '20 at 00:50

0 Answers0