dayjs | ⏰ Day.js 2kB immutable date | Date Time Utils library

by iamkun JavaScript Version: v1.11.7 License: MIT

kandi X-RAY | dayjs Summary

dayjs is a JavaScript library typically used in Utilities, Date Time Utils applications. dayjs has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i mydayjs' or download it from GitHub, npm.

English | 简体中文 | 日本語 | Português Brasileiro | 한국어 | Español (España) | Русский. Fast 2kB alternative to Moment.js with the same modern API. Day.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with a largely Moment.js-compatible API. If you use Moment.js, you already know how to use Day.js.

Support

Quality

Security

License

Reuse

kandi-support Support

dayjs has a medium active ecosystem.
It has 42049 star(s) with 2115 fork(s). There are 280 watchers for this library.
There were 3 major release(s) in the last 6 months.
There are 532 open issues and 754 have been closed. On average issues are closed in 62 days. There are 131 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of dayjs is v1.11.7

dayjs Support

Best in #Date Time Utils

Average in #Date Time Utils

dayjs Support

Best in #Date Time Utils

Average in #Date Time Utils

quality kandi Quality

dayjs has 0 bugs and 0 code smells.

dayjs Quality

Best in #Date Time Utils

Average in #Date Time Utils

dayjs Quality

Best in #Date Time Utils

Average in #Date Time Utils

security Security

dayjs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
dayjs code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

dayjs Security

Best in #Date Time Utils

Average in #Date Time Utils

dayjs Security

Best in #Date Time Utils

Average in #Date Time Utils

license License

dayjs is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

dayjs License

Best in #Date Time Utils

Average in #Date Time Utils

dayjs License

Best in #Date Time Utils

Average in #Date Time Utils

build Reuse

dayjs releases are available to install and integrate.
Deployable package is available in npm.
Installation instructions, examples and code snippets are available.

dayjs Reuse

Best in #Date Time Utils

Average in #Date Time Utils

dayjs Reuse

Best in #Date Time Utils

Average in #Date Time Utils

Top functions reviewed by kandi - BETA

kandi has reviewed dayjs and discovered the below as its top functions. This is intended to give you an instant insight into dayjs implemented functionality, and help decide if they suit your requirements.

Translation helper

Creates a parser .

Creates a template string from the text .

Use the time format for a given number .

Get offset from minutes .

Make a relative time with the given name .

Correct hours from one time .

Special - - - case

List all locale

Get the relative time for a given number .

Get all kandi verified functions for this library.

dayjs Key Features

🕒 Familiar Moment.js API & patterns

💪 Immutable

🔥 Chainable

🌐 I18n support

📦 2kb mini library

👫 All browsers supported

dayjs Examples and Code Snippets

Community Discussions

Trending Discussions on dayjs

SvelteKit + Vercel Broken path
Runtime error appeared after updating to webpack 5. TypeError: Cannot read properties of undefined (reading 'default')
Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3
Struggling to have DayJs available for all tests in cypress
Compare two dates in years with comma and leap year
Cannot reset MUI DatePicker from keydown event
Webpack (in prod) bundles give error: TypeError: (0 , tm.useEffect) is not a function...why?
How to solve my project dependencies vulnerability (Webpack, Babel, React)
gatsby-plugin-mdx cannot find module 'gatsby/webpack'
Get beforeDate using dayjs

Trending Discussions on dayjs

QUESTION

SvelteKit + Vercel Broken path

Asked 2022-Mar-10 at 14:21

Im having a problem using readdirSync when using SvelteKit + vercel. The site deploys successfully but one of the serverside load functions fails on a path

The problem does not occur locally if i use npm run dev and it doesnt appear with a local production build via npm run build && npm run preview. The problem appears to be with the path that readdirsync() looks for. But im unable to figure out how to fix this

[index].json.js

import fs from 'fs';
import dayjs from 'dayjs';

export function get() {
    let posts = fs
        .readdirSync(`src/posts`) // <-- this path breaks when deployed with vercel
        .filter((fileName) => /.+\.md$/.test(fileName))
        .map((fileName) => {
            const { metadata, content } = process(`src/posts/${fileName}`);
            return {
                content,
                metadata,
                slug: fileName.slice(0, -3)
            };
        });
    // sort the posts by create date.
    posts.sort(
        (a, b) => dayjs(a.metadata.date, 'MMM D, YYYY') - dayjs(b.metadata.date, 'MMM D, YYYY')
    );
    let body = JSON.stringify(posts);

    return {
        body
    };
}

This is the logs i see in Vercel. Its obvious the path is broken possibly due to incorrect base path, but how do i fix it?

[HEAD] /
11:50:50:04
2021-12-20T16:50:50.092Z    d7448652-906d-49d1-b9f0-938984ab2d18    ERROR   Error: ENOENT: no such file or directory, scandir 'src/posts'
    at Object.readdirSync (fs.js:1047:3)
    at get (/var/task/index.js:56304:33)
    at render_endpoint (/var/task/index.js:56582:26)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async resolve (/var/task/index.js:57661:56)
    at async Object.handle (/var/task/index.js:57999:24)
    at async respond (/var/task/index.js:57644:12)
    at async fetch (/var/task/index.js:57182:28)
    at async load2 (/var/task/index.js:56440:17)
    at async load_node (/var/task/index.js:57265:14)
