Jasmine (ES6) can't find package.json - javascript

I'm using Exercism to learn Javascript, and with each exercise, a .spec.js file is provided, and they tell me to run it with Jasmine. I globally installed jasmine-es6 via npm, and when I run it, it errors out that it cannot find a package.json in the directory from which I am running the command:
ken#sub-zero:~/exercism/javascript/rna-transcription$ jasmine rna-transcription.spec.js
/usr/local/lib/node_modules/jasmine-es6/node_modules/esnext-async/lib/main.js:45
throw _context.t0;
^
Error: Cannot find module '/home/ken/exercism/javascript/rna-transcription/package.json'
at Function.Module._resolveFilename (module.js:326:15)
at Function.Module._load (module.js:277:25)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object.runModule [as module] (/usr/local/lib/node_modules/jasmine-es6/node_modules/dist-es6/lib/run.js:13:21)
at _callee$ (/usr/local/lib/node_modules/jasmine-es6/bin/jasmine.js:45:17)
at tryCatch (/usr/local/lib/node_modules/jasmine-es6/node_modules/regenerator-runtime/runtime.js:65:40)
at GeneratorFunctionPrototype.invoke [as _invoke] (/usr/local/lib/node_modules/jasmine-es6/node_modules/regenerator-runtime/runtime.js:299:22)
at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/usr/local/lib/node_modules/jasmine-es6/node_modules/regenerator-runtime/runtime.js:117:21)
at step (/usr/local/lib/node_modules/jasmine-es6/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
I have no npm packages installed locally. I'm running Ubuntu 16.04. It might be worth noting that I had installed the pre-ES6 versions of node and jasmine, uninstalled them, and installed the ES6 versions. Here is the output of npm list:
javascript#1.0.0 /home/ken/exercism/javascript
└─┬ jasmine-es6#0.4.3
├─┬ babel-runtime#6.26.0
│ ├── core-js#2.5.1
│ └── regenerator-runtime#0.11.0
├─┬ dist-es6#0.2.5
│ ├── babel#6.23.0
│ ├─┬ babel-cli#6.26.0
│ │ ├─┬ babel-polyfill#6.26.0
│ │ │ └── regenerator-runtime#0.10.5
│ │ ├─┬ chokidar#1.7.0
│ │ │ ├─┬ anymatch#1.3.2
│ │ │ │ ├─┬ micromatch#2.3.11
│ │ │ │ │ ├─┬ arr-diff#2.0.0
│ │ │ │ │ │ └── arr-flatten#1.1.0
│ │ │ │ │ ├── array-unique#0.2.1
│ │ │ │ │ ├─┬ braces#1.8.5
│ │ │ │ │ │ ├─┬ expand-range#1.8.2
│ │ │ │ │ │ │ └─┬ fill-range#2.2.3
│ │ │ │ │ │ │ ├── is-number#2.1.0
│ │ │ │ │ │ │ ├── isobject#2.1.0
│ │ │ │ │ │ │ ├─┬ randomatic#1.1.7
│ │ │ │ │ │ │ │ ├─┬ is-number#3.0.0
│ │ │ │ │ │ │ │ │ └── kind-of#3.2.2
│ │ │ │ │ │ │ │ └── kind-of#4.0.0
│ │ │ │ │ │ │ └── repeat-string#1.6.1
│ │ │ │ │ │ ├── preserve#0.2.0
│ │ │ │ │ │ └── repeat-element#1.1.2
│ │ │ │ │ ├─┬ expand-brackets#0.1.5
│ │ │ │ │ │ └── is-posix-bracket#0.1.1
│ │ │ │ │ ├── extglob#0.3.2
│ │ │ │ │ ├── filename-regex#2.0.1
│ │ │ │ │ ├─┬ kind-of#3.2.2
│ │ │ │ │ │ └── is-buffer#1.1.6
│ │ │ │ │ ├─┬ object.omit#2.0.1
│ │ │ │ │ │ ├─┬ for-own#0.1.5
│ │ │ │ │ │ │ └── for-in#1.0.2
│ │ │ │ │ │ └── is-extendable#0.1.1
│ │ │ │ │ ├─┬ parse-glob#3.0.4
│ │ │ │ │ │ ├── glob-base#0.3.0
│ │ │ │ │ │ └── is-dotfile#1.0.3
│ │ │ │ │ └─┬ regex-cache#0.4.4
│ │ │ │ │ └─┬ is-equal-shallow#0.1.3
│ │ │ │ │ └── is-primitive#2.0.0
│ │ │ │ └─┬ normalize-path#2.1.1
│ │ │ │ └── remove-trailing-separator#1.1.0
│ │ │ ├── async-each#1.0.1
│ │ │ ├── UNMET OPTIONAL DEPENDENCY fsevents#^1.0.0
│ │ │ ├── glob-parent#2.0.0
│ │ │ ├─┬ is-binary-path#1.0.1
│ │ │ │ └── binary-extensions#1.10.0
│ │ │ ├─┬ is-glob#2.0.1
│ │ │ │ └── is-extglob#1.0.0
│ │ │ └─┬ readdirp#2.1.0
│ │ │ ├─┬ readable-stream#2.3.3
│ │ │ │ ├── core-util-is#1.0.2
│ │ │ │ ├── isarray#1.0.0
│ │ │ │ ├── process-nextick-args#1.0.7
│ │ │ │ ├── safe-buffer#5.1.1
│ │ │ │ ├── string_decoder#1.0.3
│ │ │ │ └── util-deprecate#1.0.2
│ │ │ └── set-immediate-shim#1.0.1
│ │ ├── commander#2.11.0
│ │ ├── fs-readdir-recursive#1.0.0
│ │ ├─┬ output-file-sync#1.1.2
│ │ │ ├── graceful-fs#4.1.11
│ │ │ └── object-assign#4.1.1
│ │ └─┬ v8flags#2.1.1
│ │ └── user-home#1.1.1
│ ├─┬ babel-core#6.26.0
│ │ ├─┬ babel-code-frame#6.26.0
│ │ │ ├─┬ chalk#1.1.3
│ │ │ │ ├── ansi-styles#2.2.1
│ │ │ │ ├── escape-string-regexp#1.0.5
│ │ │ │ ├─┬ has-ansi#2.0.0
│ │ │ │ │ └── ansi-regex#2.1.1
│ │ │ │ ├── strip-ansi#3.0.1
│ │ │ │ └── supports-color#2.0.0
│ │ │ ├── esutils#2.0.2
│ │ │ └── js-tokens#3.0.2
│ │ ├─┬ babel-generator#6.26.0
│ │ │ ├─┬ detect-indent#4.0.0
│ │ │ │ └─┬ repeating#2.0.1
│ │ │ │ └─┬ is-finite#1.0.2
│ │ │ │ └── number-is-nan#1.0.1
│ │ │ ├── jsesc#1.3.0
│ │ │ └── trim-right#1.0.1
│ │ ├── babel-helpers#6.24.1
│ │ ├── babel-messages#6.23.0
│ │ ├─┬ babel-register#6.26.0
│ │ │ ├─┬ home-or-tmp#2.0.0
│ │ │ │ ├── os-homedir#1.0.2
│ │ │ │ └── os-tmpdir#1.0.2
│ │ │ ├─┬ mkdirp#0.5.1
│ │ │ │ └── minimist#0.0.8
│ │ │ └── source-map-support#0.4.18
│ │ ├── babel-template#6.26.0
│ │ ├─┬ babel-traverse#6.26.0
│ │ │ ├── globals#9.18.0
│ │ │ └─┬ invariant#2.2.2
│ │ │ └── loose-envify#1.3.1
│ │ ├─┬ babel-types#6.26.0
│ │ │ └── to-fast-properties#1.0.3
│ │ ├── babylon#6.18.0
│ │ ├── convert-source-map#1.5.0
│ │ ├─┬ debug#2.6.9
│ │ │ └── ms#2.0.0
│ │ ├── json5#0.5.1
│ │ ├── lodash#4.17.4
│ │ ├─┬ minimatch#3.0.4
│ │ │ └─┬ brace-expansion#1.1.8
│ │ │ ├── balanced-match#1.0.0
│ │ │ └── concat-map#0.0.1
│ │ ├── path-is-absolute#1.0.1
│ │ ├── private#0.1.8
│ │ ├── slash#1.0.0
│ │ └── source-map#0.5.7
│ ├─┬ babel-plugin-transform-decorators-legacy#1.3.4
│ │ └── babel-plugin-syntax-decorators#6.13.0
│ ├── babel-plugin-transform-runtime#6.23.0
│ ├─┬ babel-preset-latest#6.24.1
│ │ ├─┬ babel-preset-es2015#6.24.1
│ │ │ ├── babel-plugin-check-es2015-constants#6.22.0
│ │ │ ├── babel-plugin-transform-es2015-arrow-functions#6.22.0
│ │ │ ├── babel-plugin-transform-es2015-block-scoped-functions#6.22.0
│ │ │ ├── babel-plugin-transform-es2015-block-scoping#6.26.0
│ │ │ ├─┬ babel-plugin-transform-es2015-classes#6.24.1
│ │ │ │ ├── babel-helper-define-map#6.26.0
│ │ │ │ ├── babel-helper-function-name#6.24.1
│ │ │ │ ├── babel-helper-optimise-call-expression#6.24.1
│ │ │ │ └── babel-helper-replace-supers#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-computed-properties#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-destructuring#6.23.0
│ │ │ ├── babel-plugin-transform-es2015-duplicate-keys#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-for-of#6.23.0
│ │ │ ├── babel-plugin-transform-es2015-function-name#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-literals#6.22.0
│ │ │ ├── babel-plugin-transform-es2015-modules-amd#6.24.1
│ │ │ ├─┬ babel-plugin-transform-es2015-modules-commonjs#6.26.0
│ │ │ │ └── babel-plugin-transform-strict-mode#6.24.1
│ │ │ ├─┬ babel-plugin-transform-es2015-modules-systemjs#6.24.1
│ │ │ │ └── babel-helper-hoist-variables#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-modules-umd#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-object-super#6.24.1
│ │ │ ├─┬ babel-plugin-transform-es2015-parameters#6.24.1
│ │ │ │ ├── babel-helper-call-delegate#6.24.1
│ │ │ │ └── babel-helper-get-function-arity#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-shorthand-properties#6.24.1
│ │ │ ├── babel-plugin-transform-es2015-spread#6.22.0
│ │ │ ├─┬ babel-plugin-transform-es2015-sticky-regex#6.24.1
│ │ │ │ └── babel-helper-regex#6.26.0
│ │ │ ├── babel-plugin-transform-es2015-template-literals#6.22.0
│ │ │ ├── babel-plugin-transform-es2015-typeof-symbol#6.23.0
│ │ │ ├─┬ babel-plugin-transform-es2015-unicode-regex#6.24.1
│ │ │ │ └─┬ regexpu-core#2.0.0
│ │ │ │ ├── regenerate#1.3.3
│ │ │ │ ├── regjsgen#0.2.0
│ │ │ │ └─┬ regjsparser#0.1.5
│ │ │ │ └── jsesc#0.5.0
│ │ │ └─┬ babel-plugin-transform-regenerator#6.26.0
│ │ │ └── regenerator-transform#0.10.1
│ │ ├─┬ babel-preset-es2016#6.24.1
│ │ │ └─┬ babel-plugin-transform-exponentiation-operator#6.24.1
│ │ │ ├─┬ babel-helper-builder-binary-assignment-operator-visitor#6.24.1
│ │ │ │ └── babel-helper-explode-assignable-expression#6.24.1
│ │ │ └── babel-plugin-syntax-exponentiation-operator#6.13.0
│ │ └─┬ babel-preset-es2017#6.24.1
│ │ ├── babel-plugin-syntax-trailing-function-commas#6.22.0
│ │ └─┬ babel-plugin-transform-async-to-generator#6.24.1
│ │ ├── babel-helper-remap-async-to-generator#6.24.1
│ │ └── babel-plugin-syntax-async-functions#6.13.0
│ ├─┬ babel-preset-stage-0#6.24.1
│ │ ├─┬ babel-plugin-transform-do-expressions#6.22.0
│ │ │ └── babel-plugin-syntax-do-expressions#6.13.0
│ │ ├─┬ babel-plugin-transform-function-bind#6.22.0
│ │ │ └── babel-plugin-syntax-function-bind#6.13.0
│ │ └─┬ babel-preset-stage-1#6.24.1
│ │ ├─┬ babel-plugin-transform-class-constructor-call#6.24.1
│ │ │ └── babel-plugin-syntax-class-constructor-call#6.18.0
│ │ ├─┬ babel-plugin-transform-export-extensions#6.22.0
│ │ │ └── babel-plugin-syntax-export-extensions#6.13.0
│ │ └─┬ babel-preset-stage-2#6.24.1
│ │ ├── babel-plugin-syntax-dynamic-import#6.18.0
│ │ ├─┬ babel-plugin-transform-class-properties#6.24.1
│ │ │ └── babel-plugin-syntax-class-properties#6.13.0
│ │ ├─┬ babel-plugin-transform-decorators#6.24.1
│ │ │ └─┬ babel-helper-explode-class#6.24.1
│ │ │ └── babel-helper-bindify-decorators#6.24.1
│ │ └─┬ babel-preset-stage-3#6.24.1
│ │ ├─┬ babel-plugin-transform-async-generator-functions#6.24.1
│ │ │ └── babel-plugin-syntax-async-generators#6.13.0
│ │ └─┬ babel-plugin-transform-object-rest-spread#6.26.0
│ │ └── babel-plugin-syntax-object-rest-spread#6.13.0
│ ├── dedent#0.6.0
│ ├─┬ fs-extra-promise-es6#0.1.1
│ │ └─┬ fs-extra#0.26.7
│ │ ├── jsonfile#2.4.0
│ │ ├── klaw#1.3.1
│ │ └── rimraf#2.6.2
│ └── register-module#0.0.2
├── es6-promise#4.1.1
├─┬ esnext-async#0.0.9
│ └── zen-observable#0.3.0
├─┬ jasmine#2.8.0
│ ├── exit#0.1.2
│ ├─┬ glob#7.1.2
│ │ ├── fs.realpath#1.0.0
│ │ ├─┬ inflight#1.0.6
│ │ │ └── wrappy#1.0.2
│ │ ├── inherits#2.0.3
│ │ └── once#1.4.0
│ └── jasmine-core#2.8.0
└── node-promise-es6#0.3.2
Does anyone have any idea why I can't get this to work? Thanks!

Related

Configure Rollup (under Vite) build to create separate bundles with theirs assets

Need your help )
I'm stuck with question - how to configure Rollup build to achieve next build structure.
For example - let's assume that folder structure (it's possible to change it) is:
├── src/
│ ├── common-assets/
│ │ └── ...
│ └-- sections/
│ ├── first-section/
│ │ ├── first-app/
│ │ │ ├── app/
│ │ │ │ ├── app-assets/
│ │ │ │ │ └── ...
│ │ │ │ ├── app-components/
│ │ │ │ │ └── ...
│ │ │ │ └-- ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ ├── second-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ └-- ...
│ ├── second-section/
│ │ ├── first-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ ├── index.html
│ │ ├── second-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ └-- ...
│ └-- ...
├── index.html
├── main.ts
├── package.json
└── vite.config.ts
Folder sections consists of group folders. Each group folder (first-section, second-section, ...) groups apps of particular kind.
That's what I need to get after build done inside dist directory:
├── first-section/
│ ├── first-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ ├── second-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ └-- ...
├── second-section/
│ ├── first-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ ├── second-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ └-- ...
└-- ...
So, each *-section directory should includes common-assets and it's own index.html + bundle.js files.
Each app (first-app, second-app, ...) will be used and served as separate application (with it's own store/routing/etc).
I am struggling as well to do this with vite. I think vite is not intended for this usecase. There is a workaround I did, that maybe you can adapt to your purposes.
Basically, I have two html files I want to fill: app1.html and app2.html.
Each app's source code is in its own directory: src/app1 and src/app2.
The apps share very few resources, but I still want to build those two in one go.
My structure is as follows:
├── app1.html
├── app2.html
├── src
│ ├── app1
│ │ ├── App.svelte
│ │ ├── components
│ │ │ └── Component.svelte
│ │ └── main.ts
│ ├── app2
│ │ ├── App.svelte
│ │ ├── components
│ │ │ └── Component.svelte
│ │ └── main.ts
│ ├── shared
│ │ ├── global.css
│ │ └── shared.ts
│ └── vite-env.d.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
You can see there are two separate apps: src/app1 and src/app2 with similar structure.
I could not find a way to build them separately using only one call to defineConfig, so basically I build the apps separately, using the emptyOutDir: false. This way I won't lose one build when doing the other.
Then, I created some scripts in my package.json:
"scripts": {
"build": "vite build",
"build:app1": "vite build",
"build:app2": "vite build",
"build:all": "pnpm build:app1 && pnpm build:app2",
...
},
The good part about this, is that from vite.config.ts i can access the name of the command using process.env.npm_lifecycle_event. It will be set to build:app1 if I do pnpm build:app1. I can use this to choose which part of the source code to build.
This is my vite.config.ts:
import { defineConfig } from "vite";
import { svelte } from "#sveltejs/vite-plugin-svelte";
const buildScript = process.env.npm_lifecycle_event;
const app = buildScript.includes(":") ? buildScript.split(":")[1] : "app1";
const buildConfig = {
rootHtml: `./${app}.html`,
entryFileNames: `${app}/${app}.js`,
assetFileNames: `${app}/${app}.[ext]`,
};
export default defineConfig({
plugins: [svelte()],
build: {
rollupOptions: {
input: { app: buildConfig.rootHtml },
output: {
entryFileNames: buildConfig.entryFileNames,
assetFileNames: buildConfig.assetFileNames,
},
},
emptyOutDir: false,
},
server: { open: buildConfig.rootHtml },
});
After running pnpm build:all, the dist folder should look like this:
dist
├── app1
│ ├── app1.js
│ └── app1.css
├── app1.html
├── app2
│ ├── app2.js
│ └── app2.css
└── app2.html
I hope this helps. I may try to use rollup instead of vite to see if I can do it more elegantly, but this workaround helped me achieve my goal.

Django: Refused to apply style from ... because its MIME type ('text/html') is not a supported stylesheet MIME type

i am trying to connet my style.css in django template using the static files {% static 'assets/css/style.css' %} but i keep seeing this error Refused to apply style from 'http://127.0.0.1:8000/assets/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.. NOTE: when i copy my css and manually paste it in a style tag inside the section everything works fine, but my css have over 23,000 lines of code and it's too much to be sitting in the head section of my project. Please how do i go about fixing this error.
index.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Favicon -->
<link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Heebo:wght#400;500;700&family=Roboto:wght#400;500;700&display=swap">
<!-- Plugins CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/font-awesome/css/all.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/tiny-slider/tiny-slider.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/glightbox/css/glightbox.css' %}">
<!-- Theme CSS -->
<link id="style-switch" rel="stylesheet" type="text/css" href="{% static '/assets/css/style.css' %}">
</head>
tree
├───base
│ ├───migrations
│ │ └───__pycache__
│ └───__pycache__
├───course
│ ├───migrations
│ │ └───__pycache__
│ ├───templatetags
│ │ └───__pycache__
│ └───__pycache__
├───dashboard
│ ├───migrations
│ │ └───__pycache__
│ └───__pycache__
├───dexxaedprj
│ └───__pycache__
├───static
│ ├───assets
│ │ ├───css
│ │ │ ├───components
│ │ │ │ └───vendor
│ │ │ └───custom
│ │ │ ├───forms
│ │ │ └───helper
│ │ ├───images
│ │ │ ├───avatar
│ │ │ ├───client
│ │ │ ├───courses
│ │ │ │ └───4by3
│ │ │ ├───element
│ │ │ └───flags
│ │ ├───js
│ │ └───vendor
│ │ ├───bootstrap
│ │ │ ├───dist
│ │ │ │ └───js
│ │ │ ├───js
│ │ │ │ └───src
│ │ │ │ ├───dom
│ │ │ │ └───util
│ │ │ ├───node_modules
│ │ │ │ └───#popperjs
│ │ │ │ └───core
│ │ │ │ └───lib
│ │ │ │ ├───dom-utils
│ │ │ │ ├───modifiers
│ │ │ │ └───utils
│ │ │ └───scss
│ │ │ ├───forms
│ │ │ ├───helpers
│ │ │ ├───mixins
│ │ │ ├───utilities
│ │ │ └───vendor
│ │ ├───bootstrap-icons
│ │ │ └───fonts
│ │ ├───font-awesome
│ │ │ ├───css
│ │ │ └───webfonts
│ │ ├───glightbox
│ │ │ ├───css
│ │ │ └───js
│ │ ├───purecounterjs
│ │ │ └───dist
│ │ └───tiny-slider
│ └───Old Assets
│ └───assets
│ ├───css
│ ├───images
│ │ ├───about
│ │ ├───course-images
│ │ ├───courses
│ │ ├───dashboard
│ │ └───left-imgs
│ ├───js
│ └───vendor
│ ├───bootstrap
│ │ ├───css
│ │ │ └───dist
│ │ │ └───css
│ │ └───js
│ ├───fontawesome-free
│ │ ├───css
│ │ └───webfonts
│ ├───jquery-ui-1.12.1
│ ├───js
│ │ └───src
│ │ └───tools
│ ├───node_modules
│ │ └───popper.js
│ │ └───dist
│ │ └───esm
│ ├───OwlCarousel
│ │ └───assets
│ ├───scss
│ │ ├───mixins
│ │ ├───utilities
│ │ └───vendor
│ ├───semantic
│ └───unicons-2.0.1
│ ├───css
│ └───fonts
├───templates
│ ├───base
│ └───Old Templates
│ ├───admin
│ ├───base
│ ├───course
│ ├───dashboard
│ ├───design
│ ├───howto
│ └───userauths
└───userauths
├───migrations
│ └───__pycache__
└───__pycache__
all i did was add this line in my base.html head section
<head>
...
<base href="{% static '/' %}">
</head>

How do I debug a memory leak in a Firefox / Vue SPA

I have a rather large single page application written in Vue. For a long time now, I have the problem that refreshing the page many times (like you do while debugging code) the memory footprint of Firefox grows to the point where the application is becoming extremely slow. By that point I need to exit the browser or tab and start over. The problem seems to get worse while the application has been growing.
Note that this only happens when refreshing the browser, so it seems unlikely that there is a problem with my SPA keeping event handlers running etc. It does not happen in Chrome.
How can I find out what the source of this problem is?
Here is a dump of the about:memory page, after about 25 refreshes. This fragment is about the Web process, but the main process also grows in size. As you can see the footprint is about 1.5gb. On a first load the footprint is about 200 Mb:
1,555,808,240 B (100.0%) -- explicit
├──1,163,196,640 B (74.76%) -- window-objects
│ ├────988,369,312 B (63.53%) -- top(http://localhost:8080/edit, id=23)
│ │ ├──662,598,704 B (42.59%) -- active
│ │ │ ├──655,177,728 B (42.11%) -- window(http://localhost:8080/edit)
│ │ │ │ ├──413,153,488 B (26.56%) -- js-realm(http://localhost:8080/edit)
│ │ │ │ │ ├──324,578,992 B (20.86%) ++ classes
│ │ │ │ │ ├───84,657,040 B (05.44%) ++ scripts
│ │ │ │ │ ├────2,541,504 B (00.16%) ── realm-tables [31]
│ │ │ │ │ ├────1,277,952 B (00.08%) ── saved-stacks-set [31]
│ │ │ │ │ └───────98,000 B (00.01%) ── sundries/malloc-heap [31]
│ │ │ │ ├──193,810,592 B (12.46%) -- layout
│ │ │ │ │ ├──189,408,512 B (12.17%) ── style-sheets [31]
│ │ │ │ │ ├────3,653,904 B (00.23%) ++ style-sets
│ │ │ │ │ ├──────265,792 B (00.02%) ++ style-structs
│ │ │ │ │ ├──────166,080 B (00.01%) ── svg-mapped-declarations [31]
│ │ │ │ │ ├──────115,128 B (00.01%) ++ display-list-arena
│ │ │ │ │ ├───────59,448 B (00.00%) ++ pres-arena
│ │ │ │ │ ├───────54,960 B (00.00%) ++ computed-values
│ │ │ │ │ ├───────46,216 B (00.00%) ── display-list
│ │ │ │ │ ├───────15,544 B (00.00%) ── pres-shell
│ │ │ │ │ ├───────12,576 B (00.00%) ── frame-properties
│ │ │ │ │ ├────────5,872 B (00.00%) ── text-runs
│ │ │ │ │ ├────────5,536 B (00.00%) ── element-data-objects
│ │ │ │ │ └────────1,024 B (00.00%) ── pres-contexts
│ │ │ │ ├───48,136,288 B (03.09%) ++ dom
│ │ │ │ └───────77,360 B (00.00%) ── property-tables [31]
│ │ │ └────7,420,976 B (00.48%) ++ window(https://www.youtube.com/embed/wBlZCrV_J-U)
│ │ ├───10,953,656 B (00.70%) ++ js-zone(0x16444d000)
│ │ ├───10,874,648 B (00.70%) ++ js-zone(0x1963ab000)
│ │ ├───10,872,360 B (00.70%) ++ js-zone(0x17214e000)
│ │ ├───10,804,680 B (00.69%) ++ js-zone(0x189c34000)
│ │ ├───10,748,856 B (00.69%) ++ js-zone(0x18e8a8000)
│ │ ├───10,700,456 B (00.69%) ++ js-zone(0x163e27000)
│ │ ├───10,696,184 B (00.69%) ++ js-zone(0x1777e6000)
│ │ ├───10,696,024 B (00.69%) ++ js-zone(0x165cdb000)
│ │ ├───10,664,408 B (00.69%) ++ js-zone(0x18a7c4000)
│ │ ├───10,646,808 B (00.68%) ++ js-zone(0x187bcd000)
│ │ ├───10,635,640 B (00.68%) ++ js-zone(0x17f490000)
│ │ ├───10,626,840 B (00.68%) ++ js-zone(0x1660b6000)
│ │ ├───10,615,464 B (00.68%) ++ js-zone(0x16e363000)
│ │ ├───10,614,584 B (00.68%) ++ js-zone(0x16dcfe000)
│ │ ├───10,614,392 B (00.68%) ++ js-zone(0x1896ef000)

Docker and Node js Error: Cannot find module

What am I dong wrong here?
The code works on my computer, but when I run it in docker it fails.
I get the following error:
Error: Cannot find module
'/usr/src/app/src/Presentation/viewModel/index'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at /usr/src/app/app.js:29:18
at Array.forEach ()
at Object. (/usr/src/app/app.js:28:26)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32) npm ERR! code ELIFECYCLE npm ERR! errno 1
I assume that the issue is not in docker since when I play with the require I can get different errors.
Just in case here is the docker file:
FROM node:8.9-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD npm start
Here is my app.js file which loads the module which failed:
// Load routes and load dependices - Views and ViewModel
routesConfig.getRoutes().forEach(function(route){
var routeTmp = require(path.join(__dirname,'src/Presentation/viewModel/'+route[1]));
app.use(route[0], routeTmp);
});
It failed at the require line....
When I play with the required files I get different errors, I assume that the module.export makes the problem but I don't know how to go deeper in debugging.
var express = require('express');
var router = express.Router();
var serviceConfig = require('../../../config/service');
var navigation = require('../view/navigation/navigation');
// TODO
var Base = require('../../Core/Common/Base');
const base = new Base();
// Create service
const classTmp = base.getService().create(serviceConfig.getServices().baseService);
var user = classTmp.getAdmin();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Expasdress',
fields: navigation.getNavigation(),
user: user
}
);
});
module.exports = router;
Here is the project sturcture:
.
├── Dockerfile
├── Jenkinsfile
├── app.js
├── bin
│ └── www
├── config
│ ├── config.js
│ ├── createConfig.js
│ ├── domains.js
│ ├── routes.js
│ └── service.js
├── dive.log
├── k8s
│ ├── ingress
│ │ └── ingress.yaml
│ ├── pod
│ │ └── pod.yaml
│ ├── production
│ │ └── production.yaml
│ ├── rbac
│ │ └── fabric8-rbac.yaml
│ └── services
│ └── backend.yaml
├── package-lock.json
├── package.json
├── public
│ ├── icons
│ │ ├── add-thumbnail-placeholder.svg
│ │ ├── baseline-change_history-24px.svg
│ │ └── spartan-logo.png
│ ├── script
│ │ ├── app-view.js
│ │ ├── create-package.js
│ │ ├── sidebar.js
│ │ └── tag-input.js
│ └── stylesheets
│ ├── admin-base.css
│ ├── app.css
│ ├── base.css
│ ├── bootstrap
│ │ ├── css
│ │ │ ├── bootstrap-theme.css
│ │ │ └── bootstrap.css
│ │ ├── fonts
│ │ │ ├── glyphicons-halflings-regular.eot
│ │ │ ├── glyphicons-halflings-regular.svg
│ │ │ ├── glyphicons-halflings-regular.ttf
│ │ │ ├── glyphicons-halflings-regular.woff
│ │ │ └── glyphicons-halflings-regular.woff2
│ │ └── js
│ │ ├── bootstrap.js
│ │ ├── bootstrap.min.js
│ │ └── npm.js
│ ├── component
│ │ ├── buttons.css
│ │ ├── create-components.css
│ │ ├── create-content.css
│ │ └── tag-input.css
│ ├── create-package.css
│ ├── login.css
│ ├── main.css
│ ├── material.css
│ ├── packages.css
│ ├── sidebar.css
│ ├── standard-list.css
│ ├── statistics.css
│ └── style.css
├── scratch
│ ├── access_token
│ ├── email
│ ├── image
│ ├── name
│ ├── refresh_token
│ ├── scope
│ ├── surname
│ └── userToken
└── src
├── Core
│ ├── Abstract
│ │ ├── Domain.js
│ │ └── Service.js
│ ├── Common
│ │ └── Base.js
│ ├── Database
│ │ └── SQLiteDatabase.js
│ ├── Factory
│ │ ├── DomainFactory.js
│ │ └── ServiceFactory.js
│ ├── Observer
│ │ └── EventObserver.js
│ └── RequestHandler
│ └── RequestHandler.js
├── Models
│ ├── Domain
│ │ ├── Component
│ │ │ └── NameComponentDomain.js
│ │ ├── Create
│ │ │ ├── CreateDomain.js
│ │ │ ├── DeleteDomain.js
│ │ │ ├── EditDomain.js
│ │ │ └── ReleaseDomain.js
│ │ ├── List
│ │ │ └── ListDomain.js
│ │ ├── Login
│ │ │ └── LoginDomain.js
│ │ ├── Search
│ │ │ └── SearchDomain.js
│ │ └── Statistics
│ │ └── StatisticsDomain.js
│ ├── Entity
│ │ ├── Admin.js
│ │ ├── Plan.js
│ │ └── Request.js
│ ├── Mapper
│ ├── Repository
│ │ └── StorageRepository.js
│ └── Service
│ ├── BaseService.js
│ ├── CreateService.js
│ └── GetService.js
└── presentation
├── ObjectMapper
├── view
│ ├── app.pug
│ ├── appsku.pug
│ ├── component
│ │ ├── addEquipmentTags.pug
│ │ ├── addTags.pug
│ │ ├── description.pug
│ │ ├── imageLoader.pug
│ │ ├── name.pug
│ │ ├── plan-cell.pug
│ │ └── title.pug
│ ├── create-package.pug
│ ├── create.pug
│ ├── error.pug
│ ├── exercise.pug
│ ├── index.pug
│ ├── login.pug
│ ├── main
│ │ ├── baseLogin.pug
│ │ └── baseNonLoged.pug
│ ├── navigation
│ │ └── navigation.js
│ ├── nutrition-plan.pug
│ ├── package.pug
│ ├── statistics.pug
│ ├── tag.pug
│ ├── workout-plan.pug
│ └── workout.pug
└── viewModel
├── Component
│ └── Name.js
├── app.js
├── appsku.js
├── create-app.js
├── create-package.js
├── exercise.js
├── index.js
├── login.js
├── nutrition-plan.js
├── package.js
├── statistics.js
├── tag.js
├── workout-plan.js
└── workout.js
I will be desperate enough to put my git code as well:https://github.com/tech-387/spartan-apps-admin-console-frontend

