question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
sodateacommented, May 31, 2021

Workaround:

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

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

1reaction
olivierchatrycommented, May 17, 2021

This is fixed in vite 2.3.3 I’m guessing the esbuild update from https://github.com/vitejs/vite/pull/3447 fixed it.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Uncaught TypeError: Super expression must either be null or ...
One module importing another and the other way around. ... Note: The source of this error is may be because there is React...
Read more >
Layouts and binding expressions | Android Developers
When a plural takes multiple parameters, you must pass all parameters: ... or its signature is incorrect, you receive a compile time error....
Read more >
typescript import svg - Philadelphia Mixing Solutions
Built on Forem the open source software that powers DEV and other ... Error importing SVG in After Effects | How To Import...
Read more >
Our Common Future: Report of the World Commission on ...
The environment does not exist as a sphere separate from ... 'environmental' problem; it is also its main 'development' problem.
Read more >
Components Available in Managed Packages
All other analytics components can't be updated. Subscriber Can Delete Component From Org, No. Package Developer Can Remove Component From Package, Yes ( ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found