2021-12-20T16:50:50.093Z    d7448652-906d-49d1-b9f0-938984ab2d18    ERROR   SyntaxError: Unexpected token E in JSON at position 0
    at JSON.parse (<anonymous>)
    at Proxy.<anonymous> (/var/task/index.js:57247:31)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async load2 (/var/task/index.js:56440:17)
    at async load_node (/var/task/index.js:57265:14)
    at async respond$1 (/var/task/index.js:57387:22)
    at async render_page (/var/task/index.js:57516:20)
    at async resolve (/var/task/index.js:57661:104)
    at async Object.handle (/var/task/index.js:57999:24)
    at async respond (/var/task/index.js:57644:12)

ANSWER

Answered 2022-Mar-10 at 14:21

In the end, I opted not to use readdirSync for this case. I'm not entirely sure why it didn't work but since I'm using Vite anyway (from SvelteKit), I chose to try using import.meta.glob and it worked as desired. The API is slightly different though. Working code:

import { slugFromPath } from '$lib/util';

/** @type {import('@sveltejs/kit').RequestHandler} */
export async function get({ query }) {
    const modules = import.meta.glob('./*.{md,svx,svelte.md}');

    const postPromises = [];
    const limit = Number(query.get('limit') ?? Infinity);

    if (Number.isNaN(limit)) {
        return {
            status: 400
        };
    }

    for (let [path, resolver] of Object.entries(modules)) {
        const slug = slugFromPath(path);
        const promise = resolver().then((post) => ({
            slug,
            ...post.metadata
        }));

        postPromises.push(promise);
    }

    const posts = await Promise.all(postPromises);
    const publishedPosts = posts.filter((post) => post.published).slice(0, limit);

    publishedPosts.sort((a, b) => (new Date(a.date) > new Date(b.date) ? -1 : 1));

    return {
        body: publishedPosts.slice(0, limit)
    };

Source https://stackoverflow.com/questions/70425327

QUESTION

Runtime error appeared after updating to webpack 5. TypeError: Cannot read properties of undefined (reading 'default')

Asked 2022-Mar-07 at 17:37

After upgrading my webpack from v4 to v5, I got this error that is getting me a hard time debugging.

Uncaught TypeError: Cannot read properties of undefined (reading 'default')
    at Module.UserEntity (main.9e5d0727.js:3998)
    at Module.<anonymous> (main.9e5d0727.js:5952)
    at __webpack_require__ (runtime-main.9e5d0727.js:28)
    at fn (runtime-main.9e5d0727.js:308)
    at Module.<anonymous> (main.9e5d0727.js:5645)
    at __webpack_require__ (runtime-main.9e5d0727.js:28)
    at fn (runtime-main.9e5d0727.js:308)
    at Module.<anonymous> (main.9e5d0727.js:4022)
    at __webpack_require__ (runtime-main.9e5d0727.js:28)
    at fn (runtime-main.9e5d0727.js:308)

I compared my Sources tab between v4 and v5 webpack versions and I saw a difference in files that are generating using this command cross-env NODE_ENV=local webpack serve --config ./config/webpack.config.js --progress --color

Webpack v4 Webpack v5

Here is my current webpack.config.js

const path = require('path');
const process = require('process');
const NODE_ENV = process.env.NODE_ENV;

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const RemoveWebpackPlugin = require('remove-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const styledComponentsTransformer = require('typescript-plugin-styled-components').default;
const webpack = require('webpack');

const configLocal = require(`./environments/env.local.js`);
const configCommon = require(`./environments/env.common.js`);

const rootPath = process.cwd();
const resolvePath = path.resolve.bind(rootPath);

const production = ['prod', 'production', 'master'].includes(NODE_ENV) ? 'production' : undefined;
const stage = ['staging', 'stage'].includes(NODE_ENV) ? 'staging' : undefined;
const development = ['development', 'dev'].includes(NODE_ENV) ? 'development' : undefined;
const local = 'local';
const ENVIRONMENT = production || stage || development || local;

const STAFF_OAUTH = process.env.STAFF_OAUTH || configLocal.STAFF_OAUTH;
const BACKEND_URL = process.env.BACKEND_URL ? `"${process.env.BACKEND_URL}"` : configLocal.BACKEND_URL;

const environment = {
  ...configCommon,
  ENVIRONMENT: `"${ENVIRONMENT}"`,
  SENTRY_URL: process.env.SENTRY_URL ? `"${process.env.SENTRY_URL}"` : undefined,
  BACKEND_URL,
  STAFF_OAUTH,
  SC_DISABLE_SPEEDY: true
};

const entryPoint = './src/index.tsx';

const config = {
  mode: production || stage ? 'production' : ENVIRONMENT === local ? 'none' : 'development',
  entry: production ? [entryPoint, require.resolve('./ym')] : entryPoint,

  output: {
    path: path.resolve(__dirname, '..', 'build'),
    filename: 'static/js/[name].[fullhash:8].js',
    chunkFilename: 'static/js/[name].[chunkhash:8].js',
    publicPath: '/'
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.jsx'],
    modules: ['node_modules', resolvePath('src')],
    fallback: { fs: false }
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: resolvePath('src'),
        exclude: /node_modules/,
        use: [
          'thread-loader',
          {
            loader: 'ts-loader',
            options: {
              getCustomTransformers: () => ({
                before: [styledComponentsTransformer()]
              }),
              happyPackMode: true,
              transpileOnly: true
            }
          }
        ]
      },
      {
        test: /\.raw\.svg$/,
        use: [
          {
            loader: 'raw-loader',
            options: {
              esModule: false
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        exclude: /\.raw\.svg$/,
        loader: 'url-loader',
        options: {
          esModule: false,
          limit: 10000,
          name: 'static/media/[name].[contenthash].[ext]'
        }
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          }
        ]
      }
    ]
  },

  optimization: {
    minimize: !!(production || stage),
    minimizer: [new TerserPlugin()],
    runtimeChunk: {
      name: entrypoint => `runtime-${entrypoint.name}`
    },
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },

  ignoreWarnings: [/export .* was not found in/],

  plugins: [
    // fix "process is not defined" error
    new webpack.ProvidePlugin({
      process: 'process/browser'
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '..', 'public'),
          to: path.resolve(__dirname, '..', 'build')
        }
      ]
    }),
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new webpack.DefinePlugin(environment),
    new RemoveWebpackPlugin([path.resolve(__dirname, '..', 'build'), path.resolve(__dirname, '..', '.cache')], 'hide')
  ],

  devServer: {
    static: path.resolve(__dirname, '..'),
    hot: true,
    port: 3000,
    host: 'localhost',
    historyApiFallback: true
    // watchOptions: {
    //   ignored: resolvePath('cypress')
    // }
  },

  performance: {
    hints: false
  }
};