Heroku deployment from travis for Meteor App

I'm trying to deploy to Heroku my out of the box meteor application using Travis-CI. Everything goes perfect, no error in the logs, so I try to go to my app link but I get this message:
Application error
___________________________________________________________________________________________________________
An error occurred in the application and your page could not be served. Please try again in a few moments.
If you are the application owner, check your logs for details.
Here is the .travis.yml file
sudo: required
language: node_js
node_js:
- "stable"
deploy:
provider: heroku
api_key:
secure: "mysecretapikey"
app:
master: agile
And here the log generated from heroku
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NPM_CONFIG_PRODUCTION=true
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version (latest stable) via semver.io...
Downloading and installing node 5.11.1...
Using default npm version: 3.8.6
-----> Restoring cache
Skipping cache restore (new runtime signature)
-----> Building dependencies
Pruning any extraneous modules
Installing node modules (package.json)
agile# /tmp/build_ea656fe1ea6609f45441b9fe1ead456609
└─┬ meteor-node-stubs#0.2.3
├── assert#1.3.0
├─┬ browserify-zlib#0.1.4
│ └── pako#0.2.8
├─┬ buffer#4.5.1
│ ├── base64-js#1.1.2
│ ├── ieee754#1.1.6
│ └── isarray#1.0.0
├─┬ console-browserify#1.1.0
│ └── date-now#0.1.4
├── constants-browserify#1.0.0
├─┬ crypto-browserify#3.11.0
│ ├─┬ browserify-cipher#1.0.0
│ │ ├─┬ browserify-aes#1.0.6
│ │ │ ├── buffer-xor#1.0.3
│ │ │ └── cipher-base#1.0.2
│ │ ├─┬ browserify-des#1.0.0
│ │ │ ├── cipher-base#1.0.2
│ │ │ └─┬ des.js#1.0.0
│ │ │ └── minimalistic-assert#1.0.0
│ │ └── evp_bytestokey#1.0.0
│ ├─┬ browserify-sign#4.0.0
│ │ ├── bn.js#4.11.1
│ │ ├── browserify-rsa#4.0.1
│ │ ├─┬ elliptic#6.2.3
│ │ │ ├── brorand#1.0.5
│ │ │ └── hash.js#1.0.3
│ │ └─┬ parse-asn1#5.0.0
│ │ ├─┬ asn1.js#4.5.2
│ │ │ └── minimalistic-assert#1.0.0
│ │ ├─┬ browserify-aes#1.0.6
│ │ │ ├── buffer-xor#1.0.3
│ │ │ └── cipher-base#1.0.2
│ │ └── evp_bytestokey#1.0.0
│ ├─┬ create-ecdh#4.0.0
│ │ ├── bn.js#4.11.1
│ │ └─┬ elliptic#6.2.3
│ │ ├── brorand#1.0.5
│ │ └── hash.js#1.0.3
│ ├─┬ create-hash#1.1.2
│ │ ├── cipher-base#1.0.2
│ │ ├── ripemd160#1.0.1
│ │ └── sha.js#2.4.5
│ ├── create-hmac#1.1.4
│ ├─┬ diffie-hellman#5.0.2
│ │ ├── bn.js#4.11.1
│ │ └─┬ miller-rabin#4.0.0
│ │ └── brorand#1.0.5
│ ├── inherits#2.0.1
│ ├── pbkdf2#3.0.4
│ ├─┬ public-encrypt#4.0.0
│ │ ├── bn.js#4.11.1
│ │ ├── browserify-rsa#4.0.1
│ │ └─┬ parse-asn1#5.0.0
│ │ ├─┬ asn1.js#4.5.2
│ │ │ └── minimalistic-assert#1.0.0
│ │ ├─┬ browserify-aes#1.0.6
│ │ │ ├── buffer-xor#1.0.3
│ │ │ └── cipher-base#1.0.2
│ │ └── evp_bytestokey#1.0.0
│ └── randombytes#2.0.3
├── domain-browser#1.1.7
├── events#1.1.0
├─┬ http-browserify#1.7.0
│ ├── Base64#0.2.1
│ └── inherits#2.0.1
├── https-browserify#0.0.1
├── os-browserify#0.2.1
├── path-browserify#0.0.0
├── process#0.11.2
├── punycode#1.4.1
├── querystring-es3#0.2.1
├─┬ readable-stream#2.0.6
│ ├── core-util-is#1.0.2
│ ├── inherits#2.0.1
│ ├── isarray#1.0.0
│ ├── process-nextick-args#1.0.6
│ └── util-deprecate#1.0.2
├─┬ stream-browserify#2.0.1
│ └── inherits#2.0.1
├── string_decoder#0.10.31
├── timers-browserify#1.4.2
├── tty-browserify#0.0.0
├─┬ url#0.11.0
│ ├── punycode#1.3.2
│ └── querystring#0.2.0
├─┬ util#0.10.3
│ └── inherits#2.0.1
└─┬ vm-browserify#0.0.4
└── indexof#0.0.1
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Build succeeded!
└── meteor-node-stubs#0.2.3
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 13.1M
-----> Launching...
Released v3
As said before, it's an out-of-the-box app so there is no database, nothing that could be causing permission troubles on the server.
I found my mistake, I needed to use buildpack with one of the availables for meteor in order for the app to start. I went to the command line and run heroic logs and saw the errors. I add my new .travis.yml file just in case someone steps into the same error as me:
sudo: required
language: node_js
node_js:
- "stable"
deploy:
provider: heroku
buildpack: https://github.com/jordansissel/heroku-buildpack-meteor.git
api_key:
secure: "mysecretapikey"
app:
master: agile

Categories

Resources