Ember-CLI: Cannot find module 'broccoli-static-compiler'Error: Cannot find module 'broccoli-static-compiler'

Question

Anyone know what this error means? Most important: how to fix?

Cannot find module 'broccoli-static-compiler'Error: Cannot find module 'broccoli-static-compiler'

This happened today after installing ember-cli new project and trying to run ember server

Answer 1

It means ember serve can't find the Node.js package broccoli-static-compiler. Broccoli provides the build pipeline for Ember CLI projects, broccoli-static-compiler is a Broccoli plugin that copies files as-is to the build output.

I cannot reproduce this with Ember CLI 0.0.28 and 0.0.29, this package should be available in YOURPROJECT/node_modules/ember-cli/node_modules/. Which version of Ember CLI do you have installed? (ember --version)

You could try installing broccoli-static-compiler yourself locally for your new project by running npm install --save-dev broccoli-static-compiler from the project directory.

Answer 2

Broccoli Static Compiler

(1) Install the required broccoli extensions:

npm install --save-dev broccoli-static-compiler
npm install --save-dev broccoli-merge-trees

(2) Edit Brocfile.js.

Remove or comment this line:

module.exports = app.toTree();

Add (and modify to suit):

// require the static compiler
var pickFiles = require('broccoli-static-compiler');
// choose the static files - path usually: 'vendor/module/dist'
var iCanHasFiles = pickFiles('path/to/files', {
    srcDir: '/',
    // 'files' is optional for choosing some of the srcDir's content.
    // NB: Do not include directories here!
    files: ['file.js', 'file.css', 'file.woff'],
    destDir: '/assets/icanhasfiles'
});

// Merge the iCanHasFiles with the ember app tree
var mergeTrees = require('broccoli-merge-trees');
module.exports = mergeTrees([app.toTree(), iCanHasFiles]);

(3) Other JavaScript files can be added via this file too. They must be inserted above the module.exports call in Brocfile.js.

// after "bower install --save bower-module-name" (bower.io/search for name).
app.import('vendor/module/file.js');

Ember-cli and Bootstrap

(A) Instructions for creating new project app-project with Bootstrap inclusion:

ember new app-project
cd app-project
bower install --save bootstrap-sass-official
npm install --save-dev broccoli-sass
mv app/styles/app.css app/styles/app.scss

(B) Open app/styles/app.scss, and change the import path:

@import 'vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';

(C) To include Glyphicons font, open Brocfile.js:

// import the necessary modules:
var pickFiles = require('broccoli-static-compiler');
var mergeTrees = require('broccoli-merge-trees');

// at the bottom of the file, replace the "module.exports" line with:
// module.exports = app.toTree();

// Put the bootstrap fonts in the place that the bootstrap css expects to find them.
var bootstrapFonts = pickFiles('vendor/bootstrap-sass-official/vendor/assets/fonts/bootstrap', {
    srcDir: '/',
    destDir: '/assets/bootstrap'
});

// Merge the bootstrapFonts with the ember app tree
var mergeTrees = require('broccoli-merge-trees');
module.exports = mergeTrees([
    app.toTree(),
    bootstrapFonts
]);

(D) Alternatively, for classic glyphicons (bootstrap 2.3 etc):

// if using glyphicons instead (bootstrap 2.3 etc):
var glyphicons = pickFiles('vendor/bootstrap-sass-official/vendor/assets/fonts/bootstrap', {
    srcDir: '/',
    files: [
        'glyphicons-halflings-regular.*',
    ],
    destDir: '/assets/bootstrap'
});

// Merge the glyphicons with the ember app tree
module.exports = mergeTrees([
    app.toTree(),
    glyphicons
]);