if (ENVIRONMENT === development || ENVIRONMENT === local) {
  config.devtool = 'source-map';
}

if (ENVIRONMENT === local) {
  const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

  config.plugins.push(
    new ForkTsCheckerWebpackPlugin({
      eslint: {
        files: './src/**/*.{ts,tsx,js,jsx}'
      },
      typescript: {
        diagnosticOptions: {
          semantic: true,
          syntactic: true
        }
      }
    })
  );
} else {
  const WorkboxPlugin = require('workbox-webpack-plugin');

  config.plugins.push(
    new WorkboxPlugin.GenerateSW({
      clientsClaim: true,
      skipWaiting: false,
      mode: production || stage ? 'production' : undefined,
      exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/]
    })
  );
}

module.exports = config;

And my package.json file

{
  "name": "dispatcher-service-front",
  "version": "1.27.0",
  "license": "UNLICENSED",
  "scripts": {
    "cypress:open": "cypress open",
    "start": "cross-env NODE_ENV=local webpack serve --config ./config/webpack.config.js --progress --color",
    "start:ci": "webpack serve --config ./config/webpack.config.js",
    "build": "webpack --config ./config/webpack.config.js",
    "analyze": "webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint -c .eslintrc.staged.js"
  },
  "dependencies": {
    "@types/node": "^16.0.0",
    "@types/react": "^16.14.1",
    "@types/react-dom": "^16.9.13",
    "@types/react-infinite-scroller": "^1.2.1",
    "@types/react-router-dom": "^5.1.5",
    "@types/uuid": "^8.3.1",
    "computed-async-mobx": "^6.1.0",
    "dayjs": "^1.10.6",
    "mobx": "^5.15.4",
    "mobx-react": "^6.2.2",
    "mobx-utils": "^5.5.7",
    "pik-front-utils": "git+https://gitlab+deploy-token-9:p1C2k__vanbHWx_ntuM_@git.pik.ru/pik-software/pik-front-utils.git#semver:1.0.3",
    "pik-ui-kit": "git+https://gitlab+deploy-token-8:gqgws4edpujq2MyATRR7@git.pik.ru/pik-software/pik-ui-kit.git#semver:1.10.3",
    "process": "^0.11.10",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-infinite-scroller": "^1.2.4",
    "react-is": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "reflect-metadata": "^0.1.13",
    "sanitize.css": "^12.0.1",
    "serializr": "^2.0.5",
    "styled-components": "^5.2.1",
    "typescript": "^4.3.0",
    "typescript-ioc": "^3.2.2",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.11",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "copy-webpack-plugin": "^9.1.0",
    "cross-env": "^7.0.2",
    "css-loader": "^6.5.1",
    "cypress": "^8.6.0",
    "cypress-file-upload": "^5.0.8",
    "eslint": "^7.30.0",
    "eslint-plugin-cypress": "^2.11.3",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsdoc": "^35.4.1",
    "eslint-plugin-prefer-arrow": "^1.2.3",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "fork-ts-checker-webpack-plugin": "^6.4.0",
    "html-webpack-plugin": "^5.5.0",
    "husky": "^4.3.8",
    "lint-staged": "^11.0.0",
    "raw-loader": "^4.0.2",
    "remove-webpack-plugin": "^1.2.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.2.5",
    "thread-loader": "^3.0.4",
    "ts-loader": "^9.2.6",
    "typescript-plugin-styled-components": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.64.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.5.0",
    "workbox-webpack-plugin": "^6.4.1"
  }
}

