Error: Error: Module not already loaded loading "fs" from "undefined".

[dougludlow]

I'm trying to use Sass.js in the SystemJS builder. However, I'm receiving the following error:

Error: Error: Module not already loaded loading "fs" from "undefined".

I'm attempting to fix an issue in plugin-sass, but in updating the sass.js dependency, I see this error. sass.sync.js is being loaded, it has an emscripten module embedded in it, which requires 'fs'. Any ideas what's going on here?

This is occurring in [email protected] and [email protected].

[dougludlow]

I got past this error by changing the format to global as mentioned in #261. However, now I'm seeing a different error:

Error: ReferenceError: print is not defined

Oddly enough, if I manually add a function print() {} to the sass.sync.js it works, but I don't think that's the solution.

[dougludlow]

Looks as if, in the emscripten module, ENVIRONMENT_IS_SHELL is being set and it's therefore looking for a global print...

var ENVIRONMENT_IS_SHELL=!ENVIRONMENT_IS_WEB&&!ENVIRONMENT_IS_NODE&&!ENVIRONMENT_IS_WORKER;

if(ENVIRONMENT_IS_SHELL){if(!Module["print"])Module["print"]=print; ... }

[dougludlow]

Not sure the best way to proceed here. Is there a way in SystemJS to inject/define global variables such as print, and possibly scope them to the module?

[rodneyrehm]

@dougludlow maybe you want to investigate why emscripten is kicking off in shell mode.

[dougludlow]

When the format is cjs or amd, ENVIRONMENT_IS_NODE is set and the following error is emitted Error: Module not already loaded loading "fs" from "undefined". As far as I can tell, this is a bug with SystemJS. I don't understand why it can't load fs.

When I set the format to global, ENVIRONMENT_IS_SHELL is set (as stated above). It appears that the process object is set, but the require function is missing. window is obviously not set.

[dougludlow]

It appears the error is thrown from amd-helpers.js where a version of require is defined. So it must be that the native node require is not being called.

[guybedford]

@dougludlow more generally this is just about configuring SystemJS for compatibility with Node-based assumptions. jspm is designed exactly to do this configuration automatically when you do jspm install npm:sass.js.

By default SystemJS makes none of the Node environment assumptions - process is not provided, require('fs') does not exist.

To make this work you need to use SystemJS configuration to provide shim libraries, which might look something like:

System.config({
  map: {
    sass: 'node_modules/sass.js',
    process: 'path/to/process-shim',
    fs: 'path/to/fs-shim'
  },
  packages: {
    'node_modules/sass.js': {
      format: 'cjs',
      meta: {
        'dist/sass.sync.js': {
          globals: {
            process: 'process/global.js'
          }
        }
      }
    }
  }
});

when done manually, although I haven't tested the above.

[guybedford]

The specific Module not already loaded issue can be fixed by adding a deps: ['fs'] to the dist/sass.sync.js metadata.

[guybedford]

But there will be many more quirks...

[dougludlow]

Thanks @guybedford, I think I'm beginning to see. Here's the situation. I'm trying to test out a series of fixes to both sass.js and plugin-sass, but the fixes are in branches, so I've installed the branches via jspm. I guess the issue I'm running into is I'm installing plugin-sass via my github fork's branch, but I don't know how to make JSPM resolve the sass.js's feature branch as NPM.

Here's what I'm doing:

jspm install scss=github:dougludlow/plugin-sass@issue-26 -o "{ shim: { 'github:medialize/sass.js@importer-options': { registry:'npm' }}}"

But that doesn't appear to make any difference.

[dougludlow]

The sass.js branch hasn't been merged in yet and isn't available on npm, so in my branch I installed it like so:

jspm install sass.js=github:medialize/sass.js@importer-options -o "{ registry: 'npm' }"

[rodneyrehm]

Now, if that's your problem… sass.js 0.9.6 is now available on npm. ;)

[dougludlow]

Ha ha, thanks @rodneyrehm. I'll give that a go.

[dougludlow]

@rodneyrehm yup, that works now. Thanks so much!

@guybedford I'm still curious though, is the only way to shim a github package dependency via meta in the config.js or is there a way to pass in an override in jspm install?

[guybedford]

From your override example above, it should actually be:

jspm install github:medialize/sass.js@importer-options -o "{ registry:'npm' }"

Or alternatively just put:

{
  "overrides": {
    "github:medialize/sass.js@importer-options": {
      "registry": "npm"
    }
  }
}

In the package.json.

[dougludlow]

Thanks @guybedford!