Coffeescript with html templates? [Solved]

Help Requests
1

I am attempting to use coffee script with aurelia and html templates, but am running into issues.
I ran the cli with custom: web pack, web, babel, minimum magnification, no css transpiler, and no testing.
Then I added coffee script by npm install --save-dev coffee-loader then npm install --save-dev coffeescript.
I then added { test: /\.coffee$/i, loader: 'coffee-loader', exclude: nodeModulesDir, options: { transpile: coverage ? { sourceMap: 'inline', plugins: [ 'istanbul' ] } : {} } }, to the webpack.config.js file and it seems happy (nothing noticeably wrong yet).

Then I created a coffee script file in my src dir and export a class. In my app.js file, I imported the coffee script file as import {Test} from './test.coffee'and I can instantiate the class and console logging from the coffee script file works great.

Then I created a test.html file in the same dir as the test.coffee file and attempted to use it as an element in the app.html, but it gives an error message.

app.js:

import {Test} from './test.coffee'

export class App {
  constructor() {
    console.log(new Test()) // works correctly
  }
}

app.html:

<template>
  <require from="./test.coffee"></require>
  <Test></Test> <!-- errors -->
</template>

test.coffee:

export class Test
  constructor: () ->

test.html:

<template>
</template>

Exact error from console (compiles without errors):

[Info] INFO [aurelia] – "Aurelia Started"
[Log] Test {}
[Debug] DEBUG [templating] – "importing resources for app.html" – ["test.coffee"] (1)
[Warning] Unhandled rejection 
step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise


step

_execute
_resolveFromExecutor
Promise

loadViewFactory
load
load

tryCatcher
_settlePromiseFromHandler
_settlePromise
_settlePromise0
_settlePromises
_fulfill
_resolve
_promiseFulfilled
_settlePromise
_settlePromise0
_settlePromises
_drainQueue
_drainQueues
drainQueues

I have tried many variations of the <require> statement, but it isn’t working. Can anyone explain this?

2

I managed to get it working by replacing

<template>
  <require from="./test.coffee"></require>
  <Test></Test> 
</template>

with

<template>
  <compose view="./test.html" view-model="./test.coffee"></compose>
</template>

but I would still like to know if there is some config option or something that I am missing that will let me use the previous syntax.

3

Although I didn’t try, I believe you should always do <require from="./test"></require>.

test.coffee is your source code before transpiling.

The same thing applies to <require from="./my.css"></require>, instead of <require from="./my.scss"></require>

BTW, eeer, still using CoffeeScript?

4

You cannot because the compiler complains that it can’t find a module test because it doesn’t recognize test.coffee as test only test.js.

5

I figured it out.

under the webpack.config.js file, you have to pass an option to the AureliaPlugin instance:

...
plugins: [
    new AureliaPlugin({viewsFor: "**/!(tslib)*.{ts,js,coffee}"}),
    new ProvidePlugin({
      'Promise': 'bluebird'
...

adding {viewsFor: "**/!(tslib)*.{ts,js,coffee}"} makes coffee script files work just like js and ts modules.

Also, I added coffee to the array of legally forgotten extensions also in webpack.config.js:

resolve: {
    extensions: ['.js', '.coffee'],
    modules: [srcDir, 'node_modules'],
  },

Yay!

3 Likes