Problems with require

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

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.

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

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

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

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