My file structure looks like this

I changed a few things according to webpack 5 migration guide

In config.output.filename i changed 'static/js/[name].[hash:8].js' => 'static/js/[name].[fullhash:8].js'
Removed node: { fs: 'empty' } and added fallback: { fs: false } in config.output.resolve
stats.warningFilter renamed to ignoreWarnings
Added this plugin to fix "process is not defined" error

 new webpack.ProvidePlugin({
   process: 'process/browser'
 }),

Redirected index.html file from public to src folder and changed a corresponding template in HtmlWebpackPlugin. I did that because there was a conflict on this file between CopyWebpackPlugin and HtmlWebpackPlugin

devServer.contentBase renamed to devServer.static

Commented devServer.watchOptions for now, because watchOptions key is no longer available

Removed two plugins new webpack.HotModuleReplacementPlugin() and new HardSourceWebpackPlugin({ cacheDirectory: path.resolve(__dirname, '..', '.cache')

That's it. Also, I compared how do files build between v4 and v5 versions using webpack --config ./config/webpack.config.js and there was no difference at all! Except in index.html file script tag were moved to <head>

Thanks for taking your time reading this, I will appreciate any help!

ANSWER

Answered 2021-Nov-30 at 00:05

For my version of this error, the issue seemed to be that I was importing a file with an alias in webpack from within the same directory.

To give an example, I had this directory setup:

~/utils (~ is aliased in my webpack)
  /fileWithTheImport.ts (
  /fileToImport.ts
  /index.ts (exports * from the other two files)

I was using import { named } from ~/utils initially and seeing the error.

Once I changed that import to import { named } from './fileToImport.ts' the error resolved and things worked as expected.

In your case

I see that it's having a hard time reading 'default', which would mean to me that the default import for UserEntity may have a similar problem to what I had.

I would try to remove any alias paths if UserEntity is in the same directory and hopefully your issue will go away.

Source https://stackoverflow.com/questions/70015963

QUESTION

Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3

Asked 2022-Feb-18 at 14:50

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3.vuejs.org/guide/migration/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions

Current mismatch error is :

TypeError: Cannot read property 'NormalModule' of undefined
 at VueLoaderPlugin.apply (C:[credentials]\app\node_modules\vue-loader-v16\dist\pluginWebpack5.js:44:47)
    at webpack (C:[credentials]app\node_modules\@vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)
    at serve (C:[credentials]app\node_modules\@vue\cli-service\lib\commands\serve.js:163:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

Package.json:

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run build:dashboard",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "build-storybook": "build-storybook",
    "build:dashboard": "vue-cli-service build --dest $npm_package_config_dashboard src/main.ts",
    "compile-typescript": "tsc",
    "start": "node app.js",
    "storybook": "start-storybook -p 6006",
    "watch:tsc": "npx tsc --watch"
  },
  "dependencies": {
    "@juggle/resize-observer": "^3.2.0",
    "@popperjs/core": "2.4.4",
    "@sentry/browser": "^5.28.0",
    "@sentry/integrations": "^5.28.0",
    "@sentry/tracing": "^5.28.0",
    "@stripe/stripe-js": "^1.9.0",
    "@types/lodash": "^4.14.161",
    "@types/lodash-es": "^4.17.3",
    "@vue/cli-service-global": "^4.5.15",
    "bootstrap": "^4.6.1",
    "chart.js": "3.0.0-beta.6",
    "core-js": "^3.6.5",
    "dayjs": "^1.8.36",
    "jquery": "^3.5.1",
    "lodash-es": "4.17.15",
    "nouislider": "14.6.2",
    "odometer": "0.4.8",
    "patternomaly": "^1.3.2",
    "posthog-js": "^1.7.0",
    "register-service-worker": "^1.7.1",
    "tippy.js": "^6.2.6",
    "vue": "^3.2.20",
    "vue-class-component": "^8.0.0-rc.1",
    "vue-property-decorator": "^10.0.0-rc.3",
    "vue-router": "^4.0.0-alpha.6",
    "vue-shepherd": "0.2.1",
    "vuetify": "^3.0.0-alpha.12",
    "vuex": "^4.0.0-alpha.1",
    "vuex-persist": "^2.3.0"
  },
  "devDependencies": {
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/vue": "^6.2.9",
    "@types/jest": "^26.0.23",
    "@types/jquery": "^3.5.5",
    "@types/node": "^12.12.62",
    "@types/nouislider": "^9.0.5",
    "@types/wnumb": "^1.2.0",
    "@typescript-eslint/eslint-plugin": "^3.10.1",
    "@typescript-eslint/parser": "^3.10.1",
    "@vue/cli": "^4.5.13",
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-pwa": "^4.5.12",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-typescript": "^4.5.12",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.15",
    "@vue/cli-service": "^4.5.13",
    "@vue/compiler-sfc": "^3.2.27",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^5.1.0",
    "@vue/test-utils": "^2.0.0-alpha.1",
    "css-loader": "^4.3.0",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-vue": "^7.0.0-alpha.0",
    "eslint-watch": "^7.0.0",
    "faker": "^5.1.0",
    "fibers": "^5.0.0",
    "husky": "^4.3.0",
    "jest": "^26.4.2",
    "lint-staged": "^10.4.0",
    "node-sass": "^5.0.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.2",
    "prettier-eslint": "^11.0.0",
    "react-is": "^16.13.1",
    "sass": "^1.48.0",
    "sass-loader": "^10.2.0",
    "style-loader": "^1.2.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-scss": "^3.18.0",
    "ts-jest": "^26.3.0",
    "typescript": "^4.4.4",
    "vue-cli-plugin-sass-resources-loader": "^1.0.0",
    "vue-cli-plugin-vue-next": "~0.1.4",
    "vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
    "vue-eslint-parser": "^7.1.0",
    "vue-loader": "^15.9.1",
    "vue-style-loader": "^4.1.3",
    "watch": "^1.0.2",
    "wnumb": "^1.2.0", 
    "babel-eslint": "^10.1.0"
  },
  "config": {
    "dashboardprod": "../../wwwroot/dashboard",
    "dashboard": "./dist"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "vue-cli-service lint",
      "git add"
    ],
    "*.{scss,vue}": "stylelint"
  }
}

Any and all advises are appreciated

ANSWER

Answered 2022-Feb-18 at 14:50

My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.

Migration guide for Vue 2 to 3 here: https://v3-migration.vuejs.org/ Vuetify migration guide: https://next.vuetifyjs.com/en/getting-started/upgrade-guide

Source https://stackoverflow.com/questions/70909114

QUESTION

Compare two dates in years with comma and leap year

Asked 2022-Jan-16 at 17:21

There are many entries on the internet how the difference between two dates can be compared. However, I still haven't found the right solution for me.

In short: I'm looking for the equivalent of dayjs (javascript library - dayJs) function diff with the parameter "years" and a comma. So that I get the output (example): 7.645161290322581 years

const date1 = dayjs('2019-01-25')
date1.diff('2012-06-05', 'year', true) // 6.639424491947131

A nice solution would have been between. Unfortunately, the following code only gives me the year without a comma.

long diff = ChronoUnit.YEARS.between(date1, date2);

Sadly, this solution gives me only 6 years and NOT 6.639424491947131.

I've found other solutions, but they don't take leap years into account.

Could someone please help me here.

//EDIT

Thanks for the anwers. However days is not an option. I need the years with comma. Changed 7.49 to 6.639424491947131

Days / 365 is to inaccurate. Sometimes you have a leap year sometimes not.

ANSWER

Answered 2022-Jan-16 at 16:32

I am not saying this is "the answer" but it should be a suggestion for you to base your solution on.

public static void main(String[] args) {        
    Date date1 = Date.from(Instant.now());
    Calendar cal = new GregorianCalendar(2021,Calendar.JANUARY, 1);
    Date date2 = cal.getTime();
        
    long diffInMillies = Math.abs(date2.getTime() - date1.getTime());
    long diff = TimeUnit.DAYS.convert(diffInMillies, TimeUnit.MILLISECONDS);
    System.out.println("Difference in days: " + diff);
    BigDecimal yDiff = new BigDecimal(diff/365.25);
    System.out.println("Difference in years: " + yDiff.doubleValue());
}

You could take some code like this, and wrap it in a function that manipulates the difference between two dates using standard Java libraries. As you can see in the example below, I used the Java library to calculate the difference of two dates in days, and then I just did a simple calculation to extrapolate the difference in years. I am not sure why this won't be an acceptable compromise.

Using BigDecimal instead of double gives you more precision as well as an easier way to define significant digits.

Source https://stackoverflow.com/questions/70731761

QUESTION

Cannot reset MUI DatePicker from keydown event

Asked 2022-Jan-14 at 15:11

I came across this weird behavior that I cannot explain. The sandbox for the code can be found here.

I'm trying to add the possibility to reset a readOnly field by pressing DEL or BACKSPACE but it does not work. While trying to reproduce the issue, I can reset it when pressing a button, but not when typing on the keyboard; why?

import React, { useCallback, useState } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import AdapterDayjs from "@mui/lab/AdapterDayjs";
import LocalizationProvider from "@mui/lab/LocalizationProvider";
import DatePicker from "@mui/lab/DatePicker";
import Typography from "@mui/material/Typography";

import frLocaleDate from "dayjs/locale/fr";

export default function BasicDatePicker() {
  const [value, setValue] = useState(null);
  const [message, setMessage] = useState("");

  const handleChanged = useCallback((newValue) => {
    setMessage("Value changed to " + newValue);
    setValue(newValue);
  }, []);
  const handleInputKeyDown = useCallback((event) => {
    if (event.keyCode === 8 || event.keyCode === 46) {
      setMessage("Reset through handleInputKeyDown");
      setValue(null);
    }
  }, []);
  const handleReset = useCallback(() => {
    setMessage("Reset through handleReset");
    setValue(null);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} locale={frLocaleDate}>
      <Typography>Try pressing DEL or BACKSPACE to clear</Typography>
      <DatePicker
        clearable
        showTodayButton
        label="Basic example"
        inputFormat="LL"
        value={value}
        onChange={handleChanged}
        renderInput={({ InputProps, inputProps, ...props }) => (
          <TextField
            fullWidth
            margin="dense"
            size="small"
            onKeyDown={handleInputKeyDown}
            InputProps={{ ...InputProps }}
            inputProps={{ ...inputProps, readOnly: true, placeholder: "" }}
            {...props}
          />
        )}
      />
      <Button onClick={handleReset}>Reset</Button>
      <Typography>
        Debug: <pre>{message}</pre>
      </Typography>
      <Typography>
        Current value: <pre>{JSON.stringify(value)}</pre>
      </Typography>
    </LocalizationProvider>
  );
}

I tried to delay the setValue(null) inside of the handleInputKeyDown function, but even if the value is null, the input still displays a value.

** Update **

The problem occurs only when the field has focus. If I change the handleInputKeyDown like this, press DEL and click away from the input field (i.e. causing it to lose focus), then the field is reset after 2 seconds (when the setTimeout calls the handler function).

const handleInputKeyDown = useCallback((event) => {
  if (event.keyCode === 8 || event.keyCode === 46) {
    setTimeout(() => {
      setMessage("Reset through handleInputKeyDown");
      setValue(null);
    }, 2000);
  }
}, []);

I tried adding a ref to the DatePicker component, then calling ref.current.blur();, but it does not work, and the element does not lose focus.

** Update 2 **

Following Emanuele Scarabattoli's answer and explanation, this also seems to work in my particular case :

const handleInputKeyDown = useCallback((event) => {
  //event.preventDefault();
  if (event.keyCode === 8 || event.keyCode === 46) {
    setTimeout(() => {
      event.target.blur();  // blur outside the scope of keyDown
      setMessage("Reset through handleInputKeyDown");
      setValue(null);
    }, 0);
  }
}, []);

Which raises this other issue : When the field is focused, changing the value will not update the display. This is problematic when the user selects the field, but the program updates it programmatically; the values gets updated but the user does not have a feedback of the changes.

ANSWER

Answered 2022-Jan-14 at 15:11

After your suggestion in the update, I got this workaround:

const handleInputKeyDown = useCallback((event) => {
  event.target.blur() // As you suggested
  event.preventDefault() // This does the trick
  if (event.keyCode === 8 || event.keyCode === 46) {
    setMessage("Reset through handleInputKeyDown");
    setValue(null);
  }
}, [setMessage, setValue]); // Better to add, as per React documentation

Possible explanation

Disclaimer: this explanation is not demonstrated and it is not necessarily true!

Since the DEL key, as default behavior, is used as a key to delete a character, my impression is that the default behavior have to be prevented to make it work differently. Probably this is due to something related to event.target.value in the event. I mean, possibly, the browser, in case of DEL or ESC pressed, is propagating an event that, at the end, does something like valueOfTheInput = event.target.value, even if the value itself is not changed, so we need to avoid this.

Source https://stackoverflow.com/questions/70711481

QUESTION

Webpack (in prod) bundles give error: TypeError: (0 , tm.useEffect) is not a function...why?

Asked 2022-Jan-05 at 06:10

My React app is using Webpack + Babel. When I compile in development everything works perfectly well.

When I bundle for production ("npm run build") and upload the bundle in prod, an error appear in the console:

Why? I found a similar question but didn't find an answer : related stackoverflow question

Here's my webpack.prod.js config:

const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin, web } = require("webpack");
const cleanPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "production",

  devtool: "source-map",
  entry: ["regenerator-runtime/runtime.js", "./src/index.js"],

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",

  },

  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /[\\/]node_modules[\\/]/,

        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.svg$/,
        use: {
          loader: "svg-url-loader",
        },
      },
    ],
  },

  resolve: {
    alias: { react: path.resolve("./node_modules/react") },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      title: "Production",
    }),
    //no need to import react in every module
    new ProvidePlugin({
      React: "react",
    }),
    //erase "dist" bundle before every "npm run build"
    new cleanPlugin.CleanWebpackPlugin(),
  ],

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
  
};

