nuxt-community / date-fns-module Goto Github PK

Hi, if I describe locales in nuxt.config.js file, it seems that all locales are included in the build file. But if no locales are defined, the output is tiny as expected.

You can see it on the screenshots below. I got them via yarn nuxt build --analyze

No locales included in nuxt.config.js:

locales included as locales: "en-US":

How can we avoid this to make output smaller?

nuxt.config.js:

  dateFns: {
    locales: ['ru', 'en', 'kk'],
    defaultLocale: 'ru',
  },

component.vue:

<div>{{
  $dateFns.format(n.created_at, 'dd MMMM, yyyy, HH:mm', {
    locale: 'en',
  })
}}</div>

Throws me an error: "[date-fns] locale 'en' not found." If i choose other languages, like 'ru', 'kk' - it does work, issue is with en language.

repo: https://github.com/productfrontenddeveloper/nuxt3_bug

nuxt/bridge#226

Be able to do that:

this.$dataFns.setDefaultLocale('en')
this.$dataFns.getDefaultLocale()

this.$dataFns.setFallbackLocale('en')
this.$dataFns.getFallbackLocale()

this.$dataFns.setFormat('Y-m-d')
this.$dataFns.getFormat()

version: "@nuxtjs/date-fns": "^1.5.0"

For now only uppercase fromat string can work, like YYYY-MM-DD

{{ $dateFns.format(new Date('2021-05-01'), 'yyyy-MM-dd') }}  // output `yyyy-05-za`

{{ $dateFns.format(new Date('2021-05-01'), 'YYYY-MM-DD') }}  // output `2021-05-01`

TypeError: Cannot read properties of null (reading 'map')

Versions

nuxt-vite: 0.0.18
nuxt: 2.15.2

Reproduction

https://github.com/pushpak1300/pushpak1300.github.io

Description

The client and server is getting compiled when I run npm run dev
But showing an error in the console
Uncaught SyntaxError: The requested module '/@fs/home/pushpak1300/Desktop/projects/javascript/pushpak1300.github.io/node_modules/.cache/vite/client/date-fns.js?v=25441ce8' does not provide an export named 'default'

Apart from this everything is working as expected
Output for build

   ╭───────────────────────────────────────────────────────╮
   │                                                       │
   │   Nuxt @ v2.15.2                                      │
   │                                                       │
   │   ▸ Environment: development                          │
   │   ▸ Rendering:   client-side                          │
   │   ▸ Target:      static                               │
   │                                                       │
   │   Listening: http://localhost:3000/                   │
   │                                                       │
   │   ⚡  Vite Mode Enabled (v0.0.18)                     │
   │   Tailwind Viewer: http://localhost:3000/_tailwind/   │
   │                                                       │
   ╰───────────────────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                         11:03:28
ℹ Initial build may take a while                                                                                                            11:03:28
ℹ Discovered Components: .nuxt/components/readme.md                                                                                         11:03:28
✔ Builder initialized                                                                                                                       11:03:28
✔ Nuxt files generated                                                                                                                      11:03:29
✔ Client compiled successfully in 0.036s                                                                                                    11:03:29
✔ Server compiled successfully in 0.048s                                                                                                    11:03:29
ℹ Waiting for file changes                                                                                                                  11:03:29
ℹ Memory usage: 89.9 MB (RSS: 190 MB)                                                                                                       11:03:29
ℹ Listening on: http://localhost:3000/      

You can also check out this issue.
nuxt/vite#51

Sorry, this is my first time using Date-fns and I don't understand how to set locale global (in modules). I've tried the following from one of the older issues, but I get the error 'languages is undefined':

modules: [[ '@nuxtjs/date-fns', { locales: languages.map(lang => lang.locale), defaultLocale: 'pt', format: 'DD/MM/YYYY' } ]]

Could you please help me or improve the documentation a little for newcomers like me?

Thank you very much for the amazing lib!

It seems that the type is incorrect for the locale property. It should also accept a string:

On a fivem server that I play on they have a phone with twitter and when I open up the twitter app on the phone it says this message:

NPWD has encountered an error it was unable to recover from. You will need to reload the NUI window. The error is shown below for developer reference.
Cannot read property ‘twitter’ of null

It also has Cannot read property 'map' of null as well.

Can someone help me with fixing the problem because says it's a bug so please help?

is it possible to use the plugin outside the component? I want to use a configured instance outside the component to work in an external file

when trying to run nuxt in electron 6, adding this module will make the app stuck at the loading screen, except when run with a debugger attached, i know that is very strange, but the exact same develop configuration without the debugger attached gets stuck and with the ebugger attached, it runs.

