Javascript Trying to run AMIjs examples in local it does not work

657 Views Asked by At

Hello and thank you for reading this.

I would like to load the examples in local WebStorm IDE. In particular I am trying to load the loaders example: https://github.com/FNNDSC/ami/tree/dev/examples/viewers_upload

The problem I get is the default imports look like thay are not properly set: enter image description here

So if I try to run npm install enter image description here

I get this error: enter image description here

Can not install Node.js module: "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" install base/core/core.utils

Standard error:
npm ERR! code ENOLOCAL
npm ERR! Could not install from "base\core\core.utils" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\YonePC\AppData\Roaming\npm-cache\_logs\2018-01-16T18_50_29_864Z-debug.log

I thought it was related to my package.json but it looks like it has all the dependencies set up:

{
    "name": "ami.js",
    "version": "0.0.23-dev",
    "main": "build/ami.js",
    "keywords": [
        "ami",
        "ami.js",
        "three.js",
        "webgl",
        "dicom",
        "nifti",
        "awesome",
        "medical",
        "imaging",
        "xtk",
        "nrrd",
        "vtk",
        "stl",
        "trk"
    ],
    "author": {
        "name": "Nicolas Rannou",
        "email": "[email protected]",
        "url": "https://eunate.ch"
    },
    "license": "Apache-2.0",
    "repository": {
        "type": "git",
        "url": "https://fnndsc.github.io/ami"
    },
    "config": {
        "threeVersion": "87",
        "amiCDN": "https://cdnjs.cloudflare.com/ajax/libs/ami.js",
        "gaKey": "UA-39303022-3",
        "babel": "--module-bind js=babel-loader --colors --display-error-details"
    },
    "dependencies": {
        "dicom-parser": "1.7.3",
        "image-JPEG2000": "OHIF/image-JPEG2000#master",
        "jpeg-lossless-decoder-js": "1.2.3",
        "math-float32-to-binary-string": "^1.0.0",
        "nifti-reader-js": "v0.5.3",
        "nrrd-js": "^0.2.1",
        "pako": "1.0.1",
        "three": "0.87.0"
    },
    "scripts": {
        "build:ami": "webpack --config webpack.config.build.js",
        "build:ami:prod": "cross-env NODE_ENV=production yarn build:ami",
        "build:clean": "rimraf -rf build/*",
        "build:clean:hot": "rimraf -rf build/*.hot-update.*",
        "dev:ami": "webpack --config webpack.config.build.js --hot --watch --colors",
        "dist:ami": "yarn build:clean && yarn build:ami && yarn build:ami:prod && yarn doc",
        "dist:examples": "node ./scripts/buildDist.js && node ./scripts/router.js examples deploy",
        "dist:clean": "rimraf -rf dist/*",
        "analyze:ami": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami",
        "analyze:ami:prod": "cross-env NODE_WEBPACK_ANALYZE=true yarn build:ami:prod",
        "clean": "yarn build:clean && yarn dist:clean",
        "example": "node ./scripts/router.js examples",
        "lesson": "node ./scripts/router.js lessons",
        "gen:index:examples": "node ./scripts/genIndexFiles.js examples",
        "gen:index:examples:ga": "cross-env NODE_GA=true node ./scripts/genIndexFiles.js examples",
        "gen:index:lessons": "node ./scripts/genIndexFiles.js lessons",
        "gen:index:lessons:cdn": "node ./scripts/genIndexFiles.js lessons cdn",
        "test": "karma start",
        "lint": "eslint src/**/*.js",
        "doc": "jsdoc -p -r -R README.md -c jsdoc.json -d dist/doc src",
        "ami": "yarn lint && yarn dist:ami && yarn test",
        "deploy": "yarn dist:clean && yarn build:clean && yarn dist:ami && yarn dist:examples && gh-pages -d dist"
    },
    "devDependencies": {
        "babel-cli": "latest",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-env": "^1.6.0",
        "babel-runtime": "^6.26.0",
        "compression-webpack-plugin": "^1.0.1",
        "cross-env": "^3.2.3",
        "eslint": "latest",
        "eslint-config-google": "latest",
        "gh-pages": "latest",
        "glslify": "5.1.0",
        "jasmine-core": "latest",
        "jsdoc": "jsdoc3/jsdoc#master",
        "karma": "latest",
        "karma-chrome-launcher": "^2.2.0",
        "karma-jasmine": "latest",
        "karma-sinon": "^1.0.5",
        "karma-spec-reporter": "latest",
        "karma-webpack": "^2.0.4",
        "live-server": "^1.1.0",
        "puppeteer": "^0.13.0",
        "rimraf": "^2.6.1",
        "rollup-plugin-node-builtins": "^2.1.2",
        "shelljs": "latest",
        "sinon": "^2.0.0",
        "uglifyjs-webpack-plugin": "^1.0.0-beta.3",
        "webpack": "^3.7.1",
        "webpack-bundle-analyzer": "^2.9.0",
        "webpack-dev-server": "^2.9.1",
        "webpack-watch-livereload-plugin": "^0.0.1"
    },
    "engines": {
        "node": ">=6.9.0"
    }
}

In addition I looked and tried to find if I would have Node modules isntalled, but as it does not appear in the package.json they are not installed by default: enter image description here

However I do have node installed:

Microsoft Windows [Versión 6.3.9600]
(c) 2013 Microsoft Corporation. Todos los derechos reservados.

C:\Users\YonePC\WebstormProjects\ATLAS>node -v
v8.9.0

If I execute index.html it says on the developer console: enter image description here

'Uncaught SyntaxError: Unexpected identifier'

And the line being said is:

import CoreUtils from 'base/core/core.utils';

If I try to redo the imports with IDE's help, this is the result: enter image description here

After executing the updated index.html: enter image description here

viewers_upload.js:5 Uncaught SyntaxError: Unexpected identifier

And the line referenced is:

import HelpersLut from "../../src/helpers/helpers.lut";

If I try to use the web CDN library version with: enter image description here

I need to delete all imports and use the web library version's classes as follows: enter image description here

I can execute the index.html and trigger the loader:

enter image description here

However I can not do it infinitely because of the class to parseUrl is being on the disk library and not in the web library: enter image description here

The console says:

'Uncaught ReferenceError: CoreUtils is not defined
    at HTMLInputElement.readMultipleFiles (viewers_upload.js:429)
readMultipleFiles @ viewers_upload.js:429'

Could you help me please?

Thank you for your time reading this.

EDIT: I am still trying to get that example working on local. So far I have been able to include AMI library's files linking for example:

viewers_upload.js

enter image description here

let dataUrl = CoreUtils.parseUrl(evt.target.files[i].name);

Instead of the normal import generated by the IDE: enter image description here

import CoreUtils from "../../src/core/core.utils";

Using a direct load:

index.html

enter image description here

<script src="../../src/core/core.utils.js"></script>

However I can not keep doing this infinitely because of the core.utils.js uses import so then the browser reports an error:

Uncaught SyntaxError: Unexpected identifier

In line:

import Validators from './core.validators';

Could you help me please???

1

There are 1 best solutions below

0
On BEST ANSWER

To run an example you should:

  1. start dev server: yarn example <example name> (in your case yarn example viewers_upload)

  2. go to localhost:8081 in your web browser