Package.json:

{
  "name": "timerfrontend",
  "version": "1.0.0",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --config webpack.config.js",
    "create": "webpack -w",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "@babel/preset-react": "^7.16.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.3.1",
    "html-webpack-plugin": "^5.3.1",
    "style-loader": "^3.3.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.7.1"
  },
  "dependencies": {
    "@apollo/client": "^3.5.6",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^4.0.0",
    "@auth0/auth0-react": "^1.8.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "bootstrap": "^5.0.1",
    "clean-webpack-plugin": "^4.0.0",
    "dayjs": "^1.10.5",
    "npm-force-resolutions": "^0.0.10",
    "prop-types": "^15.8.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "regenerator-runtime": "^0.13.9",
    "svg-url-loader": "^7.1.1",
    "terser-webpack-plugin": "^5.3.0",
    "webpack-merge": "^5.8.0"
  },
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "description": "",
  "resolutions": {
    "react": "17.0.2",
    "graphql": "16.1.0"
  }
}

The console error point to that index bundle.js:2 code :

The error refer to this react component in my project:

import React, { useEffect } from "react";
import { useMutation } from "@apollo/client";
import { NEW_SESSION, newSessionVariables } from "../../graphql/newSession.js";
import { GET_TOTAL_SESSIONS_TODAY } from "../../graphql/getSessions";
import dayjs from "dayjs";

