# Dynamic load not allowed scenario

**URL:** <https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260>\
**Category:** Help Requests\
**Created:** [February 11, 2019, 10:49pm UTC](https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260 "2019-02-11T22:49:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![fratting](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fratting/32/1292_2.png) [@fratting](https://discourse.aurelia.io/u/fratting)\
**Post date:** [February 11, 2019, 10:49pm UTC](https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260/1 "2019-02-11T22:49:05Z")

</div>

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"
}

```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 12, 2019, 12:54am UTC](https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260/2 "2019-02-12T00:54:38Z")

</div>

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

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

```

To

```auto
import {PLATFORM} from 'aurelia-pal';

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

```

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 12, 2019, 2:21am UTC](https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260/3 "2019-02-12T02:21:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [February 12, 2019, 2:23am UTC](https://discourse.aurelia.io/t/dynamic-load-not-allowed-scenario/2260/4 "2019-02-12T02:23:46Z")

</div>

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

> <https://github.com/aurelia-contrib/aurelia-getting-started/blob/master/guides/how-to-use-cli-to-develop-plugin.md>