brunch / handlebars-brunch

Adds Handlebars templates support to brunch
21 stars 30 forks source link

can't compile? #67

Closed dmitry-saritasa closed 6 years ago

dmitry-saritasa commented 6 years ago
handlebars.runtime.js:33 Uncaught TypeError: Cannot set property 'Handlebars' of undefined
    at webpackUniversalModuleDefinition (handlebars.runtime.js:33)
    at handlebars.runtime.js:37

package.json

{
  "name": "SaritasaAnalytics",
  "version": "0.0.0",
  "description": "Description",
  "private": true,
  "author": "http://saritasa.com",
  "license": "BSD",
  "repository": "git://github.com/username/repository.git",
  "scripts": {
    "clean": "rm -rf .ui",
    "livereload": "livereload templates,public",
    "start": "npm run clean && LOGGY_STACKS=1 brunch watch --server",
    "build": "npm run clean && LOGGY_STACKS=1 brunch build",
    "build_prod": "npm run clean && brunch build --production",
    "test": "npm run clean && brunch b --env test",
    "lint": "eslint --cache 'ui/**/*.js'; eslint --cache 'templates/**/*.html'; sass-lint -v -q",
    "poststart": "cowsay -f dragon The Build Is Complete! Do not forget to apply migrations!"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2.7.1",
    "babel-brunch": "~6.1",
    "babel-plugin-module-resolver": "^2.7.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-airbnb": "^2.4.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-0": "^6.24.1",
    "blessed": "^0.1.81",
    "brunch": "^2",
    "clean-css-brunch": "^2.10.0",
    "copycat-brunch": "^1.1.0",
    "css-brunch": "^2.10.0",
    "es6-promise": "^4.1.1",
    "eslint": "^4.8.0",
    "eslint-config-airbnb-base": "^12.0.1",
    "eslint-import-resolver-babel-module": "^3.0.0",
    "eslint-import-resolver-configurable": "^0.1.3",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "handlebars-brunch": "^2.10",
    "hmr-brunch": "^0.1.1",
    "jasmine-core": "^2.8",
    "javascript-brunch": "^2.10.0",
    "karma-brunch": "^1.0.6",
    "livereload": "^0.6.2",
    "mocha": "^4.0.0",
    "phantomjs-prebuilt": "^2.1.15",
    "sass-brunch": "^2.10",
    "uglify-js-brunch": "^2.10.0"
  },
  "dependencies": {
    "alertify.js": "^1.0.12",
    "axios": "^0.16.2",
    "bootstrap": "~3.3.7",
    "bootstrap-datepicker": "^1.7.1",
    "bootstrap-select": "^1.12.4",
    "bootstrap-table": "^1.11.2",
    "datatables": "^1.10.13",
    "datatables.net": "^1.10.16",
    "datatables.net-bs": "^1.10.16",
    "font-awesome": "^4.7.0",
    "handlebars": "^4.0.10",
    "jquery": "^3.2.1",
    "jquery-validation": "^1.17.0",
    "jquery.nicescroll": "^3.7.6",
    "jquerypp": "^2.0.2",
    "lodash": "^4.17.4",
    "store": "^2.0.12",
    "string": "^3.3.3",
    "underscore": "~1.8.3"
  }
}

brunch-config.js

// -------------------------------------------------------
// Check against what environment we work
// =======================================================
const environment = process.env.NODE_ENV;
const production = environment === 'production';

let jsFkey = 'js/frontend.js';
let jsBkey = 'js/backend.js';
let jsVkey = 'js/vendor.js';
let cssFkey = 'css/frontend.css';
let cssBkey = 'css/backend.css';
let cssVkey = 'css/vendor.css';

// adjust file names
if (production) {
  jsFkey = 'js/frontend.min.js';
  jsBkey = 'js/backend.min.js';
  jsVkey = 'js/vendor.min.js';
  cssFkey = 'css/frontend.min.css';
  cssBkey = 'css/backend.min.css';
  cssVkey = 'cssvendor.min.css';
}

// -------------------------------------------------------
// Brunch paths
// =======================================================
exports.paths = {
  watched: ['ui'],
  public: '.ui'
};

// -------------------------------------------------------
// Brunch instructions for css and js assembly
// =======================================================
exports.files = {
  javascripts: {
    joinTo: {
      [jsFkey]: /^ui\/frontend/,
      [jsBkey]: /^ui\/backend/,
      [jsVkey]: /^node_modules/
    }
  },
  stylesheets: {
    joinTo: {
      [cssFkey]: /^ui\/frontend/,
      [cssBkey]: /^ui\/backend/,
      [cssVkey]: /^node_modules/
    }
  }
};

