SpookyJS: failed to execute hello.js after adding some dependencies - javascript

I git clone a spookyjs from github to my shell, then npm install and run node examples/hello.js.
Everything goes well and hello.js outputs:
Hello, from Spooky the Tuff Little Ghost - Wikipedia, the free encyclopedia
Then I add some dependencies to the package.json:
From
"dependencies": {
"underscore": "1.3.x",
"async": "0.1.x",
"tiny-jsonrpc": "0.2.x",
"carrier": "0.1.x",
"duplexer": "0.0.x",
"readable-stream": "~1.0.2"
}
To
"dependencies": {
"underscore": "1.3.x",
"async": "0.1.x",
"tiny-jsonrpc": "0.2.x",
"carrier": "0.1.x",
"duplexer": "0.0.x",
"readable-stream": "~1.0.2",
"express": "^4.13.4",
"bluebird": "^3.3.4",
"body-parser": "~1.13.2",
"consul": "^0.23.0",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"express": "~4.13.1",
"jade": "~1.11.0",
"morgan": "~1.6.1",
"native-dns": "^0.7.0",
"node-phantom": "^0.2.5",
"serve-favicon": "~2.3.0",
"util": "^0.10.3",
"webpage": "^0.3.0"
}
Then I npm install, and run node examples/hello.js again. But now it failed with weird logs:
{ id: 1,
code: -32603,
message: 'undefined is not a constructor (evaluating \'require(\'webpage\').create()\')' }
{ id: 2, code: -32603, message: 'Type error' }
{ id: 3, code: -32603, message: 'Type error' }
My question is, why does adding some dependencies to SpookyJS lead to such an error and how can this error be avoided?

Posted that question to the github. The main developer of SpookyJS(lawnsea) answered me:
Sounds like that package (webpage) is conflicting with the native
PhantomJS module webpage. You will not be able to use those together.
I don't think you'll be able to use a package named webpage. You could
create another npm package that wraps it under a different name.

Related

Can't resolve react-navigation/core

I'm trying to build a React Native app with some navigation, and i got this error whenever i build it, i'm using expo to build the app :
Android Bundling failed 6098ms
While trying to resolve module `#react-navigation/core` from file `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/native/src/ResourceSavingSceneView.js`, the package `/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js`. Indeed, none of these files exist:
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
* /Users/laurent/Documents/Delivery/Tek3/DEV/B-DEV-501-LYN-5-1-redditech-laurent.cazette/node_modules/#react-navigation/core/lib/module/index.js/index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
I think I've already installed all dependencies, but here is my package.json in case I forgot anything :
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.11",
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
"#react-navigation/stack": "5.9.0",
"expo": "~42.0.1",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.4",
"react-native-gesture-handler": "~1.10.2",
"react-native-paper": "^4.9.2",
"react-native-reanimated": "~2.2.0",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "~3.4.0",
"react-native-svg": "^12.1.1",
"react-native-unimodules": "0.14.10",
"react-native-vector-icons": "^8.1.0",
"react-native-web": "^0.17.5",
"react-navigation": "^4.4.4",
"react-navigation-stack": "^2.10.4",
"styled-components": "^5.3.1",
"styled-system": "^5.1.5"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
I've already tried to update metro.config.js :
const { getDefaultConfig } = require('expo/metro-config');
module.exports = {
resolver: {
/* resolver options */
sourceExts: ['jsx', 'js', 'ts', 'tsx'],
},
maxWorkers: 2,
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
},
};
module.exports = getDefaultConfig(__dirname);
Do you guys have any idea on what's wrong ?
Why do you have it like this?
"#react-navigation/core": "react-navigation/core",
"#react-navigation/native": "react-navigation/native",
They need to be correct version numbers. Follow the documentation on official website to install the packages:
https://reactnavigation.org/docs/getting-started
https://reactnavigation.org/docs/stack-navigator/
expo install react-native-screens react-native-safe-area-context react-native-gesture-handler
yarn add #react-navigation/native #react-navigation/stack
And remove "#react-navigation/core": "react-navigation/core" from your package.json.
Try this:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current
packager and then starting the packager again with react-native
start.
Unable to resolve module 'react-navigation'

Ember Quickstart: could not find module `#glimmer/component` when adding JS file to first component