const sessionCreateDate = dayjs().format("M-D-YYYY");

const TimerAtZero = ({ timerState, toggle, user = { name: "" } }) => {
  const [createSession, { data, loading, error }] = useMutation(NEW_SESSION, {
    refetchQueries: [
      { query: GET_TOTAL_SESSIONS_TODAY, variables: { sessionCreateDate, userName: user.name } },
    ],
  });
  const { endSession } = toggle;

  React.useEffect(() => {
    if (timerState.seconds === 0 && timerState.minutes === 0) {
      endSession();
      createSession(newSessionVariables(user.name, timerState));
    }
  }, [timerState.seconds, timerState.minutes]);

  if (loading) return <div>Submitting...</div>;
  if (error) return <div>{error.message}</div>;
  return null;
};

export default TimerAtZero;

ANSWER

Answered 2021-Dec-30 at 17:37

Pointing an alias to a node module is an error. Just remove your resolve entry and everything should run fine.

const TerserPlugin = require("terser-webpack-plugin");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin, web } = require("webpack");
const cleanPlugin = require("clean-webpack-plugin");

module.exports = {
  mode: "production",

  devtool: "source-map",
  entry: ["regenerator-runtime/runtime.js", "./src/index.js"],

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",

  },

  module: {
    rules: [
      {
        test: /\.(jsx|js)$/,
        exclude: /[\\/]node_modules[\\/]/,

        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.svg$/,
        use: {
          loader: "svg-url-loader",
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      title: "Production",
    }),
    new ProvidePlugin({
      React: "react",
    }),
    new cleanPlugin.CleanWebpackPlugin(),
  ],

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
      }),
    ],
  },
  
};

