Issue with CLI-bundler when overriding bootstrap styles (using SASS)

Today I tried migrating my current AureliaV1-based project to a new skeleton based on CLI’s built-in bundler instead of Webpack.

In my project, I use SASS and I override some bootstrap styling variables. This is my src\style\bootstrap-customized.scss file (which I import in my src\main.ts file):

/* Override Bootstrap variables (defined in "node_modules/bootstrap/scss/_variables.scss) */
/* omitted for brevity */

/* Import Bootstrap itself */
@import "bootstrap/scss/bootstrap.scss";

When I run npm build, I get errors like these in the console:

{
  uid: 8,
  name: 'processCSS',
  branch: false,
  error: PluginError: src\style\bootstrap-customized.scss
  Error: Can't find stylesheet to import.
     ╷
  15 │ @import "bootstrap/scss/bootstrap.scss";
     │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
     ╵
    src\style\bootstrap-customized.scss 15:9  root stylesheet
      at Object._newRenderError ([ProjectDir]\node_modules\sass\sass.dart.js:13537:19)
      at Object._wrapException ([ProjectDir]\node_modules\sass\sass.dart.js:13374:16)
      at StaticClosure._renderSync ([ProjectDir]\node_modules\sass\sass.dart.js:13349:18)
      at Object.Primitives_applyFunction ([ProjectDir]\node_modules\sass\sass.dart.js:1089:30)
      at Object.Function_apply ([ProjectDir]\node_modules\sass\sass.dart.js:6007:16)
      at _callDartFunctionFast ([ProjectDir]\node_modules\sass\sass.dart.js:7676:16)
      at Object.renderSync ([ProjectDir]\node_modules\sass\sass.dart.js:7654:18)
      at DestroyableTransform._transform ([ProjectDir]\node_modules\gulp-dart-sass\index.js:142:34)
      at DestroyableTransform.Transform._read ([ProjectDir]\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
      at DestroyableTransform.Transform._write ([ProjectDir]\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:172:83) {
    formatted: "Error: Can't find stylesheet to import.\n" +
      '   ╷\n' +
      '15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
      '   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
      '   ╵\n' +
      '  src\\style\\bootstrap-customized.scss 15:9  root stylesheet',
    line: 15,
    column: 9,
    file: 'c:\\Workspace\\GreenPower\\GP\\aurelia-kermit\\src\\style\\bootstrap-customized.scss',
    status: 1,
    messageFormatted: '\x1B[4msrc\\style\\bootstrap-customized.scss\x1B[24m\n' +
      "Error: Can't find stylesheet to import.\n" +
      '   ╷\n' +
      '15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
      '   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
      '   ╵\n' +
      '  src\\style\\bootstrap-customized.scss 15:9  root stylesheet',
    messageOriginal: "Can't find stylesheet to import.\n" +
      '   ╷\n' +
      '15 │ @import "bootstrap/scss/bootstrap.scss";\r\n' +
      '   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n' +
      '   ╵\n' +
      '  src\\style\\bootstrap-customized.scss 15:9  root stylesheet',
    relativePath: 'src\\style\\bootstrap-customized.scss',
    __safety: undefined,
    _stack: undefined,
    plugin: 'gulp-dart-sass',
    showProperties: true,
    showStack: false,
    domainEmitter: DestroyableTransform {
      _readableState: [ReadableState],
      readable: true,
      _events: [Object: null prototype],
      _eventsCount: 3,
      _maxListeners: undefined,
      _writableState: [WritableState],
      writable: true,
      allowHalfOpen: true,
      _transformState: [Object],
      _destroyed: false,
      _transform: [Function (anonymous)],
      [Symbol(kCapture)]: false
    },
    domainThrown: false
  },
  duration: [ 0, 181123800 ],
  time: 1618165547713
}

And this is my tsconfig.json (the main one, in the project’s root folder):

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "disableSizeLimit": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "lib": [ "es2018", "dom" ],
    "locale": "en",
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "paths": {
      "js-library/*": [ "../../js-library/*" ]
    },
    "removeComments": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es2018",
    "typeRoots": [ "./node_modules/@types" ]
  },
  "include": [
    "src",
    "test"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

The code worked perfectly fine in the old (Webpack-based) skeleton, so I assume it’s just a configuration issue, but I fail to see it. Can somebody tell me what I am forgetting or doing wrong here? Thanks in advance. :blush:

1 Like

Maybe import resolution works differently.

Should become something like

│ @import "../../node_modules/bootstrap/scss/bootstrap.scss";

Hope this helps.

1 Like

Scss resolution is different from js/ts.

First make sure your skeleton is quite up to date, check aurelia_project/tasks/process_css.js, it should have sassPackageImporter.

Use @import "~bootstrap/...". This syntax is unrelated to js bundler, it’s a sass thing. You can use it in webpack too.

Update: just saw this in webpack sass-loader doc:

Using ~ is deprecated and can be removed from your code ( we recommend it ), but we still support it for historical reasons.

2 Likes

Technically, I am not very keen for the webpack’s enhancement. It surely removes some pain from user’s perspective, but it deviates from sass/css spec.

In sass/css, @import "foo" means a local relative import. Webpack sass-loader tries local relative import first, then falls back to importing node_modules/foo.

I would prefer @import "~foo/..." which is explicitly importing from a npm package.

2 Likes

Hi @ormasoftchile.

Thank you for your answer. Yes, I am aware that a direct explicit path (either relative or absolute) should do the job as well. But of course I was hoping that I could somehow get it to work with “module resolution”. Those long paths are pretty ugly. :wink:

If using such explicit paths would be the only solution available, I might alternatively consider to download/copy those bootstrap SCSS files and include them locally in my project code instead.

1 Like

Hi @huochunpeng.

Thank you very much for this information. I was unaware of the fact that CSS/SASS resolution differs from that of JS/TS. That’s something I will keep in mind from now on. With that ~ prefix in place, those errors are now resolved. :sunglasses:

Your information about Webpack’s CSS import file resolution enhancement is somewhat disturbing to me. It might make Webpack a dubious choice when standards compliance is of importance, I guess. On the other hand, the available features and configuration options in Webpack and its various loaders are quite vast (if not overwhelming), which currently makes Webpack hard to neglect when investigating a stable, robust and future-proof deployment solution.

For now, I hope that I can get Aurelia’s CLI bundler functional for my current project based on Aurelia V1. There seem to be other issues with the CLI bundler in my current project, however. For example, I am now getting several Esprima-related error messages when the bundler is tracing files: Unexpected token ..., Unexpected token ?, or even Unexpected token ILLEGAL, depending on changes I make to various compilation settings in tsconfig.json. I will go and investigate those issues now. I will also dive into the Aurelia CLI bundler in more detail, hoping that I can find additional information/documentation there, but if I am unable to overcome those issues as well, I will try posting additional questions here on Discourse.

Anyway, thanks again for your help so far. :slight_smile:

1 Like

That esprima issue is quite bad for au1 cli bundler. Because of the old tech stack, cli bundler still uses esprima which has not been updated to understand newer JS syntax.

We have moved away from cli bundler to dumber bundler for Aurelia 2. I am also maintaining an unofficial Aurelia 1 dumber skeleton (npx makes dumberjs). You may want to try dumber instead of cli bundler, the config is much simpler and it solved many cli-bundler problems (due to its old tech stack).

Many users have been seeing the esprima issue in cli bundler now. I may need to find a way to replace esprima with other parser in cli bundler, to just get away from this annoying parsing issue.

2 Likes

Thanks! I will give the dumber bundler a try then. :+1:

1 Like

I got a cli-bundler branch (merged to master) for testing too.

You can update your package.json with "aurelia-cli": "aurelia/cli",, do a fresh npm install (don’t use yarn as it’s not fully compatible with git repo depedency). This should remove those esprima errors.

1 Like

Hi @huochunpeng,

I just did as you instructed. I updated my package.json and did an npm install. And then I did an npm run build.

The Esprima errors are gone indeed.

But now I get a whole load of other errors and warnings. Instead of providing a summary, I decided to post the entire output here:

> testapp@0.1.0 build
> au build --env prod

Local aurelia-cli v2.0.2
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3      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: 2.0.16     text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processMarkup'
Finished 'processCSS'
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 5.15.3     @fortawesome/fontawesome-free
INFO [Bundler] Auto tracing package: 1.0.3      aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.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.7.1      aurelia-router
INFO [Bundler] Auto tracing package: 1.5.3      aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.1     aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0      aurelia-templating-router
INFO [Bundler] Auto tracing package: 1.0.0      aurelia-testing
WARN [Bundler] [ProjectDir]\src\features\gp-calendar\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-calendar\src\elements\gp-calendar.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-html-editor\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-html-editor\src\elements\gp-html-editor.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\src\elements\gp-lookup-multiselect-selecteditem.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup-multiselect\src\elements\gp-lookup-multiselect.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\dev-app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\src\elements\gp-lookup-listitem.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-lookup\src\elements\gp-lookup.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\features\gp-validation-summary\src\elements\gp-validation-summary.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Api
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/DateExtensions
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Helpers
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Holidays
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
INFO [Bundler] Auto tracing package: 2.29.1     moment
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-header.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-list-header.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\resources\elements\kermit-sidenav-menu.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\style\bootstrap-customized.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\style\style.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of typeface-open-sans:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "typeface-open-sans"
ERROR [Bundler] Unable to analyze typeface-open-sans
INFO [Bundler] Error: Unable to find package metadata (package.json) of typeface-open-sans
ERROR [Bundler] Failed to add Nodejs module typeface-open-sans
INFO [Bundler] Error: Unable to find package metadata (package.json) of typeface-open-sans
WARN [Bundler] [ProjectDir]\src\views\app\app.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\app\login.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\category\index.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\project\details.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
WARN [Bundler] [ProjectDir]\src\views\project\index.scss is not captured by any bundle file. You might need to adjust the bundles source matcher in aurelia.json.
ERROR [BundledSource] Could not convert to AMD module, skipping [ProjectDir]\node_modules\@fortawesome\fontawesome-free\scss\brands.scss
ERROR [BundledSource] Error was: SyntaxError: unknown: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (5:1):

  3 |  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  4 |  */
> 5 | @import 'variables';
    | ^
  6 |
  7 | @font-face {
  8 |   font-family: 'Font Awesome 5 Brands';
ERROR [Bundler] Failed to do transforms
INFO [Bundler] SyntaxError: [5:19]: Expected '('
{
  uid: 12,
  name: 'writeBundles',
  branch: false,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [ 2, 309905000 ],
  time: 1618225977624
}
{
  uid: 2,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [ 8, 400050300 ],
  time: 1618225977631
}
{
  uid: 0,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [5:19]: Expected '('
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
      at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
      at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
      at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
      at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
      at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
    index: 205,
    line: 5,
    column: 19,
    description: "[5:19]: Expected '('",
    loc: { line: 5, column: 19 }
  },
  duration: [ 8, 415183000 ],
  time: 1618225977632
}
ParseError [SyntaxError]: [5:19]: Expected '('
    at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
    at consume ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4370:9)
    at parseImportExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6406:5)
    at parseImportCallOrMetaExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6388:12)
    at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6371:20)
    at parseDecoratorList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8261:22)
    at parseDecorators ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8254:23)
    at parseClassDeclaration ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8146:22)
    at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4856:20)
    at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25) {
  index: 205,
  line: 5,
  column: 19,
  description: "[5:19]: Expected '('",
  loc: { line: 5, column: 19 }
}

