babel 7.x - Can't resolve 'core-js/modules/es.array.concat' - babeljs

I upgraded babel 6.x → 7.x but having issues running Webpack.
It is complaining about missing core-js/modules/*.
My babel.config.js is in the root directory. I converted the previously existing .babelrc to js (.babelrc also produced the same errors). I am guessing it is some collision with all the core, corejs2, runtime stuff.
There are two apps in my src, mine and Styleguidist (in ./node_modules). My app transpiles and works with these same package.json/babel.config, but Styleguidist does not.
The error when running Styleguidist with webpack:
Module not found: Error: Can't resolve 'core-js/modules/es.array.concat' in '/project/src/node_modules/react-styleguidist/lib/client/rsg-components/Slot'
/node_modules/react-styleguidist/lib/client/rsg-components/Slot.js:
import "core-js/modules/es.array.concat";
import "core-js/modules/es.array.filter";
...
package.json
"dependencies": {
"#babel/polyfill": "^7.0.0",
"#babel/runtime-corejs2": "^7.4.3",
}
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-object-rest-spread": "^7.4.3",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.4.3",
"#babel/plugin-transform-react-jsx": "^7.3.0",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/register": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-plugin-transform-vue-jsx": "^4.0.1",
}
babel.config.js
module.exports = {
presets: ['#babel/preset-env'],
plugins: [
'#babel/plugin-transform-runtime',
'#babel/plugin-transform-react-jsx',
'transform-vue-jsx',
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-json-strings",
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions"],
comments: false
}

Quoting from Babel 7.4.0 release :
#babel/polyfill isn't a plugin or preset, but a runtime package: if we added an option to switch between core-js#2 and core-js#3, both the package versions would need to be included in your bundle. For this reason, we decided to deprecate it: you now should load core-js for polyfills, and regenerator-runtime/runtime if you are transforming generators:
As you are using 7.4.3 version of babel, #babel/polyfill might not work as expected. Instead please add core-js and regenerator-runtime manually. Quoting from core-js3 release announcement:
Instead of
import "#babel/polyfill";
you should use those 2 lines:
import "core-js/stable";
import "regenerator-runtime/runtime";
Don't forget install those dependencies directly!
npm i --save core-js regenerator-runtime

I had the same issue and as often happens I forgot to have another package installed as:
"#babel/runtime-corejs3": "^7.5.5",
Don't forgot to install it at same level where you have the issue(either dev, local or production) level:
npm i -D(or --save-dev) #babel/runtime-corejs3
So in general this kind of errors happens when there are dependencies update change significantly in the version and aren't backward compatible with previous versions(API changes). Indeed corejs3 isn't at all compatible with corejs2 or older.

I found possible answer.
To resolve this error, you can downgrade the core-js version to 2.5.7. This version produces correct catalogs structure, with separate ES6 and ES7 folders.
To downgrade the version, simply run:
npm i -S core-js#2.5.7

Related

Vue 3 production deployment

I am currently deploying my Vue 3 project (with Laravel API Backend) and I am having some troubles with deploying.
What I am trying to do is, I used git-ftp to push my Vue project to production server and then I run npm install and npm run build to build the app. I am getting an error:
FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
I have read on some similar questions that one possible way was to use command with allocating more memory to Vue
npx --max_old_space_size=4095 vue-cli-service build --modern
however this produced the same error. These are my package.json dependencies (dev included)
"dependencies": {
"#fullcalendar/core": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/vue3": "^5.10.1",
"#popperjs/core": "^2.9.3",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"axios": "^0.21.1",
"bootstrap": "^5.1.0",
"core-js": "^3.6.5",
"datatables.net": "^1.11.3",
"datatables.net-dt": "^1.11.3",
"dotenv": "^10.0.0",
"jquery": "^3.6.0",
"module": "^1.2.5",
"moment": "^2.29.1",
"vue": "^3.0.0",
"vue-axios": "^3.2.5",
"vue-plugin-load-script": "git://github.com/tserkov/vue-plugin-load-script.git#vue3",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persistedstate": "^4.0.0",
"webpack": "^4.3.0"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat": "^2.6.1",
"gulp-minify": "^3.1.0",
"gulp-sass": "^5.0.0",
"prettier": "^2.2.1",
"resolve-url-loader": "^4.0.0",
"sass": "^1.43.2",
"sass-loader": "^12.1.0"
}
Is it possible, that the reason for the error is because I am running it in production?
If yes, what are my other options for deploying?
I simply need to be able to push it to git repo with git commands and then push it to production and build it.
We have not been able to figure this out.
Instead we used the option of runner in GitLab, so that when we merge into develop/master the script runs automatically and:
builds Vue project
pushes the content folder to ftp while also renaming it to dist

How to configure Yarn Berry, Eslint with GlobalCache in VsCode?

Is there a way to install EsLint with Yarn Berry with yarn option enableGlobalCache: true in VsCode ?
I installed the ESLint (dbaeumer.vscode-eslint) extension and all dependencies :
"devDependencies": {
"#babel/core": ">=7.12.0 <8.0.0",
"#babel/plugin-proposal-class-properties": ">=7.10.4 <8.0.0",
"#babel/plugin-syntax-dynamic-import": ">=7.8.3 <8.0.0",
"#babel/plugin-transform-runtime": ">=7.12.0 <8.0.0",
"#babel/preset-env": ">=7.12.0 <8.0.0",
"#babel/preset-react": ">=7.10.4 <8.0.0",
"#babel/runtime": ">=7.12.0 <8.0.0",
"babel-eslint": ">=10.1.0",
"babel-loader": ">=8.1.0",
"eslint": "^7.12.1",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": ">=6.1.0",
"terser-webpack-plugin": ">=4.1.0",
"webpack": ">=5.2.0",
"webpack-cli": ">=4.1.0"
}
If I do a yarn eslint --init and let npm install all node_modules, eslint works but yarn up will erase node_modules and I have to reinstall the modules.
If I don't install the modules :
Error: An error occurred while generating your JavaScript config file. A config file was still generated, but the config file itself may not follow your linting rules.
Error: Cannot read config file: C:\FrontApplication\Abc\Main\Source\myProject\.yarn\$$virtual\eslint-config-airbnb-virtual-094ee35fd8\6\Users\someone\AppData\Local\Yarn\Berry\cache\eslint-config-airbnb-npm-18.2.0-898fc49dc6-6.zip\node_modules\eslint-config-airbnb\index.js
Error: Cannot find module 'C:\Projets\Abc\Main\Source\myProject\.yarn\$$virtual\eslint-config-airbnb-virtual-094ee35fd8\6\Users\someone\AppData\Local\Yarn\Berry\cache\eslint-config-airbnb-npm-18.2.0-898fc49dc6-6.zip\node_modules\eslint-config-airbnb\index.js'
Require stack:
- C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\noop.js
Require stack:
- C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\noop.js
Referenced from: BaseConfig
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.external_module_.Module._resolveFilename (C:\FrontApplication\Abc\Main\Source\myProject\.pnp.js:10974:54)
at resolveFileName (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:29:39)
at resolveFrom (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:43:9)
at module.exports (C:\Users\someone\AppData\Local\Yarn\Berry\cache\resolve-from-npm-4.0.0-f758ec21bf-6.zip\node_modules\resolve-from\index.js:46:41)
at module.exports (C:\Users\someone\AppData\Local\Yarn\Berry\cache\import-fresh-npm-3.2.1-b4f6711244-6.zip\node_modules\import-fresh\index.js:13:19)
at loadJSConfigFile (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:225:16)
at loAbconfigFile (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:308:20)
at ConfigArrayFactory._loAbconfigData (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:608:42)
at ConfigArrayFactory._loadExtendedShareableConfig (C:\Users\someone\AppData\Local\Yarn\Berry\cache\#eslint-eslintrc-npm-0.2.1-88318143fb-6.zip\node_modules\#eslint\eslintrc\lib\config-array-factory.js:883:21)
Do not install packages individually
use : yarn dlx #yarnpkg/sdks vscode
https://yarnpkg.com/getting-started/editor-sdks
Global cache works fine afterwards

Protractor can't compile Typescript but path exists

I'm running the first protractor example in book "Testing Angular Apps" from Manning.
I have fixed some problems in the tsconfig.json but still Typescript won't compile.
The error shown is
E/launcher - Error: TSError: ⨯ Unable to compile TypeScript:
error TS5058: The specified path does not exist: 'C:/dev/protractor-examples/primerpt/e2e'.
but the path exists.
The example can be found in
https://github.com/pavitx/protractor-examples, after cloning, go to primerpt directory
run
npm install
and then
npm run e2e protractor-first-test.conf.js
The chosen values for typescript and ts-node were maybe too new.
Here are the values that work:
{
"name": "protractor-tests",
"scripts": {
"pree2e": "webdriver-manager update --gecko false --standalone false",
"e2e": "protractor"
},
"devDependencies": {
"#types/jasmine": "^2.5.53",
"#types/jasminewd2": "^2.0.2",
"#types/selenium-webdriver": "^3.0.0",
"protractor": "^5.4.2",
"ts-node": "^3.2.0",
"typescript": "^2.3.3"
}
}
With these values, the test runs successfully after Typescript "transpilation".

Forcing Bower to Install Specific Leaflet Dependency - Resolution Not Working

I am attempting to bower install a variety of leaflet packages. Recently, leaflet upgraded to version 1.1.0 from 1.0.3 which broke several supported libraries. Until the community can fix the issues, I need to have leaflet 1.0.3 installed. Below is part of my bower.json:
"dependencies": {
"angular": "~1.5.0",
"angular-cookies": "~1.5.0",
"angular-bootstrap": "~2.4.0",
"angular-ui-router": "^0.3.2",
"angular-animate": "~1.5.8",
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"normalize-css": "~3.0.3",
"modernizr": "~3.2.0",
"angular-smart-table": "^2.1.8",
"angular-websocket": "^2.0.0",
"angular-pageslide-directive": "^2.1.4",
"ng-scrollbars": "^0.0.11",
"angular-bootstrap-lightbox": "^0.12.0",
"angular-leaflet-directive": "leaflet-directive#^0.10.0",
"Leaflet.extra-markers": "^1.0.6",
"esri-leaflet": "2.0.7",
"angular-bootstrap-toggle": "^0.1.2",
"leaflet-search": "2.7.0",
"leaflet-draw": "0.4.9"
},
"devDependencies": {
"angular-mocks": "~1.4.7"
},
"resolutions": {
"angular": "^1.4.10",
"angular-bootstrap": "~2.4.0",
"leaflet": "1.0.3"
}
However, when I try to force the bower installation using the resolutions, I end up with the following:
I have another instance of this application running, and it still has 1.0.3 from a prior build. It is also using leaflet-draw 0.4.9, leaflet-search 2.7.0, etc... so I know that the 1.0.3 version is compatible.
Looking at each individual package, each bower.json only requires that leaflet: "^1.0.0".
Why is the bower resolution being ignored and not installing 1.0.3? Why is it not even giving me the option to choose 1.0.3 from the list? I considered downloading a local copy and doing an override, but that is not a preferred solution.

How to include ui.bootstrap.datepicker into ng-boilerplate

I am currently using ngboilerplate from: https://github.com/ngbp/ngbp
I want to include the 'ui.bootstrap.datepicker' from UI-Bootstrap (Twitter Bootstrap written natively in AngularJS). The problem is that this doesn't seem to be included in the latest version of ngboilerplate. Does anyone know how I can add this accordingly to the style of ngboilerplate.
This means that other developers can load it as a dependency with bower install.
After trying a couple of things it seems to be quite easy actually. I'll just answer this question in case someone else has the same problem.
I needed to install a new version of UI-Bootstrap. This can be done with bower by executing (on windows):
bower install angular-bootstrap
But this will give you a whole lot of other problems with dependencies.
To resolve this I use this bower.json:
{
"name": "Your-app",
"version": "0.3.1",
"devDependencies": {
"angular": "1.2.4",
"angular-mocks": "1.2.4",
"bootstrap": "3.0.3",
"angular-bootstrap": "0.10.0",
"angular-ui-utils": "0.0.3"
},
"dependencies": {
"angular-ui-router": "0.2.8-bowratic-tedium"
},
"resolutions": {
}
}
Another problem I had was that the LESS code for bootstrap isn't up to date. Instead I just included the bootstrap.css in my main.less file.