I just started using Ember. I already had some trouble with the Ember Quickstart tutorial which describes that hbs and js files for components should both be put in app/components. The only way it works on my machine is with the js file in app/components, but the hbs file in app/templates/components. That's also what ember generate component people-list did.
Now, there's another problem: The first line in people-list.js is
import Component from '#glimmer/component';
This causes the error Could not find module #glimmer/component imported from ember-quickstart/components/people-list. There is no build error, but the component's content does not render. What can I do about this?
edit 1: In my other question, Ember Octane was mentioned. This is the output of ember -v:
ember-cli: 3.18.0
node: 11.13.0
os: darwin x64
edit 2 Below is my package.json after adding glimmer. I could run npm install, but yarn install gives me The engine "node" is incompatible with this module. Expected version "10.* || >= 12". Got "11.13.0".
{
"name": "ember-quickstart",
"version": "0.0.0",
"private": true,
"description": "Small description for ember-quickstart goes here",
"repository": "",
"license": "MIT",
"author": "",
"directories": {
"doc": "doc",
"test": "tests"
},
"scripts": {
"build": "ember build",
"lint:hbs": "ember-template-lint .",
"lint:js": "eslint .",
"start": "ember serve",
"test": "ember test"
},
"devDependencies": {
"#ember/jquery": "^0.5.2",
"#ember/optional-features": "^0.6.3",
"broccoli-asset-rev": "^2.7.0",
"ember-ajax": "^5.0.0",
"ember-cli-app-version": "^3.2.0",
"ember-cli-babel": "^7.1.2",
"ember-cli-dependency-checker": "^3.1.0",
"ember-cli-eslint": "^4.2.3",
"ember-cli-htmlbars": "^3.0.0",
"ember-cli-htmlbars-inline-precompile": "^1.0.3",
"ember-cli-inject-live-reload": "^1.8.2",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^1.0.0-beta.1",
"ember-cli-uglify": "^2.1.0",
"ember-data": "~3.9.0",
"ember-export-application-global": "^2.0.0",
"ember-load-initializers": "^1.1.0",
"ember-maybe-import-regenerator": "^0.1.6",
"ember-qunit": "^3.4.1",
"ember-resolver": "^5.0.1",
"ember-source": "~3.9.0",
"ember-welcome-page": "^3.2.0",
"eslint-plugin-ember": "^5.2.0",
"loader.js": "^4.7.0",
"qunit-dom": "^0.8.0"
},
"engines": {
"node": "10.* || >= 12"
},
"dependencies": {
"ember-cli": "^3.18.0",
"#glimmer/component": "^1.0.0"
}
}
Now the problem described above is gone, instead I get Parsing error: Unexpected character '#' in line 5 of people-list.js:
import Component from '#glimmer/component';
import { action } from '#ember/object';
export default class PeopleListComponent extends Component {
#action
showPerson(person) {
alert(`The person's name is ${person}!`);
}
}
Please ensure that "#glimmer/component": "^1.0.0" line exists in your package.json. Then rerun npm install or yarn install and restart ember s. This should be there if you had used ember new with Ember 3.14+, but it seems like it might be missing.

Moving away from bower in 2.15.1 ember-cli version