If it still crash, remove the ProvidePlugin and manually import React in the impacted files.

Source https://stackoverflow.com/questions/70515669

QUESTION

How to solve my project dependencies vulnerability (Webpack, Babel, React)

Asked 2021-Dec-13 at 23:38

I have a React project using Babel and Webpack. Recently I realized that my webpack wasn't "hot loading" anymore when I make a change in my project files. (this cause me some trouble, anyhow)

I audited my npm dependencies and had 60 vulnerabilities with 9 high and 2 critical. I thought this should be taken care of.

Now, I tried to install the package that seems to broke things (using npm audit) but to no avail. I still got 31 vulnerabilities even after trying to install a different version of React Script.

Now, if I try to start my app, webpack doesn't compile saying "Cannot find module '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining'"

I tried to install the Babel dependencies but every time a new one comes up. I know Babel just recently updated to 7.16 (October 31, 2021). Is this why my problems started?

How should I go about resolving all those dependencies issues? I feel it's a never ending instance of install a new packages that just break another one...

Package.json

{
  "name": "timerfrontend",
  "version": "1.0.0",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve",
    "create": "webpack -w",
    "build": "webpack -p"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.13.13",
    "@webpack-cli/serve": "^1.6.0",
    "ansi-html": "^0.0.7",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.2.3",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^5.2.6",
    "html-webpack-plugin": "^5.3.1",
    "react-scripts": "^4.0.3",
    "style-loader": "^2.0.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-middleware": "^5.2.2",
    "webpack-dev-server": "^4.6.0"
  },
  "dependencies": {
    "2": "^3.0.0",
    "@apollo/link-context": "^2.0.0-beta.3",
    "@apollo/react-hooks": "^4.0.0",
    "@auth0/auth0-react": "^1.8.0",
    "@auth0/auth0-spa-js": "^1.16.1",
    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.16.2",
    "@babel/plugin-proposal-class-static-block": "^7.16.0",
    "@babel/plugin-proposal-private-property-in-object": "^7.16.0",
    "@babel/plugin-syntax-class-static-block": "^7.14.5",
    "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
    "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
    "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
    "@graphql-tools/url-loader": "^6.10.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@rollup/plugin-babel": "^5.3.0",
    "@webpack-cli/init": "^1.0.3",
    "acorn": "^8.6.0",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-context": "^1.0.20",
    "apollo-link-http": "^1.5.17",
    "apollo-server": "^2.24.1",
    "apollo-server-express": "^2.24.1",
    "bootstrap": "^5.0.1",
    "browserslist": "^4.18.1",
    "chokidar": "^3.5.2",
    "dayjs": "^1.10.5",
    "eslint-webpack-plugin": "^3.1.1",
    "fetchql": "^3.0.0",
    "fs": "^0.0.1-security",
    "fsevents": "^1.2.13",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.12.4",
    "graphql-tools": "^7.0.5",
    "joi": "^17.5.0",
    "node": "^16.1.0",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-refresh": "^0.11.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "svg-url-loader": "^7.1.1",
    "tough-cookie": "^2.5.0",
    "webpack-bundle-analyzer": "^4.5.0"
  },
  "description": ""
}