Edit:
The errors regarding the typeface-open-sans package are resolved now. I forgot to install that package earlier.

1 Like

That’s probably your aurelia.json didn’t setup cssProcessor.source correctly.

Where is your npm package js-library installed?

The font awesome error means it tries to use JS parser to load css file. Show me how you import font awesome in your JS code.

1 Like

Hi @huochunpeng.

Below I provide additional information regarding your last remarks. Please let me know if you need anything else. Thanks again.

App creation

I created the app using the aurelia CLI (au new) and entered the following choices:

  • Please name this new project: » testapp
  • Would you like to use the default setup or customize your choices? » Custom Project
  • App or Plugin? » App
  • Which bundler would you like to use? » CLI’s built-in bundler with an AMD module loader
  • Which AMD module loader would you like to use? » Alameda
  • What platform are you targeting? » Web
  • What transpiler would you like to use? » TypeScript
  • How would you like to setup your HTML template? » None
  • What css preprocessor would you like to use? » Sass
  • Do you want to add PostCSS processing » None
  • Which unit test runner would you like to use? » None
  • Would you like to configure e2e integration testing? » None
  • What is your default code editor? » None
  • Which features do you want to scaffold into your project? » Minimum
  • Would you like to add a Dockerfile? » No

aurelia.json

Below are the concents of my aurelia_project\aurelia.json file. It should be the file as it was generated by the Aurelia CLI. I don’t remember that I made any changes to it. Certainly not regarding CSS/SASS setup.

