We Keep Coding

Vue cal dates and time are showing undefined in nuxt

For a fresh project vue-cal is installing fine in Nuxt2. But when I try to install it in one of my old project it is showing undefined in the dates and weeks.
I think one of my package is affecting the vue-cal project. Can you check the package file and tell me which package may be the issue for this problem?
"dependencies": {
"#braid/vue-formulate": "^2.4.3",
"#chenfengyuan/vue-countdown": "^1.1.5",
"#grpc/grpc-js": "^1.6.2",
"#hexdigital/nuxt-intercom": "0.0.9",
"#improbable-eng/grpc-web": "^0.14.0",
"#mercury-labs1/augmentive-node-proto": "^1.3.68",
"#mercury-labs1/augmentive-proto": "^1.3.68",
"#netsells/nuxt-hotjar": "^0.1.2",
"#nuxtjs/auth": "^4.9.1",
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/dotenv": "^1.4.1",
"#nuxtjs/gtm": "^2.4.0",
"#nuxtjs/robots": "^2.5.0",
"#nuxtjs/sentry": "^4.3.5",
"#nuxtjs/svg-sprite": "^0.4.12",
"#riophae/vue-treeselect": "^0.4.0",
"#tryghost/content-api": "^1.5.13",
"#twilio/rtc-diagnostics": "^1.0.0",
"algoliasearch": "^4.11.0",
"axios": "^0.21.1",
"babel-runtime": "^6.26.0",
"buefy": "^0.9.4",
"chart.js": "^2.9.4",
"defu": "^5.0.0",
"disable-scroll": "^0.5.1",
"flickity": "^2.2.1",
"getstream": "^7.4.0",
"google-protobuf": "^3.14.0-rc.1",
"grpc-web": "^1.2.1",
"grpc-web-node-http-transport": "0.0.1",
"gsap": "^3.7.0",
"instantsearch.css": "^7.4.5",
"lodash": "^4.17.21",
"mapbox-gl": "^2.6.1",
"moment": "^2.28.0",
"moment-timezone": "^0.5.34",
"nuxt": "^2.0.0",
"nuxt-buefy": "^0.4.8",
"nuxt-facebook-pixel-module": "^1.5.0",
"nuxt-logrocket": "^1.5.2",
"posthog-js": "^1.20.0",
"screenfull": "^5.0.2",
"socket.io-client": "1.4.8",
"stream-chat": "^6.2.0",
"timezones-list": "^1.1.1",
"twilio-chat": "^4.0.0",
"twilio-video": "^2.18.0",
"v-calendar": "^2.3.0",
"vue-cal": "^3.11.0",
"vue-chartjs": "^3.5.1",
"vue-core-video-player": "^0.2.0",
"vue-device-detector": "^1.1.6",
"vue-flickity": "^1.2.1",
"vue-instantsearch": "^4.1.1",
"vue-line-clamp": "^1.3.2",
"vue-loading-skeleton": "^1.1.9",
"vue-moment": "^4.1.0",
"vue-progress": "^0.2.1",
"vue-radial-progress": "^0.3.2",
"vue-read-more": "^1.1.1",
"vue-select": "^3.11.0",
"vue-slider-component": "^3.2.11",
"vue-social-sharing": "^3.0.8",
"vue-switches": "^2.0.1",
"vue-tel-input": "^4.4.2",
"vue2-editor": "^2.10.2",
"vue2-perfect-scrollbar": "^1.5.0",
"vue2-smooth-scroll": "^1.6.0",
"vue2-timepicker": "^1.1.5",
"vuejs-paginate": "^2.1.0"
},
"devDependencies": {
"#babel/core": "^7.13.1",
"#babel/plugin-proposal-class-properties": "^7.13.0",
"#babel/plugin-transform-runtime": "^7.13.4",
"#babel/preset-env": "^7.12.17",
"#nuxtjs/style-resources": "^1.0.0",
"#types/google-protobuf": "^3.15.5",
"cypress": "^7.5.0",
"eslint-plugin-cypress": "^2.11.3",
"node-sass": "^4.14.1",
"nuxt-purgecss": "^1.0.0",
"sass-loader": "^8.0.2",
"start-server-and-test": "^1.12.2"
}

OP fixed the issue by upgrading the nuxt and vue modules!

How to make typescript repo work when installed in javascript project

