vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.47k stars 27.04k forks source link

Default `modularizeImports` breaks lodash/chain in v13.4.8 #52188

Open simonkberg opened 1 year ago

simonkberg commented 1 year ago

Verify canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant Packages:
      next: 13.4.9-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/green-wind-524j6n?file=%2Fpages%2Findex.tsx

To Reproduce

See codesandbox, running yarn dev with the simple example using lodash/chain will fail at runtime. The same code runs fine in v13.4.7

There's also currently no way to override the configuration in userland: https://github.com/vercel/next.js/blob/4f75c7993815dac50a6db3e078c51e6ae8d5bbdc/packages/next/src/server/config.ts#L692

Describe the Bug

The compiled code fails with the error:

TypeError: lodash_chain__WEBPACK_IMPORTED_MODULE_1___default(...)(...).filter is not a function

Expected Behavior

The code should work (like in v13.4.7). I also think you should be able to override the default modularizeImports configuration in the user configuration, as new versions of libraries could also break this configuration, which would require a new Next.js release to fix.

Which browser are you using? (if relevant)

N/A

How are you deploying your application? (if relevant)

N/A

NEXT-1401

haseeb196 commented 1 year ago

Can i Work on this?

haseeb196 commented 1 year ago

when i use this: import _ from 'lodash'; _.chain(data) .filter((e) => e.type === "foo") .uniqBy((e) => e.id) .reverse() .value() then it is not giving the error and running perfectly

haseeb196 commented 1 year ago

Or if we import chain without curly braces it also works: import chain from 'lodash'

chrisfillmore commented 11 months ago

I have this same problem when using import { chain } from "lodash". Same if I do import chain from "lodash/chain":

TypeError: lodash_chain__WEBPACK_IMPORTED_MODULE_11___default(...)(...).reduce is not a function

I migrated from Next 11 -> 14, and removed babel.config.js in the process, which was this:

module.exports = {
  presets: ["next/babel"],
  plugins: [],
}

If restore babel.config.js, I don't have this problem. If I import _ from "lodash" and use _.chain, I don't have this problem.

asafpelegcodes commented 6 months ago

I just upgraded next js to the latest version 14.2.3 and the error is still occurring, are there any other workarounds to this?