Next.js: Unclear Dynamic Import Error Messages

[IanMitchell]

Forgive me for dropping the GitHub issue template, but this is a little more philosophical than technical!

I think the dynamic import error messages could be a little clearer in meaning.

https://github.com/zeit/next.js/blob/master/lib/dynamic.js#L21
This error is thrown when you have a { modules: ..., render: ... } object as the first argument, and a { loading: ...} object as the second argument. To me, the phrasing of the error indicates that this is what I should be doing. I think rewording it to say something like "Cannot include options when the first argument is an object that contains modules and render fields" is much clearer in describing what the programmer has done wrong.

https://github.com/zeit/next.js/blob/master/lib/dynamic.js#L16
This could also be rewritten to read "The first argument should contain both module and render fields" or something similar.

I'm happy to submit a patch on this, but wanted to discuss new wording a little bit before doing it 😄

[IanMitchell]

Actually, reading the code some more I think I have it wrong too - looks like when you're passing in an object, it becomes the options object so everything needs to be combined 🤔. Maybe "next/dynamic options should contain modules and render fields." and "Add the additional options to the first argument containing the modules and render fields"?

[arunoda]

Yep. Latter one is more accurate.
In the messages, mention next/dynamic.

I'd like to get these changes, send us a PR.

[johhansantana]

I'm getting this error message, how do I fix this?

Here's my code:

import dynamic from 'next/dynamic'
const RoutesMap = dynamic(import("./components/routesMap"), {
  ssr: false
})

// routesMap
import * as React from 'react'
class RoutesMap extends React.Component {

  render() {
    return (
      <div>
        <p>hello</p>
      </div>
    )
  }
}

export default RoutesMap

I'm using typescript.

[rohmanhm]

Today I got the same problem like @johhansantana
I'm using Typescript too.

[alx]

I had the same issue as @johhansantana and @rohmanhm

I've solved it with the "_4. With Multiple Modules At Once_" example by adding the ssr: false inside the root object:

const HelloBundle = dynamic({
  ssr: false,
  modules: props => {
  ...

https://github.com/zeit/next.js#4-with-multiple-modules-at-once