Problems with require

StealJS
1

Trying to get to grips with StealJS and following your example in stealjs website at guides - continuous builds’

(http://stealjs.com/docs/steal-tools.guides.watch_mode.html)

Everything works fine UPTO

var can = require(‘can’); (in Develop your application, about half way down the page)

All I get when I try to run it is a browser error that 'require is not a function.

wtf ???

I have run ‘npm install require --save’ and it is included in the node_modules in the subdir as expected.

‘npm run build’ does not complain so I have NO F** CLUE what is going on.

Help much appreciated.

I’m fairly experienced in the use of CanJS for complex applications but have not yet used steal/require/module loaders as my legacy technology restrictions make it very hard to integrate (js ‘files’ etc are in IDE binary blobs …) but I’m breaking out of the legacy into a trad file based setup, and smack into this.

Ron

2

Hey @ron.yuen, sorry you’ve run into this problem. I’ll take a look at that guide and see if there’s a problem. In the mean time you might want to check out the Quick Start and then Progressive Loading guides which were recently updated.

3

Mathew

Quick off the mark !!

The bits you pointed at are fine, no issues. But so far I cannot ‘require’ anything which is sort of train smashish …

Just so you guys know I apprceiate the work that goes into this framework which has become an integral part of all the apps I do (for a BIG outfilt)

Ron

4

Can you give a code example? Using require should be fine, but if you show me some code I can maybe help.

5

Matthew

The code is EXACTLY as per the webpage

http://stealjs.com/docs/steal-tools.guides.progressive_loading.html

I have cut and paste into index.html,app.js,homepage.js,login.js etc and

IT ALL WORKS

But then I add
var can = require(“can”);
to app.js, run npm build and then run in the browser and it all falls over. ‘require is not a function’.

I have a require in node_modules courtesy of ‘npm install require – save’ I notice, however, that there is no ‘require.js’ which I kindof expected to see

Am I installing the correct ‘require’ ???

The node and npm installations were made a couple of days ago and are ABSOLUTELY clean, no prior history.

I’m running nginx / openresty as the http server

If I use the ‘import can from ‘can’;’ syntax instead of require then it all works and I can go on to use can.stache / templates etc as I’m used to

the mere presence of the require() in the source triggers a collapse, this is what Firefox has to say

18:43:00.627 TypeError: require is not a function
Stack trace:
.execute@http://localhost:8080/eSurvey2/node_modules/steal/steal.js line 2890 > eval:10:13
doExecute@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2135:7
ensureEvaluated@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2182:11
doEnsureEvaluated@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2145:15
evaluateLoadedModule@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2120:5
Loader.prototype.import/</<@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2310:20
tryCatchReject@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:1183:28
runContinuation1@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:1142:4
makePromise/Fulfilled.prototype.when@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:930:4
makePromise/Pending.prototype.run@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:821:5
[3]</</</Scheduler.prototype._drain@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:97:4
Scheduler/this.drain@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:62:4
run@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:268:4
.execute@http://localhost:8080/eSurvey2/node_modules/steal/steal.js line 2890 > eval:10:13
doExecute@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2135:7
ensureEvaluated@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2182:11
doEnsureEvaluated@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2145:15
evaluateLoadedModule@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2120:5
Loader.prototype.import/</<@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:2310:20
tryCatchReject@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:1183:28
runContinuation1@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:1142:4
makePromise/Fulfilled.prototype.when@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:930:4
makePromise/Pending.prototype.run@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:821:5
[3]</</</Scheduler.prototype._drain@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:97:4
Scheduler/this.drain@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:62:4
run@http://localhost:8080/eSurvey2/node_modules/steal/steal.js:268:4
1 steal.js:6387:6
steal.js:6387
tryCatchReject() steal.js:1183
runContinuation1() steal.js:1142
makePromise/Rejected.prototype.when() steal.js:963
makePromise/Pending.prototype.run() steal.js:821
[3]</</</Scheduler.prototype._drain() steal.js:97
Scheduler/this.drain() steal.js:62
run() steal.js:268

6

Hi everybody,

I got the same problem ans I solved it.
Working with this dependencies in package.json:

"dependencies": {
    "can": "^2.3.27",
    "jquery": "^2.2.4",
    "steal": "^0.16.41"
  }

@ron.yuen: do you have some multiline JS comment on your code (main.js) with “” inside?
I had a multiline comment linke the following, because i was trying different modules import methods (AMD and CommonJS):

/* import can from "can";
   import $ from "jquery"
*/

When I removed them, and all start working correctly.
I don’t know if is a steal problem or not but… lot of time seraching other, more complex issues, and at the end was this “nut”.

1 Like