StealJS error: Cross origin requests are not supported for protocol schemes - cross-domain

Question

I am having an error like this:
XMLHttpRequest cannot load file:///Users/mshin/workspace/spirent/trinity/trinity-link/public/node_modules/can/view/stache/system.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
home.js:
import can from 'can';
import template from './home.stache!';
export default can.Component.extend({
tag: 'home',
template: template
});
The build config in Gruntfile:
"steal-build": {
default: {
options: {
system: {
config: "package.json!npm",
bundlesPath: "production"
},
buildOptions: {
minify: true,
sourceMaps: true
}
}
}
}
I don't know why I am getting this error message in production mode. In development environment, it works fine. Also, it is fine on test environment. I am running QUnit test with testee.
home_test.js:
import QUnit from 'steal-qunit';
import ViewModel from 'components/home/home';
import can from 'can';
import stache from 'can/view/stache/';
import $ from 'jquery';
var template = can.stache('<home></home>'),
$component;
QUnit.module('home component', {
setup: function() {
$('#trinity-js-tests').html(template());
$component = $('#trinity-js-tests').find('home');
}
});
QUnit.test('title tag', function() {
QUnit.ok($component.find('h1'), 'Page shows title with <h1> tag');
});
QUnit.test('title content', function() {
QUnit.strictEqual($component.find('h1').text(), 'This is homepage.', 'Title is "This is homepage."');
});
However, if I change the home.js to like this:
import can from 'can';
export default can.Component.extend({
tag: 'home',
template: can.view('components/home/home.stache)
});
It works fine in production and development environment, but in test the last test case fails.
1) QUnit "public/tests/test.html" on PhantomJS 1.9.8 / Mac OS X 0.0.0: home component title content Title is "This is homepage.":
Error: Expected This is homepage. but was
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1340
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1907
at :33
at http://localhost:3996/public/tests/test.html?__token=k8l88m:895
at http://localhost:3996/public/tests/test.html?__token=k8l88m:1024
at process (http://localhost:3996/public/tests/test.html?__token=k8l88m:583)
at begin (http://localhost:3996/public/tests/test.html?__token=k8l88m:628)
at http://localhost:3996/public/tests/test.html?__token=k8l88m:644

Answer 1

It looks like you are loading it from the file:// protocol, is that correct? If so that's likely your problem.

Answer 2

I found what I missed in the code.
main.js
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';
I didn't import can/view/stache/system in it.
To use system plugin in can.stache, I need to import the specific file to main javascript file.
So, the file should be
import $ from 'jquery';
import _ from 'lodash';
import stache from 'can/view/stache/';
import 'can/view/stache/system'; // this is the added line
import can from 'can';
import 'components/route/';
import 'less/trinity.less!';