CODEWITHSUNDEEP
javascriptjqueryhtmlrequirejs
borntyping
borntyping

Reputation: 3112

How can I load require.js from multiple paths, without using an absolute url?

I have a directory structure like this:

├── index.html
├── static
│   └── js
│       ├── main.js
│       ├── jquery.js
│       └── require.js
└── subfolder
    └── index.html

In my top-level index.html, I'm loading require.js like this, and it works:

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

However, in subfolder/index.html, I can't load require.js succesfully:

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

Which results in "Script error for: jquery", and the same for each dependency of my main module.

The baseUrl for require.js is set to static/js. Because these pages are intended to be used locally, I can't use an absolute url. How can I get require.js to work from the subfolders?

Contents of the main.js file:

require.config({
    baseUrl: 'static/js',
    paths: {
        'jquery': 'jquery-2.0.3',
    }
});

require(['jquery'], function($) { ... }

Upvotes: 1

Views: 1433

Answers (1)

borntyping
borntyping

Reputation: 3112

The solution was to not set baseUrl at all:

If no baseUrl is explicitly set in the configuration, the default value will be the location of the HTML page that loads require.js. If a data-main attribute is used, that path will become the baseUrl.

Removing the baseUrl setting resulted in the above example working correctly.

Upvotes: 2

Related Questions