Error "require is not defined" on empty project with version 13.1.0

[appimpact]

1. Created new blank Angular 13.1.0 project
2. Installed with npm latest version of ng2-date-picker 13.1.0
3. Installed with npm latest version of dayjs
4. Imported DpDatePickerModule in AppModule
5. Added component to AppComponent

Console is throwing an error:

Find source code here:
https://github.com/App-Impact-Labs/ISSUE-Ng2DatePickerRequireError

This is happening on all our projects.
We created blank solution with intention to find what is missing in our configuration, and ended up with same result.

Can you please provide instructions on how to mitigate this issue?

[vlio20]

Hi, I will take a look. Meanwhile, maybe you can look for differences in the following stackblitz https://stackblitz.com/edit/angular-8xjgx8?file=src%2Fapp%2Fapp.component.ts

[appimpact]

@vlio20 Thanks for the quick response!

We've already looked at your demo project and couldn't find what is the difference between our projects and your workspace setup.

Regardless, we've decided to help you out as we believe your intention would be to have this plugin work with installation instructions provided on your website.

Currently something is missing, but we weren't able to isolate what.

If you need any more assistance from us, please let us know, we would be glad to help.

[vlio20]

I am not next to a computer currently. I would start with the tsconfig.

[appimpact]

tsconfig in the example link above is quite old:

"target": "es2015",
"module": "esnext",
"lib": [
      "es2018",
      "dom"
]

Compared to that, Angular 13.1.0 projects are using:

"target": "es2017",
"module": "es2020",
"lib": [
      "es2020",      
      "dom"
]

We forgot to mention that this error started to occur after upgrade from version 13.0.0 to 13.1.0 of your library.

Previously we didn't have any issue with this, so it is most likely related to dayjs integration.

[vlio20]

@appimpact here is reporo on stackblitz and it is working anfter adding @angular/cdk:
https://stackblitz.com/github/mklibvqgo?file=src/app/app.component.html

[appimpact]

@vlio20 Unfortunately that didn't help.

It is still throwing an error.

[appimpact]

@vlio20 We also tried to downgrade tsconfig.json but still didn't help.

This looks very similar to:
#579

[appimpact]

Consider this code:

import dayjs from 'dayjs';
import 'dayjs/plugin/isSameOrAfter';
import 'dayjs/plugin/isSameOrBefore';
import 'dayjs/plugin/isBetween';
import 'dayjs/plugin/isoWeek';
import 'dayjs/plugin/customParseFormat';

// @ts-ignore
dayjs.extend(require('dayjs/plugin/isSameOrAfter'));
// @ts-ignore
dayjs.extend(require('dayjs/plugin/isSameOrBefore'));
// @ts-ignore
dayjs.extend(require('dayjs/plugin/isBetween'));
// @ts-ignore
dayjs.extend(require('dayjs/plugin/isoWeek'));
// @ts-ignore
dayjs.extend(require('dayjs/plugin/customParseFormat'));

export const dayjsRef = dayjs;

This code is located in:
\projects\ng2-date-picker\src\lib\common\dayjs

Is there some specific reason why are you using require?

Could you just use import as require might be redundant and introduces unnecessary dependency on RequireJS?

Something like this:

import dayjs from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
import isBetween from 'dayjs/plugin/isBetween';
import isoWeek from 'dayjs/plugin/isoWeek';
import customParseFormat from 'dayjs/plugin/customParseFormat';

// @ts-ignore
dayjs.extend(isSameOrAfter);
// @ts-ignore
dayjs.extend(isSameOrBefore);
// @ts-ignore
dayjs.extend(isBetween);
// @ts-ignore
dayjs.extend(isoWeek);
// @ts-ignore
dayjs.extend(customParseFormat);

export const dayjsRef = dayjs;

According to dayjs docs:
https://day.js.org/docs/en/installation/typescript

This is how you should import plugins in Typescript:

So based on this, require is most likely redundant and can be removed.

Two options for import are available:

1. import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
2. import * as isSameOrAfter from 'dayjs/plugin/isSameOrAfter';

Difference is what you have in your tsconfig.

If you have this:

  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
  }

Then you can go with option 1).

Hope this will be of help to you.

[appimpact]

Hi @vlio20 ,
Do you have any information that you can share about resolution of this bug?
If you think this will take a while to fix, we will do rollback to version 13.0.0 that used to work.
Thanks!

[vlio20]

Hi @appimpact, I will be checking this thing on I feel better. Got some seasonal flu.
Rollback for now. I will update here once resolved.

[appimpact]

@vlio20 Sorry to hear that :(

We wish you fast recovery! :)

[vlio20]

resolved in #581. Available in 13.1.1
@appimpact please approve

[appimpact]

@vlio20 Working great now, thank you! :)

[vlio20]

@appimpact it would be great if you could ⭐ this repo :)