I'm trying to stop using bower dependencies in my Ember project. I updated ember-cli to 2.15.1 and moved bower dependencies to package.json. Maybe it will be helpfull to know which dependencies:
"font-awesome": "~4.7.0",
"jquery.inputmask": "
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
We also used bootstrap-datepicker as a bower dependency, but due to the error message I swapped it for ember-bootstrap-datetimepicker hoping that it would solve my issue. I reinstalled node_modules, removed bower_components, cleared tmp and dist folders and run npm cache clean && bower cache clean. From the project, I removed bower.json and .bowerrc. I also explicitly defined in package.json bowerDirectory: null so that in ember-cli-build.js broccoli won't be looking for any bower components.
in my ember-cli-build.js :
const isProductionLikeBuild = ['production', 'staging', 'review', 'e2e-testing'].indexOf(env) > -1;
const app = new EmberApp(defaults, {
fingerprint: {
enabled: isProductionLikeBuild,
prepend: envConf.assetsPrefix
},
sourcemaps: {
enabled: !isProductionLikeBuild
},
minifyCSS: { enabled: isProductionLikeBuild },
minifyJS: { enabled: isProductionLikeBuild },
'ember-cli-babel': {
includePolyfill: true
},
'ember-bootstrap-datetimepicker': {
"importBootstrapCSS": true,
"importBootstrapJS": true,
"importBootstrapTheme": true
},
'ember-font-awesome': { fontsOutput: '/assets/fonts' },
exportConfig: {
environments: [
'production',
'staging',
'review',
'e2e-testing'
]
}
});
When I turn off sourcemaps, app is building correctly.
When I don't however, this is what I get after typing ember s:
The Broccoli Plugin: [BroccoliMergeTrees: TreeMerger (vendor & appJS)] failed with:
Error: ENOENT: no such file or directory, open '/Users/martagajowczyk/Desktop/Project/project-frontend/tmp/source_map_concat-input_base_path-S2ZmmRR0.tmp/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js'
at Error (native)
at Object.fs.openSync (fs.js:641:18)
at Object.fs.readFileSync (fs.js:509:33)
at SourceMap.addFile (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:75:31)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:200:16
at Array.forEach (native)
at Concat.<anonymous> (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-concat/concat.js:198:24)
at /Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/fast-sourcemap-concat/lib/source-map.js:419:12
at initializePromise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:567:5)
at new Promise (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/rsvp/dist/rsvp.js:1039:33)
The broccoli plugin was instantiated at:
at BroccoliMergeTrees.Plugin (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/broccoli-plugin/index.js:7:31)
at new BroccoliMergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:16:10)
at Function.BroccoliMergeTrees [as _upstreamMergeTrees] (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:10:53)
at mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/merge-trees.js:85:33)
at EmberApp._mergeTrees (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1832:12)
at EmberApp.javascript (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1307:17)
at EmberApp.toArray (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1689:12)
at EmberApp.toTree (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/broccoli/ember-app.js:1711:38)
at module.exports (/Users/martagajowczyk/Desktop/Project/project-frontend/ember-cli-build.js:46:14)
at Builder.setupBroccoliBuilder (/Users/martagajowczyk/Desktop/Project/project-frontend/node_modules/ember-cli/lib/models/builder.js:56:19)
What can be the reason of linking to bower_components?
Thanks
Output from ember version --verbose && npm --version && yarn --version:
ember-cli: 2.15.1
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k
os: darwin x64
3.10.10
0.24.6
Here's part of my package.json with dependencies and dev-dependencies listed:
"devDependencies": {
"broccoli-asset-rev": "^2.5.0",
"ember-ajax": "^3.0.0",
"ember-bootstrap-datetimepicker": "^1.1.0",
"ember-buffered-proxy": "^0.7.0",
"ember-can": "^0.8.4",
"ember-cli": "^2.15.1",
"ember-cli-app-version": "^3.0.0",
"ember-cli-autoprefixer": "0.8.0",
"ember-cli-babel": "^6.8.2",
"ember-cli-bootstrap-datepicker": "^0.5.6",
"ember-cli-code-coverage": "^0.4.1",
"ember-cli-content-security-policy": "1.0.0",
"ember-cli-dependency-checker": "^2.0.1",
"ember-cli-eslint": "^4.2.0",
"ember-cli-htmlbars": "^2.0.3",
"ember-cli-htmlbars-inline-precompile": "^1.0.2",
"ember-cli-inject-live-reload": "^1.6.1",
"ember-cli-mirage": "^0.3.1",
"ember-cli-moment-shim": "^3.5.0",
"ember-cli-page-object": "1.11.0",
"ember-cli-polyfill-io": "^1.2.2",
"ember-cli-qunit": "^4.0.0",
"ember-cli-sass": "^7.0.0",
"ember-cli-shims": "^1.1.0",
"ember-cli-sri": "^2.1.1",
"ember-cli-uglify": "^1.2.0",
"ember-cli-yuidoc": "0.8.8",
"ember-cp-validations": "^3.3.0",
"ember-data": "^2.13.1",
"ember-deep-set": "^0.1.2",
"ember-exex": "^0.1.12",
"ember-export-application-global": "^2.0.0",
"ember-feature-flags": "3.0.0",
"ember-font-awesome": "4.0.0-alpha.3",
"ember-inflector": "^2.0.0",
"ember-inputmask": "0.4.0-beta.5",
"ember-intercom-io": "^0.1.3",
"ember-intl": "^2.23.1",
"ember-intl-cp-validations": "^3.0.1",
"ember-load-initializers": "^1.0.0",
"ember-math-helpers": "^2.0.5",
"ember-modal-dialog": "^2.3.0",
"ember-moment": "7.4.1",
"ember-multiselect-checkboxes": "^0.10.3",
"ember-power-select": "^1.8.2",
"ember-promise-helpers": "^1.0.3",
"ember-radio-button": "1.1.1",
"ember-resolver": "^4.1.0",
"ember-responsive": "2.0.4",
"ember-rl-dropdown": "^0.10.1",
"ember-route-action-helper": "^2.0.3",
"ember-simple-auth": "1.4.0",
"ember-sinon": "1.0.1",
"ember-sinon-qunit": "2.0.0",
"ember-sliding-sticky": "^1.0.0",
"ember-source": "^2.13.0",
"ember-svg-jar": "^0.11.1",
"ember-test-selectors": "0.3.7",
"ember-truth-helpers": "1.3.0",
"ember-uploader": "^1.2.2",
"ember-watson": "^0.9.1",
"eonasdan-bootstrap-datetimepicker": "~4.17.42",
"loader.js": "^4.4.0",
"modal-dialog": "1.6.3",
"yuidoc-ember-theme": "^1.3.0"
},
"dependencies": {
"bootstrap-sass": "^3.3.7",
"broccoli-funnel": "^2.0.1",
"font-awesome": "~4.7.0",
"jquery.inputmask": "3.3.4",
"moment": "~2.18.1",
"moment-timezone": "0.5.13"
}
I strongly assume your problem is ember-cli-bootstrap-datepicker. This addon does add the bootstrap-datepicker bower package during installation and probably should not be used without it.
Personally if you're looking for an ember DatePicker I recommend ember-pikaday.
If you need recommendations about addons I recommend ember observer, or ask in the slack channel references on the community page..