any alternatives?

I'm looking to add date-fns to my app, and I ran across this, but I'm struggling to see why this module would be needed and why we can't just import date-fns, especially with composition-api.

Could someone fill me in on why a module is better than just importing it? maybe adding something to the readme would be helpful too.

I get the following error when using the module with Nuxt Bridge:

ENOTDIR: not a directory, scandir '.../node_modules/date-fns/esm/locale/index.js'

 @ ./.nuxt/date-fns.js 44:19-73
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/bridge/dist/runtime/capi.plugin.mjs ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

ERROR  Watchpack Error (initial scan): Error: 

ENOTDIR: not a directory, scandir '.../node_modules/date-fns/esm/locale/index.js'

Reproduction:

Github: https://github.com/toniengelhardt/nuxt-bridge-debug/
CodeSandBox: https://githubbox.com/toniengelhardt/nuxt-bridge-debug/

Using default format like this:

  dateFns: {
    format: "dd/MM/yyyy",
  },

Cause linter error when using on component class:

@Component
export default class TestComponent extends Vue {
  get computedProperty(): string {
    // some business logic
    return this.$dateFns.format(timeValue); // <---- TS2554: Expected 2-3 arguments, but got 1.
  }
}

import fa-IR from 'date-fns/locale/fa-IR'
var name cant be a dashed

I believe this is an issue related to SSR.
Any workaround?

csb: https://codesandbox.io/embed/codesandboxnuxt-n4kmq

Hi! after upgrading to version 1.0.0 I get this error in Nuxt build.

ERROR in ./.nuxt/date-fns.js
Module not found: Error: Can't resolve 'date-fns/locale' in '.nuxt'
 @ ./.nuxt/date-fns.js 14:0-37 61:18-20
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js

 FATAL  Nuxt build error

Nuxt version: 2.10.0

When I run nuxt build, it's turns out "Error: Cannot find module '@nuxtjs/date-fns'"

I'm using
"@nuxtjs/date-fns": "^1.3.0"
"nuxt": "^2.13.0"

How can I fix it ?

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency date-fns to ^2.30.0
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update codecov/codecov-action action to v4
• chore(deps): update dependency date-fns to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Hello,

I'm using date-fns, and It works fine, but I think i'm missing the typing for $dateFns in Typescript.

I made it work using //@ts-ignore

But I'd like to know how to prevent this behavior. Maybe $dateFns in not avaible to be used this way? How can I made it avaible for this use?

Please advise!

export default {
  data() {
    return {
      dateFormatted: this.$dateFns.distanceInWords(new Date(), new Date(), {
        locale: 'it'
      }),
      dateFormatted2: this.$dateFns.distanceInWordsToNow(new Date(), {
        locale: 'it'
      })
    }
  }
}

{{ dateFormatted }} - meno di un minuto
{{ dateFormatted2 }} - less than a minute ago

After installing and configuring date-fns module as per the documentation, I'm getting the following error:

TypeError: Cannot read property 'map' of null
    at Module.format

How can I fix it ?

I'm working with several dates in Spanish with the 'es' locale. Most of them are working fine, like 'formatDistanceToNow' which gives me the date distance in proper Spanish. But when I call 'formatDuration' it gives me the result in English.

When I force the locale using $dateFns.formatDuration(duration, { locale: 'es' }) it gives me the following rendering error:

locale.formatDistance is not a function`

I'm using:

• nuxtjs/date-fns version 1.3.1

Locale objects are being properly loaded from date-fns so the problem must be in this plugin.

Hi there! I tried to make this module work in Spanish but I couldn't. Is there a problem with locales? or Nuxt? or is my code?

Here's my code:

module.exports = {
  mode: 'universal',
  buildModules: [
    '@nuxtjs/date-fns',
    ...
  ],
  dateFns: {
    locales: ['es'],
    defaultLocale: 'es',
    format: 'dd-MM-yyyy'
  },

And my implementation is this:

function parseDateAgo (value) {
  // value = date from server
  // e.g: 2020-05-22T03:42:40.740604Z

  if (!value) { return null }

  return formatDistanceToNow(parseISO(value), { addSuffix: true })
}

And

<div class="text-muted">
  ...
  <p>
    Termina
    {{ parseDateAgo(post.finish_date) }}
  </p>
  ...
</div>

Finally it prints: "Termina 4 days ago", when it had to be in Spanish: "Termina en 4 días más". So, what am I doing wrong?

Thanks in advance