Unable to bundle theme using CLI bundler

Help Requests
1

We are using the Pixeladmin bootstrap theme. Using aurelia-cli 0.35.1 au build used to work. Since upgrading to aurelia-cli v2.0.3 including the theme does not work as the bundler cannot find the package metadata despite the packages not being node modules.

aurelia.json

{
    "name": "au-test",
    "type": "project:application",
    "paths": {
        "root": "src",
        "resources": "resources",
        "elements": "resources/elements",
        "attributes": "resources/attributes",
        "valueConverters": "resources/value-converters",
        "bindingBehaviors": "resources/binding-behaviors"
    },
    "transpiler": {
        "id": "babel",
        "fileExtension": ".js",
        "options": {
            "plugins": [
                [
                    "@babel/plugin-transform-modules-amd",
                    {
                        "loose": true
                    }
                ]
            ]
        },
        "source": ["src/**/*.js"]
    },
    "markupProcessor": {
        "source": ["src/**/*.html"]
    },
    "cssProcessor": {
        "source": ["src/**/*.css"]
    },
    "jsonProcessor": {
        "source": ["src/**/*.json"]
    },
    "platform": {
        "port": 9000,
        "host": "localhost",
        "open": false,
        "index": "index.html",
        "baseDir": ".",
        "output": "scripts"
    },
    "build": {
        "targets": [
            {
                "port": 9000,
                "index": "index.html",
                "baseDir": ".",
                "output": "scripts"
            }
        ],
        "options": {
            "minify": "stage & prod",
            "sourcemaps": "dev & stage",
            "rev": "prod",
            "cache": "dev & stage"
        },
        "bundles": [
            {
                "name": "app-bundle.js",
                "source": ["**/*"]
            },
            {
                "name": "vendor-bundle.js",
                "prepend": [
                    "node_modules/regenerator-runtime/runtime.js",
                    "node_modules/promise-polyfill/dist/polyfill.min.js",
                    "node_modules/requirejs/require.js"
                ],
                "dependencies": [
                    "aurelia-bootstrapper",
                    "aurelia-loader-default",
                    "aurelia-pal-browser",
                    {
                        "name": "aurelia-testing",
                        "env": "dev"
                    },
                    "text",
                    "jquery",
                    {
                        "name": "moment",
                        "path": "../node_modules/moment",
                        "main": "moment"
                    },
                    {
                        "name": "px",
                        "path": "../pixeladmin",
                        "packageRoot": "../pixeladmin",
                        "main": "pixeladmin",
                        "deps": ["jquery"],
                        "resources": [
                            "css/bootstrap.min.css",
                            "css/pixeladmin.min.css",
                            "css/widgets.min.css",
                            "css/themes/candy-green.min.css",
                            "ionicons/css/ionicons.min.css"
                        ]
                    },
                    {
                        "name": "px-nav",
                        "path": "../pixeladmin/plugins",
                        "packageRoot": "../pixeladmin",
                        "main": "px-nav",
                        "deps": [
                            "px"
                        ]
                    },
                    {
                        "name": "px-bootstrap",
                        "path": "../pixeladmin/bootstrap",
                        "packageRoot": "../pixeladmin",
                        "main": false,
                        "deps": [
                            "jquery"
                        ]
                    },
                    {
                        "name": "px-libs",
                        "path": "../pixeladmin/libs",
                        "packageRoot": "../pixeladmin",
                        "main": false,
                        "deps": [
                            "px"
                        ]
                    }
                ]
            }
        ],
        "loader": {
            "type": "require",
            "configTarget": "vendor-bundle.js",
            "includeBundleMetadataInConfig": "auto",
            "plugins": [
                {
                    "name": "text",
                    "extensions": [".html", ".css"],
                    "stub": false
                }
            ]
        }
    }
}

au run