{
  "name": "testapp",
  "type": "project:application",
  "paths": {
    "root": "src",
    "resources": "resources",
    "elements": "resources/elements",
    "attributes": "resources/attributes",
    "valueConverters": "resources/value-converters",
    "bindingBehaviors": "resources/binding-behaviors"
  },
  "transpiler": {
    "id": "typescript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./types/**/*.d.ts"
    ],
    "source": [
      "src/**/*.ts"
    ]
  },
  "markupProcessor": {
    "source": [
      "src/**/*.html"
    ]
  },
  "cssProcessor": {
    "source": [
      "src/**/*.scss"
    ]
  },
  "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": [
          "**/*.{js,json,css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/promise-polyfill/dist/polyfill.min.js",
          "node_modules/alameda/alameda.js"
        ],
        "dependencies": [
          "aurelia-bootstrapper",
          "aurelia-loader-default",
          "aurelia-pal-browser",
          {
            "name": "aurelia-testing",
            "env": "dev"
          },
          "text"
        ]
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": false
        }
      ]
    }
  }
}

js-library

My js-library folder is a sibling of my project’s folder inside my git repository. Here is an extract of the directory structure:

<git repo root>
├───testapp
│   ├───aurelia_project
│   │   ├───environments
│   │   ├───generators
│   │   └───tasks
│   ├───node_modules
│   └───src
│       ├───api
│       │   ├───application
│       │   ├───categories
│       │   ├───messages
│       │   ├───projects
│       │   ├───rights
│       │   ├───roles
│       │   ├───scopes
│       │   ├───stories
│       │   ├───tasks
│       │   └───users
│       ├───ea-messages
│       ├───features
│       │   ├───gp-calendar
│       │   │   ├───dev-app
│       │   │   └───src
│       │   │       └───elements
│       │   ├───gp-highlight-text
│       │   │   └───src
│       │   │       └───attributes
│       │   ├───gp-html-editor
│       │   │   ├───dev-app
│       │   │   └───src
│       │   │       └───elements
│       │   ├───gp-lookup
│       │   │   ├───dev-app
│       │   │   └───src
│       │   │       └───elements
│       │   ├───gp-lookup-multiselect
│       │   │   ├───dev-app
│       │   │   └───src
│       │   │       └───elements
│       │   ├───gp-scroll-into-view
│       │   │   └───src
│       │   │       └───attributes
│       │   └───gp-validation-summary
│       │       ├───dev-app
│       │       └───src
│       │           └───elements
│       ├───models
│       ├───resources
│       │   ├───elements
│       │   └───value-converters
│       ├───style
│       └───views
│           ├───app
│           ├───category
│           ├───home
│           ├───project
│           └───~test
└───js-library
    ├───css
    │   └───webcomponents
    ├───js
    │   └───webcomponents
    ├───src
    │   └───webcomponents
    └───tests