I have created a repo that contains some files in javascript and some in typescript it works fine. but when I installed this repo into another project which is purely javascript in that case when I import any file which is written in typescript I get the error Unable to resolve the path to module 'myRepo/sum'.
NOTE: The app which is consuming myRepo could not setup typescript, it should work with myRepo changes
Solution Tried: added postinstall hook as tsc but that doesn't work
sharing my package.json which is fetching myRepo written in js and ts
{
"name": "test-repo",
"private": true,
"sideEffects": false,
"scripts": {
"test:jest": "npx jest",
"build:dev": "BABEL_ENV=development webpack --config webpack/webpack.dev.js",
"build:devWatch": "BABEL_ENV=development webpack --watch true --config webpack/webpack.dev.js",
"start:dev": "nf start & npm run build:dev"
},
"devDependencies": {
"#babel/cli": "^7.0.0",
"#babel/core": "^7.10.4",
"#babel/plugin-syntax-async-generators": "^7.8.4",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-async-to-generator": "^7.10.4",
"#babel/plugin-transform-regenerator": "^7.10.4",
"#babel/plugin-transform-runtime": "^7.13.10",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#babel/register": "^7.10.4",
"#fullhuman/postcss-purgecss": "^2.3.0",
"#tanepiper/robots-webpack-plugin": "^0.4.0",
"#testing-library/react": "^11.2.5",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.4.2",
"babel-loader": "^8.0.6",
"babel-plugin-dynamic-import-node": "^2.3.3",
"babel-plugin-root-import": "^6.1.0",
"babel-plugin-source-map-support": "^2.0.1",
"babel-plugin-transform-imports": "^1.5.1",
"babel-preset-airbnb": "^5.0.0",
"cssnano": "^4.1.10",
"cypress": "^4.12.1",
"cypress-image-snapshot": "^3.1.1",
"cypress-log-to-output": "^1.0.8",
"dotenv": "^6.2.0",
"enzyme": "^3.4.2",
"enzyme-adapter-react-16": "^1.2.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.3.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-plugin-cypress": "^2.2.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.11.1",
"exports-loader": "^0.7.0",
"file-loader": "^1.1.11",
"html-loader": "^1.3.2",
"html-loader-jest": "^0.2.1",
"http-proxy": "^1.17.0",
"http-server": "^0.11.1",
"image-webpack-loader": "^7.0.1",
"imports-loader": "^0.8.0",
"js-yaml": "^3.13.0",
"postcss": "^7.0.27",
"postcss-cli": "^6.1.3",
"postcss-custom-properties": "^9.1.1",
"postcss-import": "^12.0.1",
"react-test-renderer": "^16.4.2",
"serverless": "^1.50.1",
"serverless-finch": "^2.4.2",
"serverless-offline": "^5.8.0",
"serverless-plugin-common-layers": "^1.0.0",
"serverless-plugin-tracing": "2.0.0",
"string-replace-loader": "^2.2.0",
"svg-url-loader": "^7.1.1",
"terser-webpack-plugin": "^1.2.3",
"uglifyjs-webpack-plugin": "^2.1.2",
"url-loader": "^2.2.0",
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.1.0",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.2.1",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"airbnb-browser-shims": "^3.3.0",
"jest": "^25.1.0",
"myRepo": "git+ssh://git#github.com:githUser/myRepo.git#master",
"prop-types": "^15.6.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-google-recaptcha": "^2.1.0",
"react-hook-form": "^6.15.4",
"react-hook-inview": "^4.3.8",
"react-loadable": "^5.5.0",
"regenerator-runtime": "^0.13.5",
"rollbar": "^2.4.1",
"sanitize-html": "^2.3.2",
"source-map-support": "^0.5.16",
"style-loader": "^1.2.1",
"uuid": "^3.3.3",
"validator": "^13.5.2",
"whatwg-fetch": "^2.0.4",
"xss-filters": "^1.2.7"
}
}

TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext is not a function (react frontend, node backend)

