Dynamic load not allowed scenario

I’m using aurelia cli. I have some components (view and view model) that were in my project that I registered with globalResources like so:

aurelia.use.globalResources([
        'resources/framework/datatable/datatable',
        'resources/framework/employeeSearch/employeeSearch',
        'resources/framework/geoHierarchy/geoHierarchy',
        'resources/framework/multiselect/multiselect',
        'resources/framework/pagination/pagination',
        'resources/framework/spinner/spinner',
        'resources/framework/toggle/toggle',
        'resources/value-converters/dateValueConverter',
        'resources/value-converters/phoneValueConverter'
    ]);

This works fine and I have it registered as an aurelia feature.

Now I want to move these into an npm package, publish, and install into the project. Which I did.
When I do that and point to that copy (which ultimately is now part of the vendor bundle and not the app bundle) I get the “Dynamic load not allowed” error with the loader. I’m using requireJs.

Uncaught Error: Dynamic load not allowed: @myNamespace/framework/datatable/datatable.html
at Object.load (text.js:1)
at Module. (require.js:1095)
at require.js:134
at on (require.js:517)
at Module.callPlugin (require.js:955)
at Module.fetch (require.js:824)
at Module.check (require.js:856)
at Module.enable (require.js:1176)
at Module. (require.js:999)
at require.js:134
at require.js:1189
at each (require.js:59)
at Module.emit (require.js:1188)
at Module.check (require.js:938)
at Module.enable (require.js:1176)
at Object.enable (require.js:1557)

I made sure to update my “source” property in the transpiler to enable the decorator injection syntax and I have the “text” module as part of the vendor bundle and the loader setup to use the text plugin.
Any assistance would be appreciated. Below are my aurelia.json settings

