Aurelia-Bundler won't fetch sub-directory imports from main.js.

[allencoded]

Aurelia-Bundler won't grab sub directory imports from main.js. I am not sure how to fix here is what we have:

/src/main.js

import { HttpClient } from 'aurelia-fetch-client';
import { UserManager, Log, WebStorageStateStore } from 'oidc-client';
import { AppConfig } from './config/app-config';
import bootstrap from "bootstrap";
import 'babel-polyfill';
...

bundles.js

module.exports = {
  "bundles": {
    "dist/app-build": {
      "includes": [
        "[main.js]",
        "[*/**/*.js]",
        "*/**/*.html!text",
        "*/**/*.css!text"
      ],

error:

system.js:4 GET http://localhost:3001/config/app-config.js 404 (Not Found)

So what I am doing is: gulp export Then after it exports completely I cd into the created exports folder. Then I do http-server -p 3001. Launch the browser and get the error above. Something with main.js importing our own js from within a subdirectory doesn't work.

I am howerver able to: gulp watch
just fine. Its only when I try to bundle with gulp export that it breaks. I think the bundler has a problem or my setup is funky.

[EisenbergEffect]

Change your glob patterns:

"[**/*.js]",
"**/*.html!text",
"**/*.css!text"

[allencoded]

If I change the glob patterns then it won't grab my sub-directories. Thats why my glob patterns are the way they are I took that fix from here: https://github.com/aurelia/bundler/issues/103

[EisenbergEffect]

The patterns I have pasted above should grab the subdirectories. They are a corrected form of the bundle configuration taken from the latest skeleton.

[allencoded]

If I take away the globals though it wont grab my sub-directories. Throws network 404 errors galore in trying to find them. Here is my dist folder structure:

dist/main.js
dist/accounts/(lots of js/html files)
dist/config/(lots of js/html files)

when using */**/*.js it seems to pull those js files at least I am not seeing red. When using */**.js it doesn't seem to pull my js files in the sub directories.

[EisenbergEffect]

@AshleyGrant can you confirm that my globs above are correct to pull in all subfolders and if not can you correct them?

[AshleyGrant]

The square braces tell the bundler not to follow imports. Try doing "**/*.js",

[allencoded]

I tried removing the brackets. That ended not only not including my sub directories but also gave a lot of other errors:

"GET /modules/es6.parse-int.js" Error (404): "Not found"
"GET /modules/es6.parse-float.js" Error (404): "Not found"
"GET /modules/es6.number.constructor.js" Error (404): "Not found"
...

The list goes on and on. If I add the brackets back then it goes back to telling me just the sub directories aren't included.

[allencoded]

Adding the whole task for maybe some insight.

Bundles.js:

module.exports = {
  "bundles": {
    "dist/app-build": {
      "includes": [
        "[**/*.js]",
        "**/*.html!text",
        "**/*.css!text"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": true,
        "rev": false
      }
    },
    "dist/aurelia": {
      "includes": [
        "aurelia-framework",
        "aurelia-bootstrapper",
        "aurelia-fetch-client",
        "aurelia-router",
        "aurelia-animator-css",
        "aurelia-templating-binding",
        "aurelia-polyfills",
        "aurelia-templating-resources",
        "aurelia-templating-router",
        "aurelia-loader-default",
        "aurelia-history-browser",
        "aurelia-logging-console",
        "bootstrap",
        "bootstrap/css/bootstrap.css!text",
        "fetch",
        "jquery",
        "oidc-client",
        "babel-polyfill",
        "moment",
        "github:systemjs/plugin-json@0.1.2",
        "core-js",
        "bluebird"
      ],
      "options": {
        "inject": true,
        "minify": true,
        "depCache": false,
        "rev": false
      }
    }
  }
};

export.js

// this file provides a list of unbundled files that
// need to be included when exporting the application
// for production.
module.exports = {
  'list': [
    'index.html',
    'config.js',
    'favicon.ico',
    'LICENSE',
    'jspm_packages/system.js',
    'jspm_packages/system-polyfills.js',
    'jspm_packages/system-csp-production.js',
    'dist/css/**/*.css',
    'dist/environment.json'
  ],
  // this section lists any jspm packages that have
  // unbundled resources that need to be exported.
  // these files are in versioned folders and thus
  // must be 'normalized' by jspm to get the proper
  // path.
  'normalize': [
    [
      // include font-awesome.css and its fonts files
      'font-awesome', [
        '/css/font-awesome.min.css',
        '/fonts/*'
      ]
    ], [
      // include bootstrap's font files
      'bootstrap', [
        '/fonts/*'
      ]
    ],
  ]
};

Index.html:

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('core-js').then(function() {
        System.import('aurelia-bootstrapper');
      });
    </script>

Main.js

import { HttpClient } from 'aurelia-fetch-client';
import { UserManager, Log, WebStorageStateStore } from 'oidc-client';
import { AppConfig } from './config/app-config'; // <-- THESE Aren't Working via aurelia-bundler!
import bootstrap from "bootstrap";
import 'babel-polyfill';
import 'fetch';
import 'bluebird';
...

[EisenbergEffect]

The configuration I gave you is what has worked on every project I've done. I'm not sure what's going wrong in your case. We may need to have you create a repro and attach it.

However, that aside, did you intend to generate a depCache? My guess is no. Try setting that to false and see if it makes a difference.

[allencoded]

depCache was part of the issue. turning that to false helped for those whom may stumble across this issue in the future.

[TomWHall]

Hi @allencoded - would you mind taking a quick look at my similar issue on StackOverflow? When you say depCache was part of the issue, was there something else? Thanks! Tom