When second parameter of next/dynamic is a variable, the loading component doesn't appear

[jasonbarry]

What version of Next.js are you using?

12.0.4-canary.15

What version of Node.js are you using?

v17.0.1

What browser are you using?

Safari 15.1

What operating system are you using?

macOS 12.0.1

How are you deploying your application?

Netlify (bug appears locally too)

Describe the Bug

In Next.js 11, I had code like

const options = {
  loading: () => <Loading />,
  ssr: false,
}
const LazyThing = dynamic(() => import('~/components/LazyThing'), options)

which would display <Loading /> while the LazyThing chunk was fetched.

In Next.js 12, the above code sample doesn't display <Loading /> while the chunk gets fetched. Instead, the code needs to be changed to

const LazyThing = dynamic(() => import('~/components/LazyThing'), {
  loading: () => <Loading />,
  ssr: false,
})

for the <Loading /> component to be displayed as expected.

Expected Behavior

I would expect that the behavior wouldn't be different whether or not the second parameter of next/dynamic is a variable.

To Reproduce

With latest Next.js 12, try passing a variable as the second parameter of next/dynamic vs passing the object literal directly. You should notice that when the options are passed as a variable, the component specified by the loading key never appears.

[timneutkens]

That usage should probably throw an error in the compiler tbh, with Next.js 11 it would break too but in a non-obvious way probably like hydration errors and such.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.