Aurelia bootstrapper error, No PLATFORM.Loader is defined

Help Requests
1

Hello,

I’m trying to use aurelia with webpack but in my browser, I’m getting the following error:

Uncaught (in promise) No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.

In my package.json I’m using
"aurelia-webpack-plugin": “^2.0.0-rc.5”,
“aurelia-bootstrapper”: “2.1.1”

Are there any known workarounds for this issue? This will happen if I use bluebird or not and seems to stem from the aurelia boostrapper.

Any tips of suggestion would be greatly appreciated!

2

Are you using aurelia-cli? If no, try using cli to bootstrap a customized webpack app.

3

Thank you for the response and suggestion. I’m converting an existing production application that’s using jspm and system js.

4

I’ve narrowed this specific No PLATOFORM.Loader is defined error to the aurelia-pal dependency that was previously in my jspm dependencies.

Removing it however I’m getting a new error:
__WEBPACK_IMPORTED_MODULE_0_aurelia_pal__.DOM.injectStyles is not a function

5

It sounds like you are still using a very old version of aurelia-pal before webpack support was added.

Can you try:

  1. remove node_modules folder, delete file package-lock.json (or yarn.lock).
  2. upgrade all versions in your package.json to latest with ncu.
    • npm i -g npm-check-updates
    • ncu -au
  3. then npm install (or yarn).

You should be good to go.

2 Likes
6

@austinh thank you, this solved the original error that I was seeing!

I’m still working through why I can’t get the app become attached if I used <router-view></router-view>. Definitely very close now though, thank you again.

7

I have the same problem but for me unfortunately reinstalling node_modules didn’t help :frowning:

8

@klinki I actually had to do a couple of things in my application:

  1. Simplify aurelia dependencies as much as possible . For example, I only have these in my dependencies section of package.json:
    "aurelia-bootstrapper": "2.2.0", "aurelia-configuration": "2.0.0", "aurelia-framework": "1.1.5", "aurelia-logging-console": "1.0.0", "aurelia-router": "1.5.0",
  2. Run the steps @austinh prescribed
  3. Update compose elements to have the following syntax:

Previous:
<compose containerless model.bind="component" view-model="src/components/${component.componentName}/${component.componentName}.js"> </compose>

Updated:
<compose containerless repeat.for="component of components" model.bind="component" view-model="./components/${component.componentName}/${component.componentName}"> </compose>