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.
Related
I'm trying to use the npm package 'split-type' https://www.npmjs.com/package/split-type within next.js but I'm getting the error ReferenceError: Element is not defined. I've tried dynamic importing but this does not let me use splitType in the way it is documented. I have tried both import { SplitType } from "split-type" and import SplitType from 'split-type'.
My Dependencies in package.json
"dependencies": {
"gsap": "^3.10.4",
"locomotive-scroll": "^4.1.4",
"next": "latest",
"react": "17.0.2",
"react-dom": "17.0.2",
"split-type": "^0.3.1"
}
package-lock.json
"node_modules/split-type": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/split-type/-/split-type-0.3.1.tgz",
"integrity": "sha512-GPmSaAMmn9FhpfAypLFnmslx4QFqsW+u4bP47aCphQ+DwAr0ejxoda3XVoI6+CeZeUNlsQC/ftGYq4IojuAkoQ=="
},
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.
I keep getting this warning in the console:
DeprecationWarning: grpc.load: Use the #grpc/proto-loader module with grpc.loadPackageDefinition instead
Any ideas on how to fix it?
package.json:
{
"main": "src/index.ts",
"scripts": {
"start-live": "ts-node ./src/index.ts",
"start": "nodemon"
},
"dependencies": {
"#types/express": "^4.16.1",
"#types/node": "^11.9.5",
"express": "^4.16.4",
"firebase": "^5.8.4",
"nodemon": "^1.18.10",
"rxjs": "^6.4.0",
"ts-node": "^8.0.2",
"typescript": "^3.3.3333"
}
}
This means that a package that you depend on is calling the deprecated function grpc.load. You can determine which package is doing this by adding the following to your index file:
process.on('warning', e => console.warn(e.stack));
This will output the stack trace of the warning. Once you know which package is calling it you can file an issue with them to upgrade their code.
Hey all I am just trying to get a simple test running and I keep running into this error after running "yarn test" which is using jest.
Plugin 0 specified in "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js" provided an invalid property of "default" (While processing preset: "/Users/Documents/Dev/appname/node_modules/babel-preset-react-native/index.js")
at Plugin.init (node_modules/babel-core/lib/transformation/plugin.js:131:13)
at Function.normalisePlugin (node_modules/babel-core/lib/transformation/file/options/option-manager.js:152:12)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:184:30
at Array.map (<anonymous>)
at Function.normalisePlugins (node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
at OptionManager.mergeOptions (node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
at node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
at Array.map (<anonymous>)
at OptionManager.resolvePresets (node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
Here is my package.json, what am I missing, im sure its a configuration issue and not a test issue.
{
"name": "appname",
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"resources/fonts"
]
},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"axios": "^0.18.0",
"lodash": "^4.17.10",
"react": "16.4.1",
"react-native": "0.56.0",
"react-native-autocomplete-input": "^3.5.0",
"react-native-code-push": "^5.4.2",
"react-native-elements": "^1.0.0-beta2",
"react-native-form-validator": "^0.2.0",
"react-native-image-pan-zoom": "^2.1.9",
"react-native-image-zoom-viewer": "^2.2.18",
"react-native-material-dropdown": "^0.11.1",
"react-native-remote-svg": "^1.3.0",
"react-native-vector-icons": "^5.0.0",
"react-native-version-number": "^0.3.5",
"react-navigation": "^2.11.2"
},
"devDependencies": {
"babel-jest": "23.4.2",
"babel-preset-react-native": "^5",
"jest": "23.5.0",
"react-test-renderer": "16.4.1"
},
"jest": {
"preset": "react-native"
}
}
don't know if you solved that already but I had the same issue and I was able to make things work again with RN 0.56. I changed this:
"babel-preset-react-native": "^5",
to
"babel-preset-react-native": "4.0.0",
here's the full discussion around the issue: https://github.com/storybooks/storybook/issues/3897
if the above breaks your react-native env, another solution would be to install babel-bridge:
npm install babel-core#7.0.0-bridge.0 --save-dev
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.