Local aurelia-cli v2.0.3
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.4.0      aurelia-bootstrapper
INFO [Bundle] Manually adding package: 1.2.1      aurelia-loader-default
INFO [Bundle] Manually adding package: 1.8.1      aurelia-pal-browser
INFO [Bundle] Manually adding package: 1.0.0      aurelia-testing
INFO [Bundle] Manually adding package: 2.0.16     text
INFO [Bundle] Manually adding package: 3.3.1      jquery
INFO [Bundle] Manually adding package: 2.19.1     moment
INFO [Bundle] Manually adding package:            px
INFO [Bundle] Manually adding package:            px-nav
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 1.0.3      aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.4.1      aurelia-framework
INFO [Bundler] Auto tracing package: 1.4.0      aurelia-history-browser
INFO [Bundler] Auto tracing package: 1.0.2      aurelia-loader
INFO [Bundler] Auto tracing package: 1.1.1      aurelia-logging-console
INFO [Bundler] Auto tracing package: 1.0.7      aurelia-metadata
INFO [Bundler] Auto tracing package: 1.8.2      aurelia-pal
INFO [Bundler] Auto tracing package: 1.3.4      aurelia-polyfills
INFO [Bundler] Auto tracing package: 1.6.0      aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.14.3     aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.5.0      aurelia-templating-router
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of px-bootstrap:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "px-bootstrap"
ERROR [Bundler] Unable to analyze px-bootstrap
INFO [Bundler] Error: Unable to find package metadata (package.json) of px-bootstrap
ERROR [Bundler] Failed to add Nodejs module px-bootstrap/transition
INFO [Bundler] Error: Unable to find package metadata (package.json) of px-bootstrap
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of px-libs:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "px-libs"
ERROR [Bundler] Unable to analyze px-libs
INFO [Bundler] Error: Unable to find package metadata (package.json) of px-libs
ERROR [Bundler] Failed to add Nodejs module px-libs/perfect-scrollbar.jquery
INFO [Bundler] Error: Unable to find package metadata (package.json) of px-libs
INFO [Bundler] Auto tracing package: 2.5.4      aurelia-binding
INFO [Bundler] Auto tracing package: 1.5.2      aurelia-dependency-injection
INFO [Bundler] Auto tracing package: 1.2.1      aurelia-history
INFO [Bundler] Auto tracing package: 1.5.2      aurelia-logging
INFO [Bundler] Auto tracing package: 1.1.7      aurelia-path
INFO [Bundler] Auto tracing package: 1.7.1      aurelia-router
INFO [Bundler] Auto tracing package: 1.3.3      aurelia-task-queue
INFO [Bundler] Auto tracing package: 1.11.1     aurelia-templating
INFO [Bundler] Auto tracing package: 1.3.2      aurelia-route-recognizer
INFO [Bundle] Writing app-bundle.js...
INFO [Bundle] Writing vendor-bundle.js...
Finished 'writeBundles'
Starting 'startDevServer'...

Dev server is started at: http://localhost:9000

Finished 'startDevServer'

Project Structure

├───aurelia_project
│   ├───environments
│   ├───generators
│   └───tasks
├───node_modules
├───pixeladmin
│   ├───bootstrap
│   ├───css
│   │   └───themes
│   ├───extensions
│   ├───fontawesome
│   │   ├───css
│   │   ├───js
│   │   ├───sprites
│   │   └───webfonts
│   ├───ionicons
│   │   ├───css
│   │   ├───data
│   │   ├───fonts
│   │   ├───scss
│   │   └───svg
│   ├───libs
│   ├───pace
│   └───plugins
├───scripts
└───src
    └───resources

Given the theme is paid I can’t provide a reproducible repo.

2

Means no package.json file?

You can use explicit config to set the path and main for the package.

Like this:

"dependencies": [
  //...
  {
    "name": "Pixeladmin",
    "path": "../local/path/to/pixeladmin", // Note this is relative to your src/, not project root. (a bad aurelia-cli design)
    "main": "some/dist/file.js", // or css file.
  }
]

Note if your package is pure css lib. You probably need to explicitly set the path for the css file, without rely on the main file setting above.

import "Pixeladmin/inner/path/to/file.css";

or

<require from="Pixeladmin/inner/path/to/file.css"></require>
3

Correct there is no package.json The pixeladmin theme bundles javascript libraries like Chart.js, d3, datatables, select2, etc. inside the pixeladmin/libs/ directory.

In my aurelia.json I am already using explicit config which was working in aurelia-cli@0.35.0 the only difference is in “main” I did not include the .js extension. However this configuration has broken in aurelia-cli@2.0.3.

4

There are some possible related breaking change in aurelia v1.0.0-beta1.

Try if this works for you:
Replace "main": false with "lazyMain": true.

After that worked, you can remove “moment”, remove all “packageRoot”, all “deps” and “resources”.

5

Probably need both following to replace "main": false. Try this:

"main": "index.js", // just to avoid reading package.json
"lazyMain": "true",
6

Just curios how @coopermor is doing… (-: