canjs/can-compile

Can't get it to work

Closed this issue · 15 comments

The following outputs 3 files:
production/views.production.js contains: !function() { }();
production/production.js contains: !function() { }();
production/production.min.js is empty.

Running "cancompile" task

Running "cancompile:dist" (cancompile) task
Verifying property cancompile.dist exists in config...OK
Files: test/catMerchList_view.ejs, test/breadcrumb_view.mustache, test/featuredStores_view.mustache -> production/views.production.js
Options: version="0.8.0", wrapper="!function() { {{{content}}} }();"
Compiling test/catMerchList_view.ejs

Running "concat" task

Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: production/views.production.js -> production/production.js
Options: separator="\r\n", banner="", footer="", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"
Reading production/views.production.js...OK
Writing production/production.js...OK
File production/production.js created.

Running "uglify" task

Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: production/production.js -> production/production.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false
Minifying with UglifyJS...Reading production/production.js...OK
OK
Writing production/production.min.js...OK
File production/production.min.js created: 19 B → 0 B

1 file created.

Done, without errors.

What's you configuration and how do the view files look like?

I've tried several configurations, this resulted in my previous post.
Gruntfile.js:
module.exports = function (grunt) {

// Project configuration.
grunt.initConfig({
    cancompile: {
        options: {
            version: '0.8.0'
        },
        dist: {
            options: {
                wrapper: '!function() { {{{content}}} }();',
            },
            src: ['test/*.ejs', 'test/*.mustache'],
            dest: 'production/views.production.js'
        }
    },
    concat: {
        dist: {
            src: [
                '<%= cancompile.dist.dest %>' // The compiled views
            ],
            dest: 'production/production.js'
        }
    },
    uglify: {
        dist: {
            files: {
                'production/production.min.js': ['<%= concat.dist.dest %>']
            }
        }
    }
});

// Default task.
grunt.registerTask('default', ['cancompile', 'concat', 'uglify']);

grunt.loadNpmTasks('can-compile');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');

};

Structure:
Assets -> Gruntfile.js
-> node_modules/
-> test -> breadcrumb_view.mustache
-> catMerchList_view.ejs
-> featuredStores_view.mustache

Your version option is wrong. It hast to be the CanJS version you are using not the can-compile version and there is no CanJS 0.8.

Yeah, I think I already messed with that. Changed it back to 2.1.3 and got this:
production/production.js and production/production.min.js created but completely empty.

Running "cancompile" task

Running "cancompile:dist" (cancompile) task
Verifying property cancompile.dist exists in config...OK
Files: test/catMerchList_view.ejs, test/breadcrumb_view.mustache, test/featuredStores_view.mustache -> production/views.production.js
Options: version="2.1.3", wrapper="!function() { {{{content}}} }();"
Compiling test/catMerchList_view.ejs

Running "concat" task

Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: [no src] -> production/production.js
Options: separator="\r\n", banner="", footer="", stripBanners=false, process=false, sourceMap=false, sourceMapName=undefined, sourceMapStyle="embed"
Writing production/production.js...OK
File production/production.js created.

Running "uglify" task

Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: production/production.js -> production/production.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report="min", expression=false, maxLineLen=32000, ASCIIOnly=false, screwIE8=false
Minifying with UglifyJS...Reading production/production.js...OK
OK
Writing production/production.min.js...OK
File production/production.min.js created: 0 B → 0 B

1 file created.

Done, without errors.

Any idea what this means? Could the issue be with jsdom? I've encountered this several times trying alternative builds with can-compile.

SyntaxError: c:\Users\xxxxx.MALLNET\Documents\sandbox\gulp\emall\assets\core\node_modules\can-compile\node_modules\jsdom\lib\jsdom\level1\core.js:432
set nodeName() { throw new core.DOMException();},
^
Unexpected token )

What Node version are you using?

0.12.0

This hasn't been tested with Node 0.12. Looks like that version of JSDOM doesn't work with 0.12. The most reasonable option would be to upgrade can-compile to JSDOM 4 (which would also make it much easier to get it to work on Windows) but that JSDOM will only work with io.js.

So... instal io.js, update JSDOM and then what? I mean is this something I should attempt?

I would say installing nvm and then nvm install v0.10.36 && nvm use 0.10.36 would be the easiest thing to try first. I'll look into 0.12 compatibility.

That worked, thank you. If you could let me know when you update that would be great.

I also had the jsdom error 'Unexpected token )' (can-compile 0.8.0, canjs 2.1.4, node 0.12.1).

After installing node 0.10.36 via nvm the jsdom error is gone but theres another error:

module.js:340
    throw err;
    ^
Error: Cannot find module 'generate-object-property'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> ([...]/node_modules/can-compile/node_modules/jsdom/node_modules/request/node_modules/har-validator/node_modules/is-my-json-valid/index.js:1:76)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)

Update:
Ok, it's working now, had to re-install the local node packages after installing/using node 0.10.36.

David, thanks again for this great module. I also experienced problems with JSDOM and node 0.12 / io.js 1.6.4. JSDOM 4.x.x is incompatible with node, but JSDOM 3.x.x is compatible with both. When i upgrade package.json to:

  "dependencies": {
    "commander": "1.1.1",
    "async": "0.1.22",
    "jsdom": "~3.0.0",
    "handlebars": "~1.0.12",
    "glob": "~3.2.8"
  }

the only problem remains: JSDOM v3.x.x/v4.x.x stops if it fails to parse provided javascript file. And it happens in my case with version=2.1.4, because the url http://canjs.com/release/2.1.4/can.view.mustache.js is broken. It seems that a location and name of this file changes with each canjs release.

As a workaround for 2.1.4 i replaced the url with http://canjs.com/release/2.1.4/can.stache.js and it works.

can.view.mustache is the default in version 2.x so it does not come a s a separate plugin anymore. I guess the configuration has to happen based on the version then.

daffl commented

Thanks to #36 only the needed scripts are loaded. I also updated the JSDOM version via 64737d6 and made sure Travis test runs on Node 0.10, latest and io.js.