ANSWER

Answered 2021-Dec-13 at 23:38

QUICK UPDATE

I made progress over my dependencies vulnerabilities. The main issue was a package that was interfering with the others. But I didn't clean my packages in a long time so it was impossible to know which one.

Here's my process: (to check what needs to be updated)

npm oudated

(checking for dependencies that aren't used or duplicate another)

depcheck

I proceed to delete and update all relevant packages and my vulnerabilities dropped to one. (it was 60 before with 2 critical) Then, I used the "npm audit fix" for the the last one.

I still have issue with my babel configuration but that's sign my original problem was.....elsewhere.

Source https://stackoverflow.com/questions/70329919

QUESTION

gatsby-plugin-mdx cannot find module 'gatsby/webpack'

Asked 2021-Dec-06 at 09:58

I've just added gatsby-plugin-mdx to my gatsby plugins, but I keep getting this error when I start the project.

Error in "/Gatsby/node_modules/gatsby-plugin-mdx/gatsby-node.js": 
Cannot find module 'gatsby/webpack'

I did notice that there were some version warnings going on like the one below, but I'm not sure if that's the issue since it works as long as gatsby-plugin-mdx is not added to gatsby-config.
I'm pretty new to gatsby, and most of the plugins added were from following their tutorials, so I'm really scratching my head here.
Any ideas what's causing this and how to fix it?

warn Plugin gatsby-plugin-sass is not compatible with your 
gatsby version 3.14.6 - It requires gatsby@^4.0.0-next

Here's my package.json

{
  "name": "gatsby",
  "version": "1.0.0",
  "private": true,
  "description": "Gatsby",
  "author": "V",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop",
    "start": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "@react-three/cannon": "^4.0.1",
    "@react-three/drei": "^7.22.1",
    "@react-three/fiber": "^7.0.19",
    "classnames": "^2.3.1",
    "dayjs": "^1.10.7",
    "framer-motion": "^5.3.0",
    "gatsby": "^3.12.1",
    "gatsby-plugin-gatsby-cloud": "^3.0.0",
    "gatsby-plugin-image": "^1.12.0",
    "gatsby-plugin-layout": "^3.2.0",
    "gatsby-plugin-mdx": "^3.3.0",
    "gatsby-plugin-sass": "^5.1.1",
    "gatsby-plugin-sharp": "^3.12.0",
    "gatsby-source-filesystem": "^4.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "sass": "^1.43.4",
    "three": "^0.134.0"
  },
  "devDependencies": {}
}

And my gatsby-config.js

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "Gatsby",
  },
  plugins: [
    "gatsby-plugin-gatsby-cloud",
    "gatsby-plugin-image",
    "gatsby-plugin-sharp",
    `gatsby-plugin-sass`,
    "gatsby-plugin-layout",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: `src`,
        path: `${__dirname}/src/works/`,
      },
    },
    "gatsby-plugin-mdx" // adding this creates error!
  ],
};

ANSWER

Answered 2021-Dec-06 at 09:58

It's difficult to spot without seeing the site live but I guess that the underlying issue is the gatsby-plugin-mdx version (^3.3.0). According to the changelog, the release note is linked to Gatsby v4.3, which is not compatible with your current Gatsby since yours is 3.14.6 and it requires a major upgrade (Gatsby 4).

That said, you have two options:

Upgrade Gatsby and all the related dependencies at least until version 4
Downgrade gatsby-plugin-mdx to 2.14.0 which apparently is compatible to your current Gatsby version.

In both cases, you'll need to get rid of the package-lock.json (or yarn.lock) and reinstall the package to the needed version.

Source https://stackoverflow.com/questions/70235687