Errors when updating. Webpack related

[developdeez]

I haven't had this error until I updated. What loader do I use with dayjs now?

WARNING in ./node_modules/dayjs/locale/types.d.ts 1:8
Module parse failed: Unexpected token (1:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

declare interface ILocale {
| name: string
| weekdays?: string[]
@ ./node_modules/dayjs/locale lazy ^./.*$ namespace object ./types.d.ts
@ ./src/index.js

[iamkun]

Any reproduction repo, please?

[mariusa]

It happens when using

require('dayjs/locale/' + lang)

That is, with a variable.

Example:

vue create hello-world
cd hello-world/
npm install dayjs --save
npm run serve

then change main.js to

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

import day from 'dayjs'
let lang = 'ro'
require('dayjs/locale/' + lang)
console.log(day().format())

new Vue({
  render: h => h(App),
}).$mount('#app')

[munkhorgil]

Any update on this? I got this error too when dynamically importing locales.

[iamkun]

@munkhorgil Any reproduction repo, please?

[munkhorgil]

@munkhorgil Any reproduction repo, please?

https://github.com/erxes/erxes in widget we use the dayjs

[iamkun]

thanks, @munkhorgil, nice project.

However, it is hard for me to debug this issue in this huge repo. Can you please provide an issue reproduction repo containing this issue only, if you have time.

Cheers

[munkhorgil]

thanks, @munkhorgil, nice project.

However, it is hard for me to debug this issue in this huge repo. Can you please provide an issue reproduction repo containing this issue only, if you have time.

Cheers

Thanks, in order to reproduce you don’t need to install the whole project.

1. Clone project
2. Navigate to widgets folder
3. cp .env.sample .env
4. yarn install
5. yarn dev

[JounQin]

@developdeez @mariusa @iamkun I think the key point is require('dayjs/locale/' + lang), webpack will try to package all files under locale folder including .d.ts files, and the workaround is require('dayjs/locale/' + lang + '.js'), I tried @mariusa 's reproduction and it worked.

And @munkhorgil , I didn't find dayjs used in the reproduction project.

[Alexis-Bize]

Had this issue minutes ago and my current workaround (based on my needs) is to dynamically import each lang, based on the specified locale.

type Locale = 'en-US' | 'fr-FR';

export const importDayJSLang = (locale: Locale) => {
	const lang = locale.split('-')[0];

	if (locale === 'en-US')
		return import(`dayjs/locale/en`).then(() => {
			dayjs.locale(lang);
			return lang;
		});
	else if (locale === 'fr-FR')
		return import(`dayjs/locale/fr`).then(() => {
			dayjs.locale(lang);
			return lang;
		});
	else return Promise.resolve(lang);
};

A refactoring is of course possible, but I pasted it as it to give an idea.

[elobuho]

@JounQin
Yup,
import(dayjs/locale/${locale}.js).then(() => {

solves the problem. Thank you.

[duongdam]

@developdeez @mariusa @iamkun I think the key point is require('dayjs/locale/' + lang), webpack will try to package all files under locale folder including .d.ts files, and the workaround is require('dayjs/locale/' + lang + '.js'), I tried @mariusa 's reproduction and it worked.

And @munkhorgil , I didn't find dayjs used in the reproduction project.

Thanks