I've create an extension for visual studio code.
In my package.json, I've a big list of dependencies :
"dependencies": {
"#types/fs-extra": "^8.0.0",
"#types/puppeteer-core": "^2.0.0",
"#types/yamljs": "^0.2.30",
"anchor-markdown-header": "^0.5.7",
"clone": "^2.1.2",
"dedent": "^0.7.0",
"front-matter": "^3.0.2",
"fs-extra": "^8.1.0",
"get-port": "^5.1.1",
"highlight.js": "^9.18.0",
"localized-resource-manager": "^1.2.0",
"markdown-it": "^10.0.0",
"markdown-it-anchor": "^5.2.5",
"markdown-it-checkbox": "^1.1.0",
"markdown-it-emoji": "^1.4.0",
"markdown-it-table-of-contents": "^0.4.4",
"multi-integer-range": "^4.0.8",
"mustache": "^4.0.0",
"puppeteer-core": "^2.1.1",
"rxjs": "^6.5.4",
"serve-handler": "^6.1.2",
"simple-git": "^1.131.0",
"string-template": "^1.0.0",
"svn-spawn": "^0.1.6",
"temp-filesystem": "^1.1.3",
"transliteration": "^2.1.8",
"twemoji": "^12.1.5",
"utf8": "^3.0.0",
"website-scraper": "^4.2.0",
"yamljs": "^0.3.0"
},
My problem is that I need to embed all these dependencies (and their dependencies) in my package node_modules folder.
So my package consists now of more than 5000 files and more than 300 MB.
Is there a way to not include the node_modules folder in the package but tell to vscode to install them when installing my extension ?
Thanks :)
Related
I saw a similiar problem but it was not with ng2-charts. I already spent more the 1
day on what I believe is an environment issue. I need help big time.
Crash Message:
Error: NG0203: inject() must be called from an injection context (a constructor, a
factory function or a field initializer). Find more at
https://angular.io/errors/NG0203
at injectInjectorOnly (core.mjs:4751:15)
at Module.ɵɵinject (core.mjs:4762:12)
at Object.NgChartsModule_Factory [as useFactory] (ng2-charts.mjs:274:1)
at Object.factory (core.mjs:9324:38)
at R3Injector.hydrate (core.mjs:9237:35)
at R3Injector.get (core.mjs:9131:33)
at injectInjectorOnly (core.mjs:4757:33)
at ɵɵinject (core.mjs:4761:12)
at useValue (core.mjs:8897:65)
at R3Injector.resolveInjectorInitializers (core.mjs:9174:17)
index.js:551 [webpack-dev-server] Live Reloading enabled.
Code added to app-module.ts:
import { NgChartsModule } from 'ng2-charts';
#NgModule({ NgChartsModule, .......
Package.json
"dependencies": {
"#angular/animations": "14.1.0",
"#angular/common": "14.1.0",
"#angular/compiler": "14.1.0",
"#angular/core": "14.1.0",
"#angular/forms": "14.1.0",
"#angular/material": "14.1.0",
"#angular/material-moment-adapter": "14.1.0",
"material-design-icons": "3.0.1",
"#angular/platform-browser": "14.1.0",
"#angular/platform-browser-dynamic": "14.1.0",
"#angular/router": "14.1.0",
"#types/file-saver": "^2.0.5",
"core-js": "3.24.0",
"chart.js": "3.8.2",
"ng2-charts": "4.0.0",
"rxjs": "7.5.6",
"rxjs-compat": "6.6.7",
"tslib": "2.4.0",
"zone.js": "0.11.7",
Installation:
npm install --g #angular/cli#14.1.0
npm i --unsafe-perm --verbose
npm i #types/chart.js
I have been getting an error regardless of what I do. In fact I am building an app with mongoDB as a server using mongoose and babel-watch, but every time I run babel-watch I get this error:
Error cannot find module 'core-js/es6'
I have installed and reinstalled core.js using npm install core.js, however nothing changes. Please help.
These are the dependencies I have installed on my project:
"dependencies": {
"body-parser": "^1.19.0",
"core-js": "^2.6",
"cuid": "^2.1.6",
"express": "^4.17.1",
"limax": "^1.7.0",
"mongoose": "^5.6.9",
"node-gyp": "^5.0.3"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-watch": "^7.0.0",
"nodemon": "^1.19.1"
}
}
Code error seen from terminal after running npm start
For core.js v3.9 import in App.tsx the next line: import "core-js/es";
Given that you are using core-js v2.6.9, your path should be core-js/library/es6 as the example shows you in the documentation here.
So the title pretty much explains my problem. I don't want babel to be transpiling some files that are nested within my folder structure, but I can't get it to work.
my babelrc file:
{
"presets" : ["es2015", "react", "stage-0", "es2017"],
"plugins": [
"transform-regenerator",
"transform-async-to-generator",
"transform-object-rest-spread",
],
"env": {
"development": {
"presets": ["react-hmre"]
}
},
"ignore": [
"node_modules",
"dist",
"public",
"src/client",
]
}
And my babel packages:
{
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.3",
"babel-loader": "^6.4.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-regenerator": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0","babel-register": "^6.18.0",
}
Any help would be greatly, greatly appreciated.
I believe you can do this through the CLI, but I'd much rather do it through the .babelrc file.
Thanks!
You just need to add --no-copy-ignored param to the end of your build script
babel src --out-dir lib --copy-files --no-copy-ignored
If you're using .babelrc or .babelrc.json, add ignore section to the root;
"ignore": [
"**/*.test.js"
]
Note: Tested on Babel 7.x
According to https://github.com/babel/babel/issues/5532#issuecomment-288755557:
There are some issues with ignore/only that we are fixing in 7.0
You could see if Babel 7 works well enough for you! According to their blog, it seems like it's working fine.
Otherwise, you might just be stuck doing it through the CLI for now.
https://github.com/babel/babel/pull/5487 seems to be the PR that fixed this issue for Babel 7.x.
Receiving an error within my Deis app; with the introduction of Helmet to the frontend middleware. The app is initially based on React Boilerplate and most of the suggestions I've run by, I've already implemented/explored within the source and am still producing this "phantom" error.
This only occurs on the Deis app instance; when reproducing the steps locally, there's zero issues with it completing the (production) build process.
Sure, I could remove helmet from the middleware, but, I'd rather not...
Error Output:
> pkg-name#0.0.1 start /app
> npm run start:production
> pkg-name#0.0.1 start:production /app
> npm run build && npm run start:prod
> pkg-name#0.0.1 build /app
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress
/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:328
throw e;
^
2017-10-27T15:50:48+00:00 deis-app-name[]:
Error: Couldn't find preset "latest" relative to directory "/app"
at /app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/app/node_modules/babel-register/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at compile (/app/node_modules/babel-register/lib/node.js:103:45)
at loader (/app/node_modules/babel-register/lib/node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (/app/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:531:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! pkg-name#0.0.1 build: `cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the pkg-name#0.0.1 build script.
Dependency object value/pair:
"dependencies": {
"babel-cli": "6.18.0",
"babel-core": "6.21.0",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.10",
"babel-plugin-dynamic-import-node": "1.0.0",
"babel-plugin-react-intl": "2.2.0",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-es2015-modules-commonjs": "6.18.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.11",
"babel-preset-latest": "6.16.0",
"babel-preset-react": "6.16.0",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.16.0",
"babel-polyfill": "6.20.0",
"basic-auth": "^2.0.0",
"bootstrap": "4.0.0-beta",
"chalk": "^1.1.3",
"cheerio": "0.22.0",
"circular-dependency-plugin": "2.0.0",
"classnames": "^2.2.5",
"compression": "1.6.2",
"cross-env": "3.1.3",
"css-loader": "0.26.1",
"dotenv": "^4.0.0",
"dotenv-safe": "^4.0.4",
"dotenv-webpack": "^1.5.4",
"eslint-import-resolver-webpack": "0.8.0",
"exports-loader": "0.6.3",
"express": "4.14.0",
"express-basic-auth": "^1.1.2",
"file-loader": "0.9.0",
"fontfaceobserver": "^2.0.13",
"helmet": "^3.9.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.24.1",
"image-webpack-loader": "2.0.0",
"immutable": "3.8.1",
"imports-loader": "0.6.5",
"intl": "1.2.5",
"invariant": "2.2.2",
"ip": "1.1.4",
"lodash": "4.17.2",
"minimist": "1.2.0",
"moment": "2.18.0",
"ngrok": "2.2.4",
"nsp": "^2.8.1",
"offline-plugin": "4.5.2",
"query-string": "^5.0.1",
"react": "15.4.1",
"react-addons-test-utils": "15.4.1",
"react-dom": "15.4.1",
"react-helmet": "3.2.2",
"react-intl": "2.1.5",
"react-paginate": "^4.4.4",
"react-redux": "4.4.6",
"react-router": "3.0.0",
"react-router-redux": "4.0.6",
"react-router-scroll": "0.4.1",
"react-scroll": "^1.5.5",
"react-widgets": "^4.0.2",
"react-widgets-moment": "^4.0.2",
"reactstrap": "^5.0.0-alpha.3",
"redux": "3.6.0",
"redux-form": "^7.0.4",
"redux-immutable": "3.0.8",
"redux-saga": "0.14.0",
"redux-saga-routines": "^2.0.2",
"reselect": "2.5.4",
"rimraf": "2.5.4",
"sanitize.css": "4.1.0",
"snyk": "^1.45.0",
"style-loader": "0.13.1",
"styled-components": "1.1.2",
"svg-sprite-loader": "^3.4.0",
"url-loader": "0.5.7",
"warning": "3.0.0",
"webpack": "2.2.0-rc.3",
"webpack-dev-middleware": "1.9.0",
"webpack-hot-middleware": "2.15.0",
"whatwg-fetch": "2.0.1"
},
"devDependencies": {
"coveralls": "2.11.15",
"enzyme": "2.6.0",
"eslint": "3.11.1",
"eslint-config-airbnb": "13.0.0",
"eslint-config-airbnb-base": "10.0.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.7.1",
"eslint-plugin-redux-saga": "0.1.5",
"eventsource-polyfill": "0.9.6",
"jest-cli": "18.0.0",
"lint-staged": "3.2.1",
"node-plop": "0.5.4",
"node-sass": "^4.5.3",
"null-loader": "0.1.1",
"plop": "1.7.3",
"pre-commit": "1.1.3",
"sass-loader": "^6.0.6",
"shelljs": "^0.7.5",
"sinon": "2.0.0-pre"
}
Runtime configuration:
webpack: 2.2.0-rc.3
babel core: 6.26.0
babel loader: 6.18.0
helmet: 3.9.0
Environment workflow:
Running on a Deis instance (kube & docker)
Environment variables:
NODE_ENV production
NODE_MODULES_CACHE false
NPM_CONFIG_PRODUCTION true
Additional resources:
https://github.com/babel/babel/issues/6558
https://github.com/babel/babel-loader#usage
https://github.com/react-boilerplate/react-boilerplate/pull/1236#issuecomment-305821664
BabelJs over Heroku: Couldn't find preset "env" relative to directory "/app"
https://devcenter.heroku.com/articles/nodejs-support#devdependencies
What I do - in development (on your local machine), I just install all the latest babel deps in a grandparent directory. Node.js will walk up the filesystem looking for its dependencies (node_modules). This way you don't have to install Babel for each project. This technique doesn't even need NODE_PATH or npm link, it just works like this:
$HOME/
projects/
node_modules/ # install all babel deps here
project-a/
project-b/
project-c/
or, even simpler, you can just install babel deps in $HOME/node_modules, and that will work too. Just an idea. This is just the way Node.js works - it walks up the filesystem all the way to $HOME, looking for node_modules/x, if it can't find it in $HOME/node_modules/x, then it fails.
I removed "latest" from presest array and the "prestes" equals ["react","stage-0"]
I may be confused as to what babel-preset-env actually does. My assumption is that it would transpile my code for my targeted browsers including any necessary polyfills. This doesn't appear to be the case in my code though...
My code:
import "babel-polyfill"
...
var k = Object.values({ x: 's' });
My babel settings:
"presets": [
[ "env", {
"useBuiltIns": true,
"targets": {
"browsers": ["last 2 versions", "IE 10"]
}
}]
]
The transpiled code still contains Object.values and IE 10 dies quietly (it does transpile - I can see the rest of the code changing - just seems to target wrong).
Package.json (some of these imports are not in use):
"core-js": "^2.5.1",
"opentype.js": "^0.7.2",
"svg.draggable.js": "^2.2.1",
"svg.js": "^2.6.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-latest": "^6.24.1",
"babel-register": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.0.1",
"imports-loader": "^0.7.1",
"mocha": "^3.5.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2",
"webpack-merge": "^4.1.0"
babel-preset-env in its default state only handles converting syntax, not polyfilling standard library functionality.
Sounds like you'll want useBuiltins: true in your config. You'll also need to follow the other instructions there by installing core-js and adding an import for babel-polyfill.
Alternatively you can just load babel-polyfill itself and not rely on babel-preset-env at all.