Error loading "npm:[email protected]/browser.js"

Question

I have installed npm and jspm packages but I get the following error in my browser when i try running my code.

Error loading "npm:[email protected]/browser.js" at http://localhost:9000/jspm_packages/npm/[email protected]/browser.js.js Error loading "npm:[email protected]/browser.js" from "npm:[email protected]" at http://localhost:9000/jspm_packages/npm/[email protected] Not Found: http://localhost:9000/jspm_packages/npm/[email protected]/browser.js.js (WARNING: non-Error used)

The npm folder has the browser.js file but i still get the above error. Below is a snapshot of my jspm-package folder structure and package.json file with the devDepencies

jspm-package folder

package.json

"devDependencies": {
"almond": "^0.3.2",
"babel-core": "^5.8.38",
"chai": "^2.2.0",
"check-build": "^1.5.0",
"grunt": "^0.4.5",
"grunt-contrib-clean": "^0.6.0",
"grunt-contrib-copy": "^0.8.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-requirejs": "~0.4.4",
"grunt-serve": "^0.1.6",
"jsdoc": "^3.3.0-beta3",
"jspm": "^0.15.3",
"karma": "^0.12.31",
"karma-babel-preprocessor": "^5.1.0",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^0.1.8",
"karma-cli": "0.0.4",
"karma-coverage": "^0.3.1",
"karma-jspm": "^1.1.4",
"karma-mocha": "^0.1.10",
"karma-mocha-reporter": "^1.0.2",
"karma-sinon": "^1.0.4",
"load-grunt-config": "^0.7.2" },

"jscsConfig": {
"esnext": true},
"jspm": {
"directories": {
  "test": "test"
},
"devDependencies": {
  "babel": "npm:babel-core@^5.1.13",
  "babel-runtime": "npm:babel-runtime@^5.1.13",
  "core-js": "npm:core-js@^0.9.4"
}

I have tried uninstalling npm and installing it again, but it doesn't seem to work. Please help me in resolving this. Thanks in advance.

The config file looks like:

System.config({
  "baseURL": "/",
  "transpiler": "babel",
  "babelOptions": {
   "optional": [
   "runtime"
    ]
  },
  "paths": {
    "github:*": "jspm_packages/github/*.js",
    "npm:*": "jspm_packages/npm/*.js",
    "*": "*.js"
   },
  "defaultJSExtensions": true
   });

System.config({
  "map": {
    "babel": "npm:[email protected]",
    "babel-runtime": "npm:[email protected]",
    "core-js": "npm:[email protected]",
    "github:jspm/[email protected]": {
      "process": "npm:[email protected]"
     },
    "npm:[email protected]": {
    "process": "github:jspm/[email protected]"
     },
    "npm:[email protected]": {
      "fs": "github:jspm/[email protected]",
      "process": "github:jspm/[email protected]",
      "systemjs-json": "github:systemjs/[email protected]"
      }
  }
});

Hi Pavel, I have added the config file in my question. Thanks. — neha

Pavel Pavel · Accepted Answer · 2018-02-26T05:14:25

I think, the problem is there:

"defaultJSExtensions": true

It is deprecated setting, and docs recomends to specify such behaviour for every package separately.

The reason is that someone writes import "moduleName", and someone import "moduleName.js". The setting fixes first case, by always adding .js to the end of the module. As you can see from error message, systemjs is trying to load browser.js.js, so you should specify for babel package option defaultExtension: false to prevent .js.js problem.

Error loading "npm:[email protected]/browser.js"

1 Answers