The js-library folder contains a several legacy TypeScript modules that are still in use in my company.

It also contains a package.json file, because I added a conceptual setup for unit testing using Chai and Mocha. It’s used for nothing else. The code in js-library should not be considered as a real valid NPM package itself. It’s just an external location where shared JavaScript/TypeScript code is stored.

If the current setup causes trouble, I might simply remove the package.json and the NPM packages from js-library.

Font Awesome

Font Awesome is imported in my project in the first four lines of my src\main.ts file:

import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';

Edit:

In case you are wondering, I organized the code in my app’s features directory in such a way, that it will ease migration to Aurelia Plugins. In contrast to what the error messages indicate, the dev-app views are referenced from a test view in src\views\~test and the SCSS files are referenced in the views’ HTML templates.

The test views are referenced in src\main.ts:

export function configure(aurelia: Aurelia) {
  Date.prototype.toJSON = function () { return moment(this).format(); }

  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))
    .feature(PLATFORM.moduleName('features/gp-calendar/src/index'))
    .feature(PLATFORM.moduleName('features/gp-highlight-text/src/index'))
    .feature(PLATFORM.moduleName('features/gp-html-editor/src/index'))
    .feature(PLATFORM.moduleName('features/gp-lookup/src/index'))
    .feature(PLATFORM.moduleName('features/gp-lookup-multiselect/src/index'))
    .feature(PLATFORM.moduleName('features/gp-scroll-into-view/src/index'))
    .feature(PLATFORM.moduleName('features/gp-validation-summary/src/index'))
    .developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(async () => {
    const testPage = testPaths.get(window.location.pathname);

    if (testPage) {
      aurelia.setRoot(testPage);
      return;
    }

    // remaining bootstrap code omitted
  });
}

