Jankapunkt
Jankapunkt

Reputation: 8423

Meteor packages dynamic imports fail with templating as weak dependency

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?

Upvotes: 3

Views: 156

Answers (0)

Related Questions