Unable to use webpack externals

[frankandrobot]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

npm WARN ignoring workspace config at /Users/uriel.avalos/Documents/manage/private/packages/next13-poc/.npmrc

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:45:05 PDT 2022; root:xnu-8020.101.4~15/RELEASE_X86_64
Binaries:
  Node: 16.18.1
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.6.0
Relevant packages:
  next: 13.0.3-canary.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

warn - Latest canary version not detected, detected: "13.0.3-canary.0", newest: "13.0.7-canary.3".
Please try the latest canary version (npm install next@canary) to confirm the issue still exists before creating a new issue.

NOTE: issue also exists in 13.0.6 as well!

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

No response

Link to the code that reproduces this issue

https://stackblitz.com/edit/nextjs-osfxky?file=app/use.tsx

To Reproduce

Unfortunately, it's a private work repo so cannot post links to repo.
But this should be the repo steps:

1. Add a webpack externals.

webpack: (config ) => {
    config.externals.push({
        jquery: 'jquery',
        // ... 
    })

2. Import this external via a file that's dynamically loaded.

// use-jquery.tsx
'use client'
import $ from "jquery";

export default function SomeComponent() {...}

// load-jquery.tsx
import dynamic from 'next/dynamic';
export const LoadedComponent = dynamic(() =>  import('./use-jquery'), { suspense: true});

3. Use the above LoadedComponent

Describe the Bug

1. The page will render (assuming the external has been injected into the browser window)
2. But the CLI will show an error (module not found jquery)

Expected Behavior

1. So there doesn't seem to be a way to use externally defined modules in NextJS?
2. At least I can't figure out how to define this external for server consumption.
3. The only workaround I can think of is to manually create a module that does nothing but export the window variable, and create a webpack alias to this module

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[matthewbae]

@frankandrobot Out of curiosity, did you see the same errors in previous versions of Next.js?

[frankandrobot]

Haven't tried this in 12. But if I'm not mistaken, this is a systematic issue. There's no way to control load order on the server so it'll happen regardless of version On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***> On Jan 6, 2023 6:02 AM, Matt Bae ***@***.***> wrote: @frankandrobot<https://github.com/frankandrobot> Out of curiosity, did you see the same errors in previous versions of Next.js? — Reply to this email directly, view it on GitHub<#43842 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAGAGMMKLIUWBL4HPHKWKPLWRACVLANCNFSM6AAAAAASXWN4NQ>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[vc-kdrdgn]

@frankandrobot We've faced with same issue 13.4.6 and 13.4.7

[webCoderJ]

n regardless of version

I faced with same issue in 13.4.12

[timneutkens]

Converted to discussions because this is about webpack customization:

Good to know: changes to webpack config are not covered by semver so proceed at your own risk

https://nextjs.org/docs/app/api-reference/next-config-js/webpack

[webCoderJ]

However, I changed the externals config like：
config.externals.push('antd')
The antd lib still bundled by next，the config does'nt work. I print the component in console without import antd cdn links :

[prakashmallow]

I'm also facing with the same issue in next 13.4.7

[KayBeSee]

I am having the same issue with externals not being honored in my webpack config. Any ideas on how to get around?