const testPaths = new Map<string, string>([
  ['/~test', PLATFORM.moduleName('views/~test/index')],
  ['/~test/gp-calendar', PLATFORM.moduleName('features/gp-calendar/dev-app/app')],
  ['/~test/gp-html-editor', PLATFORM.moduleName('features/gp-html-editor/dev-app/app')],
  ['/~test/gp-lookup', PLATFORM.moduleName('features/gp-lookup/dev-app/app')],
  ['/~test/gp-lookup-multiselect', PLATFORM.moduleName('features/gp-lookup-multiselect/dev-app/app')],
  ['/~test/gp-validation-summary', PLATFORM.moduleName('features/gp-validation-summary/dev-app/app')]
]);

The test views, like features\gp-calendar\dev-app\app.html, contain code like this:

<template>
  <require from="./app.scss"></require>

  <!-- remaining template code omitted -->
</template>
1 Like

You got an impressive setup. To decide to migrate such a big app, webpack must have hurt you badly. :smile:

Let’s try fixing this two issues first.

  1. the unbundled scss files. I was wrong, it’s not in cssProcessor, but in the bundle, add scss to app-bundle (I might need to fix this in our skeleton, updated fix(cli-bundler): fix missing capture on scss file by 3cp · Pull Request #27 · aurelia/v1 · GitHub). This might fix the fontawesome error too.
  1. the js-library. It’s a local dependency, add following to vendor-bundle dependencies.
{ "name": "js-library", "path": "../../js-library" }
1 Like

Hi @huochunpeng ,

My apologies. I read your reaction yesterday, but I was unable to respond to you.

I have added scss to the app-bundle, but I fail to locate the scripts/vendor-bundle.js file as referred to by index.html. Is it an automatically generated file? Or should I explicitly create one with some basic content?

I have not yet read the CLI bundler docs, so I guess I will have to take a look at that first. And perhaps I should also take a peek at the bundler’s source code as well.

As soon as I have worked out how to fix my code based on your suggestions, I will post my results here again.

1 Like

Yes, that vendor-bundle.js is one of the output files of the bundling process.

1 Like

Ah. I see. Then I fear that the build already aborts before that file is generated in my project.

Anyway, I updated the app-bundle in aurelia.json and performed a new build. Font Awesome still gave errors (due to SCSS issues).

So (for now) I updated the imports of Font Awesome in my main.ts file like this:

//import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
//import '@fortawesome/fontawesome-free/scss/brands.scss';
//import '@fortawesome/fontawesome-free/scss/regular.scss';
//import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/css/all.css';

That eliminated the Font Awesome error (for now). The build output now looks as follows:

> testapp@0.1.0 build
> au build --env prod

Local aurelia-cli v2.0.2
Starting 'clean'...
Finished 'clean'
Starting 'readProjectConfiguration'...
INFO [Bundle] Manually adding package: 2.3.3      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: 2.0.16     text
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processJson'...
Starting 'processCSS'...
Starting 'copyFiles'...
Starting 'configureEnvironment'...
Finished 'copyFiles'
Finished 'processJson'
Finished 'configureEnvironment'
Starting 'buildTypeScript'...
Finished 'processMarkup'
Finished 'processCSS'
Finished 'buildTypeScript'
Starting 'writeBundles'...
INFO [Bundler] Tracing files ...
INFO [Bundler] Auto tracing package: 5.15.3     @fortawesome/fontawesome-free
INFO [Bundler] Auto tracing package: 1.0.3      aurelia-event-aggregator
INFO [Bundler] Auto tracing package: 1.3.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.7.1      aurelia-router
INFO [Bundler] Auto tracing package: 1.5.3      aurelia-templating-binding
INFO [Bundler] Auto tracing package: 1.13.1     aurelia-templating-resources
INFO [Bundler] Auto tracing package: 1.4.0      aurelia-templating-router
INFO [Bundler] Auto tracing package: 1.0.0      aurelia-testing
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Api
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/DateExtensions
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Helpers
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [PackageAnalyzer] Unable to load package metadata (package.json) of js-library:
INFO [PackageAnalyzer] Error: cannot resolve npm package folder for "js-library"
ERROR [Bundler] Unable to analyze js-library
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
ERROR [Bundler] Failed to add Nodejs module js-library/src/Holidays
INFO [Bundler] Error: Unable to find package metadata (package.json) of js-library
INFO [Bundler] Auto tracing package: 2.29.1     moment
INFO [Bundler] Auto tracing package: 1.1.13     typeface-open-sans
ERROR [BundledSource] Could not convert to AMD module, skipping [ProjectDir]\src\features\gp-calendar\src\elements\gp-calendar.scss
ERROR [BundledSource] Error was: SyntaxError: unknown: Unexpected token (1:0)

> 1 | .gp-calendar-host {
    | ^
  2 |   display: inline-block;
  3 |
  4 |   > .gp-calendar-input {
ERROR [Bundler] Failed to do transforms
INFO [Bundler] SyntaxError: [1:1]: Unexpected token: '.'
{
  uid: 12,
  name: 'writeBundles',
  branch: false,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [ 2, 941659000 ],
  time: 1618391514061
}
{
  uid: 2,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [ 9, 645371500 ],
  time: 1618391514066
}
{
  uid: 0,
  name: '<series>',
  branch: true,
  error: ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
      at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
      at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
      at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
      at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
      at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
      at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
      at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
      at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
      at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
      at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
    index: 1,
    line: 1,
    column: 1,
    description: "[1:1]: Unexpected token: '.'",
    loc: { line: 1, column: 1 }
  },
  duration: [ 9, 667220400 ],
  time: 1618391514068
}
ParseError [SyntaxError]: [1:1]: Unexpected token: '.'
    at report ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:187:11)
    at parsePrimaryExpression ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:6378:13)
    at parseExpressionOrLabelledStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4941:20)
    at parseStatement ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4926:20)
    at parseStatementListItem ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4876:20)
    at parseStatementList ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4811:25)
    at parseSource ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:4778:16)
    at Object.parseScript ([ProjectDir]\node_modules\meriyah\dist\meriyah.cjs:8777:12)
    at Function.parse.usesAmdOrRequireJs ([ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\lib\parse.js:553:26)
    at [ProjectDir]\node_modules\aurelia-cli\lib\build\amodro-trace\write\defines.js:57:28 {
  index: 1,
  line: 1,
  column: 1,
  description: "[1:1]: Unexpected token: '.'",
  loc: { line: 1, column: 1 }
}
1 Like

I forgot you imported fontawesome scss directly in js code. Yes cli-bundler would not handle scss file directly. You can only import compiled css file inside js code. (in html, you can do <require from="./local-but-not-npm.scss"></require>, cli-bundler will use compiled (by tasks/process-css.js) ./local-but-not-npm.css automatically.)

That’s the same reason for the failure of \src\features\gp-calendar\src\elements\gp-calendar.scss. You should just do import gp-calendar.css in your js code, or doing require either scss or css in your gp-calendar.html.

Update: dumber bundler has better support of local scss import, you can do import local.scss in dumber.

You need to add my fix for local js-library for it to work. Update: does your js-library/ folder has a package.json?

1 Like

Hmmm. The template in \src\features\gp-calendar\src\elements\gp-calendar.html actually uses a <require> tag to import the SCSS file:

<template class="gp-calendar-host"
          mouseup.delegate="elementMouseUp($event)"
          keyup.delegate="elementKeyUp($event)">

  <require from="./gp-calendar.scss"></require>

  <!-- ... -->
</template>

But it might altogether be a better idea for me to skip the CLI bundler and give the dumber bundler a try. In the (hopefully near) future I will migrate my project to Aurelia V2 and I guess it will be beneficial if I would be using the dumber bundler already by that time.

By the way… the reason for me to drop Webpack now is the fact that Aurelia V1 does not support Webpack 5 and I feel uncomfortable sticking with Webpack 4 and the many obsolete dependencies it requires. On the other hand, Webpack 5 is also pretty new and perhaps not all all features are already available in that new version. (That’s what’s stated on Webpack’s website regarding migration to version 5, at least.)

When I decided to give the CLI bundler a try, I was mistaken; I actually intended to use its “newest” version that was also used in Aurelia V2, but I was confused and I forgot that that one is called the “dumber bundler” now.

My apologies about causing you so much trouble. Unless you appreciate the efforts and consider them useful, I will continue to try to get it to work with the CLI bundler and keep providing feedback to you, but otherwise I would suggest that I drop this topic on Discourse and focus on the dumber bundler from now on.

1 Like

Aha! I figured something out! It seems that the relative path './gp-calendar.scss' does not work as expected. If I change it to 'gp-calendar.scss' (so without the ./ prefix) the error is gone.

This actually seems to work:

<template class="gp-calendar-host"
          mouseup.delegate="elementMouseUp($event)"
          keyup.delegate="elementKeyUp($event)">

  <require from="gp-calendar.scss"></require>

  <!-- ... -->
</template>

Is this failing CLI bundler file resolution behavior using a relative path intentional?

1 Like

I cannot think of a valid reason for the “./” issue. Maybe the double src/ in the path confused some cli bundler code.

1 Like