So I am trying to localhost a project but I get an error when opening localhost. I provided what the console states, what I see when on localhost:3000 and the packageJson from both the frontend and the backend. I figured It could have to do with a wrong version that's making it break since I have seen similar posts but I'm unsure. I'm happy to provide more information if necessary.
This is what the console shows:
[0] Find the server at: http://localhost:3001/
[0] Connected to Redis
[0] Connected to MongoDB
[1] [1] ℹ ｢wds｣: Project is running at http://192.168.2.103/
[1] [1] ℹ ｢wds｣: webpack output is served from
[1] [1] ℹ ｢wds｣: Content not from webpack is served from /Users/taroholtappels/Desktop/rustwebsite-master/client/public
[1] [1] ℹ ｢wds｣: 404s will fallback to /
[1] [1] Starting the development server...
[1] [1]
[0] Updated prices!
[1] [1] Compiled with warnings.
This is what I see when opening localhost 3000
TypeError: react__WEBPACK_IMPORTED_MODULE_0___default.a.createContext is not a function
Module../node_modules/react-notifications/node_modules/react-transition-group/esm/TransitionGroupContext.js
node_modules/react-notifications/node_modules/react-transition-group/esm/TransitionGroupContext.js:2
1 | import React from 'react';
> 2 | export default React.createContext(null);
here is the PackageJson from the frontend:
"private": true,
"proxy": "http://localhost:3001",
"dependencies": {
"body-parser": "^1.17.1",
"bootstrap": "^3.3.7",
"express-jwt": "^5.3.0",
"express-session": "^1.15.2",
"font-awesome": "^4.7.0",
"gsap": "^1.20.6",
"history": "^4.6.1",
"immutability-helper": "^2.2.0",
"jsonwebtoken": "^7.4.0",
"jwt-decode": "^2.2.0",
"moment": "^2.18.1",
"passport": "^0.3.2",
"passport-steam": "^1.0.8",
"react": "^15.6.2",
"react-addons-css-transition-group": "^15.5.2",
"react-bootstrap": "^0.31.0",
"react-circular-progressbar": "^0.1.4",
"react-countup": "^2.1.1",
"react-dom": "^15.6.2",
"react-fontawesome": "^1.6.1",
"react-lightweight-tooltip": "0.0.4",
"react-modal": "^1.7.7",
"react-notifications": "^1.3.0",
"react-progressbar.js": "^0.2.0",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-bootstrap": "^0.24.2",
"react-router-dom": "^4.1.1",
"react-router-redux": "^5.0.0-alpha.6",
"redux": "^3.6.0",
"redux-logger": "^3.0.6",
"redux-persist": "^4.8.0",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.10",
"semantic-ui-react": "^0.70.0",
"socket.io": "^1.7.3",
"socket.io-client": "^2.0.1",
"socketio-jwt": "^4.5.0"
},
"devDependencies": {
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-display-name": "^6.23.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-typecheck": "^3.9.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"concurrently": "^3.4.0",
"node-sass": "^4.5.2",
"react-scripts": "^3.4.1"
and the Packagejson from the backend
"private": true,
"dependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-plugin-add-module-exports": "^1.0.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-typecheck": "^3.9.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",
"bluebird": "^3.5.0",
"body-parser": "^1.17.1",
"connect-mongo": "^3.2.0",
"express": "^4.17.1",
"express-session": "^1.15.2",
"jsonwebtoken": "^8.5.1",
"jwt-decode": "^2.2.0",
"moment": "^2.18.1",
"mongoose": "^5.9.10",
"mongoose-auto-increment": "^5.0.1",
"node-fetch": "^2.6.0",
"passport": "^0.4.1",
"passport-steam": "^1.0.8",
"path": "^0.12.7",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^5.1.2",
"react-transition-group": "^1.2.1",
"redis": "^3.0.2",
"redis-server": "^1.2.2",
"request": "^2.81.0",
"socket.io": "^2.0.1",
"socketio-jwt": "^4.5.0",
"steam-totp": "^2.1.1",
"steam-tradeoffer-manager": "^2.10.1",
"steam-user": "^4.12.4",
"steamcommunity": "^3.40.1"

The most current version of react contexts isn't available until version 16.3 while you are using version 15 (on the frontend). You should update to version 16.3/greater or use the legacy version documentation if you cannot update. https://reactjs.org/docs/legacy-context.html

Webpack 4 with multiple entries and .css

So I am trying to migrate from webpack 1 to webpack 4.
This is my project structure:
src/
=entry/
==(entry_points related to .html files).js
=html/
==(names).html
=resources/
==css/
===(folders with css files)/
==fonts
===(font files)
==images/
===(a lot of images in folders)
So I succefully can export html files to the dist/ directory, but images and css is not exporting correctly.
My webpack 1 config(works fine):
https://codepen.io/mepuduah/pen/QWwGELb
My webpack 4 config(doesn't work fine): https://codepen.io/mepuduah/pen/XWJNdop
My package.json scripts:
"build": "webpack --display-error-details",
"dev": "webpack-dev-server --hot --inline --progress --content-base src --host 0.0.0.0"
Also package list:
"devDependencies": {
"#babel/core": "^7.7.4",
"autoprefixer": "^8.2.0",
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-plugin-ttag": "^1.7.24",
"babel-preset-env": "^1.6.1",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^5.0.5",
"css-loader": "^0.28.11",
"ejs-compiled-loader": "^1.1.0",
"ejs-render-loader": "^1.0.0",
"ejs-webpack-loader": "^2.2.2",
"expose-loader": "^0.7.5",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"fibers": "^4.0.2",
"file-loader": "^5.0.2",
"firebase-tools": "^6.10.0",
"glob": "^7.1.6",
"globalize-webpack-plugin": "^3.0.0",
"hammer-slider": "^0.1.10",
"hooks": "^0.3.2",
"html-loader": "^0.4.3",
"html-minify-loader": "^1.1.0",
"html-webpack-plugin": "^3.2.0",
"i": "^0.3.6",
"i18n-webpack-plugin": "^1.0.0",
"image-webpack-loader": "^6.0.0",
"imports-loader": "^0.6.4",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"npm": "^6.13.2",
"postcss-loader": "^2.1.3",
"precss": "^1.4.0",
"sass": "^1.23.7",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"underscore": "^1.8.3",
"url-loader": "^0.5.6",
"vanilla-tilt": "^1.7.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.12",
"webpack-dev-server": "^3.9.0",
"webpack-i18n": "^0.1.8",
"webpack-md5-hash": "0.0.6"
},
"dependencies": {
"ejs": "^3.0.1",
"ejs-html": "^5.1.5",
"ejs-loader": "^0.3.5",
"lodash.debounce": "^4.0.8",
"ttag": "^1.7.21"
}

Is it possible to merge npm depenencies from another package to the current package?

For example, I'm developing my own project package:
/myproject
/package.json
Where the dependencies is empty:
dependencies: {
}
And currently I just want to import all the dependencies from another package, is it possible?
Like if I want to import the dependencies from the belowing git package:
https://github.com/iview/iview-admin
That is, import and merge the below dependencies into the current package, with some command, is it possible?
"dependencies": {
"area-data": "^1.0.0",
"axios": "^0.17.1",
"clipboard": "^1.7.1",
"countup": "^1.8.2",
"cropperjs": "^1.2.2",
"echarts": "^3.8.5",
"html2canvas": "^0.5.0-beta4",
"iview": "^2.8.0",
"iview-area": "^1.5.16",
"js-cookie": "^2.2.0",
"rasterizehtml": "^1.2.4",
"simplemde": "^1.11.2",
"sortablejs": "^1.7.0",
"tinymce": "^4.7.4",
"vue": "^2.5.13",
"vue-router": "^3.0.1",
"vue-virtual-scroller": "^0.10.6",
"vuex": "^3.0.1",
"xlsx": "^0.11.17"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel": "^6.23.0",
"babel-core": "^6.23.1",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.24.1",
"babel-runtime": "^6.11.6",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^4.3.1",
"css-hot-loader": "^1.3.5",
"css-loader": "^0.28.8",
"ejs-loader": "^0.3.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"happypack": "^4.0.1",
"html-loader": "^0.5.4",
"html-webpack-plugin": "^2.28.0",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"semver": "^5.4.1",
"style-loader": "^0.19.1",
"unsupported": "^1.1.0",
"url-loader": "^0.6.2",
"vue-hot-reload-api": "^2.2.4",
"vue-html-loader": "^1.2.3",
"vue-i18n": "^5.0.3",
"vue-loader": "^13.7.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.13",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.10.1",
"webpack-merge": "^4.1.1",
"webpack-uglify-parallel": "^0.1.4"
}

If your local package.json is empty - you can just c/p dependencies.
Also, if your question is about doing this from time to time, with different projects, you can consider using a npm package that provides such function.
It also will warn you about any potential conflicts of the versions declared.