RequireJS seems to be ignoring my path definitions ( I'm not calling require() in the html). Why?

1
votes

I've been researching this question a lot. I know a common issue is caused with asynchronous loading before require has been defined. I dont think that's the issue that I'm experiencing. I'm declaring baseURL and paths in a config file, but I always get an error that the scripts can't be found because it seems to ignore my paths and just look from the baseURL.

This is my folder structure

index.html
js/
  app/
     jsonLoader.js
     notionalAddGraph.js
  lib/
  config.js
  require.js

There's nothing in lib, but I'm mimicking the structure of a project that I'm working on. Here is the html for the page.

HTML:

<html>
<head>
    <title>Blah Blah Blah</title>
    <script data-main="js/config.js" src="js/require.js"></script>
    <script id="graphData" type="application/json">
    {
      "json": "Is better than",
      "global": "but it requires a change to the authoring",
      "environment": "also, because of the JSON.parse",
      "required": "it is probably slower too"
    }
    </script>

</head>

Here is the code for config.js

config.js:

require({
    baseUrl: 'js/lib',
    paths: {
      app: '../app'
    },
    urlArgs: 'bust=' + (new Date()).getTime()
});

require(['app/jsonLoader','app/notionalAddGraph'],
    function(require) {
      'use strict';
});

and here is the code for jsonLoader.js

jsonLoader.js:

define(function() {
  var jsonString = document.getElementById('graphData').textContent;
  return JSON.parse(jsonString);
})

annnd here is the code for notionalAddGraph.js

notionalAddGraph.js:

define([
  'jsonLoader'
], function(json) {

  console.log(json.required);
});

so every time that I try this, require tries to load js/lib/jsonloader.js and fails because it should be looking under app, not lib. Oddly enough, if I intentionally specify the incorrect path when I define app, requireJS will at least look for jsonLoader where I told it to. Obviously though, its not there, because I specified the wrong path. When I specify the correct path, it doesn't work and tries to load from baseURL. I've tried changing everything I can imagine for config.js, but nothing seems to work. I've copied the format directly from requireJS API, but still nothing. Does anyone have an idea as to what I might be doing wrong?

2
javascripthtmlrequirejs

2 Answers

1
votes

In notionalAddGraph.js you have define with 'jsonLoader' so its looking in the correct path as expected, add ../ to your define and should work correctly

0
votes

Here's what i'd try

First, call the scripts using an absolute path (you can rollback this change later, but it's just to be on the safe side)

<script data-main="/js/config.js" src="/js/require.js"></script>

Second, declare the config parameters using requirejs.config. I guess that the way you're doing now they are just variables.

requirejs.config({
    baseUrl: 'js/lib',
    paths: {
      app: '../app'
    },
    urlArgs: 'bust=' + (new Date()).getTime()
});

Third, the return of the jsonLoader isn't the require object, but the object that comes from parsing the jsonString. The way you're doing now is replacing the require object.

require(['app/jsonLoader','app/notionalAddGraph'],  function(jsonObject) {
      'use strict';
    console.log('require is still', require, 'and jsonobject is ',jsonObject);
});