Console warning by vue-i18n in Quasar v2.0.0-beta.3

[ovidiuc]

Describe the bug
A clear and concise description of what the bug is.

Codepen/jsFiddle/Codesandbox (required)
(Seems sandbox is not available for this version yet.)
To Reproduce
Steps to reproduce the behavior:
Create an new project:
quasar create quasar.i18n-issue-n4 --branch next

? Project name (internal usage for dev) quasar.i18n-issue-n4
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author
? Pick your CSS preprocessor: SCSS
? Check the features needed for your project: Vue-i18n
? Continue to install project dependencies after the project has been created? (recommended) yarn

While installing, this warning shows up:

[4/5] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^3.0.0".

Run quasar dev and open the website in browser. Check dev console, where these 2 messages show:

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.

You are running a development build of vue-i18n.
Make sure to use the production build (*.prod.js) when deploying for production.

Expected behavior
There should be no error/warning on the default build.

Screenshots

Platform (please complete the following information):
Quasar Version: v2.0.0-beta.3
@quasar/app Version: v3.0.0-beta.3
Quasar mode:
[ *] SPA
[ ] SSR
[ ] PWA
[ ] Electron
[ ] Cordova
[ ] Capacitor
[ ] BEX
Tested on:
[ *] SPA
[ ] SSR
[ ] PWA
[ ] Electron
[ ] Cordova
[ ] Capacitor
[ ] BEX
OS: Debian GNU/Linux 9 (Docker)
Node: v14.15.1
NPM:
Yarn: 1.22.5
Browsers: Chrome Version 88.0.4324.146 (Official Build) (64-bit)
iOS:
Android:
Electron:

Additional context
Add any other context about the problem here.

[onurkose]

I've tried to overcome this by adding these with webpack's definePlugin in quasar.conf:

__VUE_I18N_LEGACY_API__
__VUE_I18N_FULL_INSTALL__
__INTLIFY_PROD_DEVTOOLS__

but when I use define plugin within webpack chain, it overwrites all other constant definitions of Quasar and cause more problems.

[rstoenescu]

@onurkose It means that you've replaced the current config with yours. You need to either:

1. add to the current config
2. (or) just add another definePlugin into webpack

Regardless of this, will add this in the next release to ease the use of vue-18n

[rstoenescu]

Feature flags definition will be available in "@quasar/app" v3.0.0-beta.4.

[rstoenescu]

The following message will still persist (but it is taken care of correctly for prod builds):

You are running a development build of vue-i18n.
Make sure to use the production build (*.prod.js) when deploying for production.

You can also safely ignore the following when yarn/npm installing. The explanation is long, but long story short this is a false positive and there's no technical solution to avoid the message being displayed.

[4/5] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^3.0.0".

[Lietsaki]

@rstoenescu I'm still getting the warning.

From vue-i18n.esm-bundler.js?b8e5:46

You are running the esm-bundler build of vue-i18n. It is recommended to configure your bundler to explicitly replace feature flag globals with boolean literals to get proper tree-shaking in the final bundle.
This is the only warning that shows up in my console. See screenshot.

Some info

Project created with @quasar/[email protected]

"quasar": "^2.0.0-beta.18"
"vue-i18n": "^9.0.0-beta.0"
"@quasar/app": "^3.0.0-beta.26"

Quasar mode:
[ * ] SPA
Tested on:
[ * ] SPA
OS: Windows 10 Pro Version 20H2
Node: v14.17.0
NPM: v7.14.0
Browsers: Chrome Version 90.0.4430.212 (Official Build) (64-bit)

[rstoenescu]

@Lietsaki again??? will look into it and see what vue-i18n guys changed. thanks for reporting.

[rstoenescu]

@Lietsaki Well, apparently vue-i18n will display this regardless of whether the build flags are set or not. Extract from their code:

if ((process.env.NODE_ENV !== 'production') && typeof true === 'boolean') {
   // it will always go here due to typeof true === 'boolean'
    needWarn = true;
}
if ((process.env.NODE_ENV !== 'production') && needWarn) {

[rstoenescu]

You can follow the discussion here: intlify/vue-i18n#461 (comment)

[ctpli]

Hi everyone!

I have found the solution for that warning: go to src\boot\i18n.js file from your project folder and change the

   import { createI18n } from 'vue-i18n' 
   to => import { createI18n } from 'vue-i18n/index'

that should work!

[DespertaWeb]

Hi everyone!

I have found the solution for that warning: go to src\boot\i18n.js file from your project folder and change the

   import { createI18n } from 'vue-i18n' 
   to => import { createI18n } from 'vue-i18n/index'

that should work!

It worked for me too! Thanks @ctpli !

[ttquoccuong]

Hi everyone!

I have found the solution for that warning: go to src\boot\i18n.js file from your project folder and change the

   import { createI18n } from 'vue-i18n' 
   to => import { createI18n } from 'vue-i18n/index'

that should work!
I get this error when use with Typescripts

Could not find a declaration file for module 'vue-i18n/index'. '/Users/toncuong/firegroupio/trueprofit/browser-extension/node_modules/vue-i18n/index.js' implicitly has an 'any' type.
  If the 'vue-i18n' package actually exposes this module, try adding a new declaration (.d.ts) file containing `declare module 'vue-i18n/index';`ts(7016)

any other same?