{
    "name": "application",
    "type": "project:application",
    "bundler": {
        "id": "cli",
        "displayName": "Aurelia-CLI"
    },
    "httpProtocol": {
        "id": "http1",
        "displayName": "HTTP/1.1"
    },
    "build": {
        "targets": [{
            "id": "web",
            "displayName": "Web",
            "port": 9000,
            "index": "index.html",
            "baseDir": ".",
            "output": "scripts"
        }],
        "options": {
            "minify": "stage & prod",
            "sourcemaps": "dev & stage",
            "rev": false,
            "cache": "dev & stage"
        },
        "bundles": [{
                "name": "app-bundle.js",
                "source": [
                    "**/*.{js,json,css,html}"
                ]
            },
            {
                "name": "vendor-bundle.js",
                "prepend": [
                    "node_modules/bluebird/js/browser/bluebird.core.js",
                    {
                        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird-no-long-stacktraces.js",
                        "env": "stage & prod"
                    },
                    {
                        "path": "node_modules/aurelia-cli/lib/resources/scripts/configure-bluebird.js",
                        "env": "dev"
                    },
                    "node_modules/@babel/polyfill/browser.js",
                    "node_modules/requirejs/require.js"
                ],
                "dependencies": [
                    "jquery",
                    {
                        "name": "bootstrap",
                        "path": "../node_modules/bootstrap/dist",
                        "main": "js/bootstrap.min",
                        "deps": ["jquery"]
                    },
                    {
                        "name": "bootstrap-multiselect",
                        "path": "../node_modules/bootstrap-multiselect/dist",
                        "main": "js/bootstrap-multiselect",
                        "deps": ["jquery"],
                        "resources": [
                            "css/bootstrap-multiselect.css"
                        ]
                    },
                    "aurelia-bootstrapper",
                    "aurelia-loader-default",
                    "aurelia-pal-browser",
                    {
                        "name": "aurelia-testing",
                        "env": "dev"
                    },
                    {
                        "name": "text",
                        "path": "../lib/text",
                        "main": "text"
                    },
                    "extend",
                    "aurelia-notification",
                    {
                        "name": "humane-js",
                        "path": "../node_modules/humane-js",
                        "main": "humane",
                        "resources": [
                            "themes/libnotify.css"
                        ]
                    },
                    {
                        "name": "aurelia-plugins-cookies",
                        "path": "../node_modules/aurelia-plugins-cookies/dist/amd",
                        "main": "aurelia-plugins-cookies"
                    },
                    "moment",
                    {
                        "name": "eonasdan-bootstrap-datetimepicker",
                        "path": "../node_modules/eonasdan-bootstrap-datetimepicker/build",
                        "main": "js/bootstrap-datetimepicker.min",
                        "resources": [
                            "css/bootstrap-datetimepicker.min.css"
                        ]
                    },
                    {
                        "name": "aurelia-bootstrap-datetimepicker",
                        "path": "../node_modules/aurelia-bootstrap-datetimepicker/dist/amd",
                        "main": "index",
                        "resources": [
                            "**/*.{css,html}"
                        ]
                    }
                ]
            }
        ],
        "copyFiles": {
            "node_modules/@fortawesome/fontawesome-free/webfonts/*": "@fortawesome/fontawesome-free/webfonts"
        },
        "loader": {
            "type": "require",
            "configTarget": "vendor-bundle.js",
            "includeBundleMetadataInConfig": "auto",
            "plugins": [{
                "name": "text",
                "extensions": [
                    ".html",
                    ".css"
                ],
                "stub": true
            }]
        }
    },
    "platform": {
        "id": "web",
        "displayName": "Web",
        "port": 9000,
        "index": "index.html",
        "baseDir": ".",
        "output": "scripts"
    },
    "transpiler": {
        "id": "babel",
        "displayName": "Babel",
        "fileExtension": ".js",
        "options": {
            "plugins": [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose": true }],
                [
                    "@babel/plugin-transform-modules-amd",
                    {
                        "loose": true
                    }
                ]
            ]
        },
        "source": [
            "node_modules/@myNamespace/framework/**/*.js",
            "src/**/*.js"
        ]
    },
    "markupProcessor": {
        "id": "none",
        "displayName": "None",
        "fileExtension": ".html",
        "source": "src/**/*.html"
    },
    "cssProcessor": {
        "id": "none",
        "displayName": "None",
        "fileExtension": ".css",
        "source": "src/**/*.css"
    },
    "jsonProcessor": {
        "id": "none",
        "displayName": "None",
        "fileExtension": ".json",
        "source": "src/**/*.json"
    },
    "editor": {
        "id": "none",
        "displayName": "None"
    },
    "unitTestRunners": [{
        "id": "none",
        "displayName": "None"
    }],
    "integrationTestRunner": {
        "id": "none",
        "displayName": "None"
    },
    "paths": {
        "root": "src",
        "resources": "resources",
        "elements": "resources/elements",
        "attributes": "resources/attributes",
        "valueConverters": "resources/value-converters",
        "bindingBehaviors": "resources/binding-behaviors"
    },
    "packageManager": "npm"
}

When publishing aurelia plugin,

  1. you have to use relative path ./resources/..., because those resources are not from your src folder any more.
  2. use PLATFORM.moduleName() to wrap the resource name, so your plugin can work with app in not only cli bundler, but also in webpack.

change

config.globalResources([
  'resources/framework/datatable/datatable',
  ...

To

import {PLATFORM} from 'aurelia-pal';

config.globalResources([
  PLATFORM.moduleName('./resources/framework/datatable/datatable'),
  ...
1 Like

Sorry, I misunderstood.

You did not publish an aurelia plugin (which is recommended for reusing components).

When you publish your @myNamespace/framework, if you publish transpiled js files (not original ESnext source code), then you don’t need do anything special in aurelia.json.

Make sure you upgrade aurelia-cli to latest version. From your aurelia.json, I see you probably are running an old version of cli.

1 Like

If you want to do the proper solution, which is to build an aurelia plugin, you can follow this guide.

1 Like