9

I have a front-end SPA using RequireJS (2.1.14) as module system. It basically bootstrap and load Backbone.Marionette app.

In main.js:

require.config ({
  baseUrl: '/js',
  waitSeconds: 200,
  nodeRequire: require,
  paths: {
    jquery: '//cdn/jquery.min',        
    underscore:'//cdn/underscore-min',
    // more plugins
  },
  shim: {
      // shimming stuff
  }
});

require(['marionette',
    'vent',
    'config/template',
    'app',
    'routers/main'
   ],
function (Marionette,
      vent,
      Template,
      nrtApp
) {
'use strict';

nrtApp.module ('Public.Main', function (Main, nrtApp, Backbone,Marionette, $, _) {
  nrtApp.start ();

  // this is where the error is:
  requirejs (['config'], function (config) {
    if (typeof config !== 'undefined') {config.log ('ok!');}
  });

});

});

The issue is, I would like load some npm packages (e.g npm install config) from RequireJS module. RequireJS can't seem to find npm node_modules directory which is sitting at different directory than RequireJS baseUrl directory.

Below is my directory structure:

my_project/
    app/
        public/
            js/
                main.js
                app.js
    node_modules/
        config/

Below is error message:

script error

It tried to load module from baseUrl directory.

How can I access npm module to from RequireJS module system in my use case?

peterh
  • 11,875
  • 18
  • 85
  • 108
Cheng Ping Onn
  • 687
  • 1
  • 8
  • 17
  • From client you can only access public folder. What is config in node_modules? If that module is also working on client then you gonna have to copy it into public/js to use it. – Molda Sep 27 '15 at 15:36
  • @Molda config is a npm module. Yes, I would want to use config in client app as well. – Cheng Ping Onn Oct 01 '15 at 13:34

1 Answers1

9

It is not possible to use RequireJS on the client (browser) to access files from node_modules. Files under node_modules must first be copied to a location that is accessible (under the public folder) before the client can access them. The documentation says RequireJS can access Node modules, but this only works for server-side JavaScript (when you want to use RequireJS-style module syntax in Node).

To use your config module in the client app, you must first transform it into a RequireJS-compatible module and copy it under public. This article explains how to automate this with package managers and build tools, and contains the quote that finally fixed my broken understanding of RequireJS + Node:

In order to use node modules on the browser you will need a build tool. This might bother you. If this is a deal breaker then by all means continue wasting your life copying and pasting code and arranging your script tags.

Leftium
  • 16,497
  • 6
  • 64
  • 99
  • 1
    The linked article does not seem to use RequireJS. In that case, adding `baseUrl: "../node_modules"` in RequireJS seems to be much straightforward, although it is still not explained why it is bad. – SOFe Jan 19 '19 at 10:51
  • you can do it but you have to specifically name the paths in your configuration file and it won't autoload anything you don't specify – Scott Dec 02 '20 at 21:09
  • (They also have to be already browser-capable, otherwise you need to modify them with something like Browserify first) – Scott Dec 02 '20 at 22:34