// -------------------------------------------------------
// Make javascript globals available to window interface
// =======================================================
exports.npm = {
  enabled: true,
  globals: {
    jQuery: 'jquery',
    $: 'jquery',
    bootstrap: 'bootstrap',
    selectpicker: 'bootstrap-select',
    datepicker: 'bootstrap-datepicker',
    table: 'bootstrap-table',
    datatables: 'datatables'
  },
  styles: {

    bootstrap: ['dist/css/bootstrap.css'],
    'bootstrap-select': ['dist/css/bootstrap-select.css'],
    'bootstrap-datepicker': ['dist/css/bootstrap-datepicker.css'],
    'bootstrap-table': ['dist/css/bootstrap-table.css'],
    'font-awesome': ['css/font-awesome.css'],
    datatables: ['media/css/jquery.dataTables.css']
  }
};

// -------------------------------------------------------
// Define plugins options
// =======================================================
exports.plugins = {
  babel: {
    presets: [
      ['env', {
        targets: {
          browsers: ['last 2 versions', 'safari >= 7']
        }
      }], 'stage-0', 'airbnb'
    ]
  },
  autoReload: {
    enabled: true
  },
  sass: {
    mode: 'native',
    sourceMapEmbed: true
  },
  copycat: {
    fonts: [
      'node_modules/font-awesome/fonts',
      'node_modules/bootstrap/dist/fonts'
    ],
    verbose: false,
    onlyChanged: true
  },
  cleancss: {
    keepSpecialComments: 0,
    removeEmpty: true
  }
};

// -------------------------------------------------------
// To avoid getting empty files
// see: http://brunch.io/docs/troubleshooting
// =======================================================
exports.watcher = {
  awaitWriteFinish: true,
  usePolling: true
};

// -------------------------------------------------------
// Modules configuration
// see: http://brunch.io/docs/config#-modules-
// nameCleaner is used to reduce path to module like
// require('frontend/js/index') => ('index')
// autoRequire is used to get code called automatically
// at the end of merged file
// =======================================================

exports.modules = {
  nameCleaner(path) {
    return path
      .replace(/^ui\/frontend\/apps\//, 'f/')
      .replace(/^ui\/frontend\/common\/js\//, 'fc/')
      .replace(/^ui\/backend\/apps\//, 'b/')
      .replace(/^ui\/backend\/common\/js\//, 'bc/')
      .replace(/\/js\//, '/')
      .replace(/\/\//, '/');
  }
};

// exports.modules - {
//   autoRequire: {
//     'frontend/js/index': ['initialize']
//   }
// };

// -------------------------------------------------------
// Enable hot module reloading for JS files
// see: https://github.com/brunch/hmr-brunch
// =======================================================
// exports.hot = true;

code

// require common nodejs packages
// defined in package.json
require('handlebars/runtime');
// require internal common stuff
// that is prefixed with bc/ (backend common)
const sidebar = require('bc/sidebar');

// initialization function
(function init() {
  // put your initialization code here
  // console.log('Init');
  sidebar.enable({
    sidebarEl: '.sidebar',
    sidebarButtonEl: '#sidebarCollapse'
  });
}());

module.exports = {};

if I change require('handlebars/runtime'); -> require('handlebars');

I get the following:

handlebars.runtime.js:33 Uncaught TypeError: Cannot set property 'Handlebars' of undefined
    at webpackUniversalModuleDefinition (handlebars.runtime.js:33)
    at handlebars.runtime.js:37
webpackUniversalModuleDefinition @ handlebars.runtime.js:33
(anonymous) @ handlebars.runtime.js:37
(index):167 GET http://localhost:8000/static/js/handlebars/templates.js net::ERR_ABORTED
vendor.js:61 Uncaught Error: Cannot find module 'handlebars/dist/cjs/handlebars.runtime' from 'handlebars/dist/cjs/handlebars.js'
    at require (vendor.js:61)
    at expanded (vendor.js:34)
    at vendor.js:150
    at handlebars.js:12
    at handlebars.js:70
    at initModule (vendor.js:42)
    at require (vendor.js:59)
    at expanded (vendor.js:34)
    at vendor.js:150
    at index.js:11
dmitry-saritasa commented 6 years ago

fixed with ignore: [/web\/static\/vendor/, /node_modules/] in babel config of brunch-config

shvaikalesh commented 6 years ago

Yep, handlebars assumes old non-module environment with top-level this equal to window, while babel aggressively tries to emulate type=module, replacing top-level this with undefined.

We should add a note to README.md.