Manually adding method in a node module

I'm using material-ui for my website and the package found on npm is out of date with their most recent version (found on Github). I manually added in this line of code into their Theme Manager class, which reflects the changes:
setContentFontFamily(newContentFontFamily) {
if (typeof newContentFontFamily !== "undefined" && newContentFontFamily !== null) {
this.contentFontFamily = newContentFontFamily;
this.component = Extend(this.component, this.template.getComponentThemes(this.palette, this.spacing));
}
},
However, my application hasn't registered these changes and when I try to set a font:
ThemeManager.setContentFontFamily('Open Sans, Roboto, sans serif');
The console gives me this error:
Uncaught TypeError: ThemeManager.setContentFontFamily is not a function
I'm using Browserify to bundle my client side 'require' dependencies. Is this a Browserify issue, an npm issue, or am I not understanding how node modules work?
Edit: Here's my package.json
{
"name": "FooProject",
"version": "0.0.0",
"description": "",
"dependencies": {
"highlight.js": "^8.7.0",
"material-ui": "callemall/material-ui",
"react": "^0.13.3",
"react-bootstrap": "^0.24.5",
"react-highlight": "^0.5.0",
"react-tap-event-plugin": "^0.1.7",
"underscore": "^1.8.3"
},
"author": "Tina Zheng",
"devDependencies": {
"babelify": "^6.1.3",
"bower": "^1.4.1",
"browserify": "^11.0.1",
"gulp": "^3.9.0",
"gulp-react": "^3.0.1",
"gulp-reactify": "^3.0.1"
}
}
A fast solution to your problem (aside from contacting the authors and asking them to update the npm) is to use the repository url as a dependency instead of the npm module:
git://github.com/user/project.git#commit-ish
If the repository is on GitHub you can use the short form:
"dependencies": {
"express": "visionmedia/express",
"mocha": "visionmedia/mocha#4727d357ea"
}
(docs)
If you just edit the dependencies directly, they will be overwritten every time there's a rebuild.

Using Jasmine.js Warning:boot is not defined

I'm using Jasmine 1.3 with RequireJS and Grunt. I have a grunt task that does this:
jasmine: {
app: {
options: {
outfile: "<%= config.testPath() %>/jasmine_runner/_SpecRunner.html",
specs: ["<%= config.testPath() %>/specs/*Spec.js"],
template: require('grunt-template-jasmine-requirejs'),
templateOptions:{
requireConfigFile: ['<%= config.appPath() %>/js/config.js','<%= config.testPath() %>/specs/testConfig.js']
}
}
}
}
From the command line, I execute grunt jasmine which gives this error:
Running "jasmine:app" (jasmine) task
Warning: boot is not defined Use --force to continue.
Aborted due to warnings.
PhantomJS is set up to run it in the background. I have done extensive search on what the boot error means but haven't found anything.
Try updating your version of grunt-contrib-jasmine.
Upgrading from 0.5.1 to 0.7.0 fixed this issue for me.
Here's my package.json for reference:
{
"name": "...",
"version": "0.1.0",
"description": "...",
"devDependencies": {
"grunt": "^0.4.5",
"matchdep": "^0.3.0",
"grunt-contrib-concat": "^0.4.0",
"grunt-contrib-uglify": "^0.5.0",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-compass": "^0.9.0",
"grunt-contrib-requirejs": "~0.4.4",
"grunt-contrib-jasmine": "~0.7.0",
"grunt-template-jasmine-requirejs": "~0.2.0"
},
...
}

Categories

Resources