Error importing "pluralize" / different behavior between production and dev build

[olivierchatry]

Describe the bug

I'm using pluralize package https://github.com/plurals/pluralize. Since 2.3.x ( tried on each release, latest is 2.3.2 ), my application crash when trying to import and use the package :

I'm importing the package like this :

import pluralize from 'pluralize'
// usage
pluralize.plural(resourceType)

With 2.3.x, in development mode it crashes :

Generated import looks like :

import __vite__cjsImport3_pluralize from "/node_modules/.vite/pluralize.js?v=c5e8a212"; const pluralize = __vite__cjsImport3_pluralize.__esModule ? __vite__cjsImport3_pluralize.default : __vite__cjsImport3_pluralize

__vite__cjsImport3_pluralize contains "pluralize".

So if I want it to work, I have to change to import {pluralize} from 'pluralize', but then, production is not working anymore.

Reproduction

• use vite vue template,
• add pluarlize : npm i --save pluralize
• edit App.vue, change setup code

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import pluralize from 'pluralize'

console.log(pluralize)

Build in prod and dev to see the difference

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

  System:
    OS: Linux 4.19 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 21.51 GB / 25.00 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.1 - ~/.nvm/versions/node/v14.16.1/bin/node
    npm: 6.14.12 - ~/.nvm/versions/node/v14.16.1/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman

Used package manager:
npm

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[olivierchatry]

Output of console in dev mode :

{pluralize: ƒ}
pluralize: ƒ pluralize(word, count, inclusive)
addIrregularRule: ƒ (single, plural)
addPluralRule: ƒ (rule, replacement)
addSingularRule: ƒ (rule, replacement)
addUncountableRule: ƒ (word)
isPlural: ƒ (word)
isSingular: ƒ (word)
plural: ƒ (word)
singular: ƒ (word)
arguments: (...)
caller: (...)
length: 3
name: "pluralize"
prototype: {constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: pluralize.js:175
[[Scopes]]: Scopes[4]
__proto__: Object

in production build:

{}

[olivierchatry]

This is fixed in vite 2.3.3 I'm guessing the esbuild update from #3447 fixed it.

[olivierchatry]

Not fixed :/

Still got the same error in production build.

[haoqunjiang]

Workaround:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    commonjsOptions: {
      ignoreDynamicRequires: false
    }
  }
})

[capaj]

One other workaround if you do not want to change commonjsOptions is to use a fork of mine: https://github.com/capaj/pluralize

which uses TS/ES6 under the hood. The original package pluralize is not maintained anymore anyway.