Next.js: dynamic imports not working with typescript

[johhansantana]

I'm getting this error message:

`next/dynamic` options should contain `modules` and `render` fields

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

this gets compiled via typescript and the result is this:

const RoutesMap = dynamic_1.default(Promise.resolve().then(() => require('./components/routesMap')), { ssr: false });

and if I use

import * as dynamic from 'next/dynamic'

I get:

dynamic is not a function

tsconfig:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2015",
    "jsx": "react-native",
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "!/*": [
        "./*"
      ]
    },
    "lib": [
      "es5",
      "es6",
      "dom",
      "es2015.core",
      "es2015.collection",
      "es2015.generator",
      "es2015.iterable",
      "es2015.promise",
      "es2015.proxy",
      "es2015.reflect",
      "es2015.symbol",
      "es2015.symbol.wellknown",
      "esnext.asynciterable"
    ]
  }
}

"next": "^4.1.4",
"react": "^16.2.0",
"react-dom": "^16.2.0"

[blinkcat]

tsconfig -> "module": "esnext", take a try!

[johhansantana]

@blinkcat this seems to work somewhat but then I get a bunch of cannot find module

[0] components/layout.tsx(2,18): error TS2307: Cannot find module 'next/head'.
[0] components/nav.tsx(2,18): error TS2307: Cannot find module 'next/link'.
[0] components/routesMap.tsx(1,26): error TS2307: Cannot find module 'glamor/utils'.
[0] components/routesMap.tsx(3,29): error TS2307: Cannot find module '@mapbox/mapbox-gl-draw'.
[0] components/routesMap.tsx(4,27): error TS2307: Cannot find module '@mapbox/polyline'.
[0] containers/assignments/new.tsx(2,34): error TS2307: Cannot find module 'react-apollo'.
[0] containers/assignments/new.tsx(3,17): error TS2307: Cannot find module 'graphql-tag'.
[0] containers/index.tsx(2,34): error TS2307: Cannot find module 'react-apollo'.
[0] containers/index.tsx(3,17): error TS2307: Cannot find module 'graphql-tag'.

and so on

also I have to do

import express from 'express';
import next from 'next';

instead of

import * as express from 'express';
import * as next from 'next';

and it seems that I have to do that for everything else.

esnext seems to export everything as is right?

then dynamic import worked as well but some of the next/xxx libraries aren't working.

I wonder why in the typescript example the options is set to commonjs 🤔

[blinkcat]

@johhansantana that example is too simple. if you don't set "module": "esnext", tsc will compile ‘dynamic import’ to Promise.resolve().then..., which will cause error you mentioned above. And, i also set "allowSyntheticDefaultImports": true, this may help.

[Donato-yi]

@timneutkens , How do you fixed cannot find module error?

[Donato-yi]

I am also having problem with dynamic importing on next-typescript.
Once I set "module" and "compiler" to esnext on tsconfig, all of my imports get error.

[timneutkens]

it's not released yet. Will be available soon.

[jisaac89]

any idea when dynamically importing files with next-typescript will be working? Its one of the few steps I have left for a ts boilerplate with next!

dirty fix:

Create a seperate js file for all your dynamic imports, then export them as such:

export const Emerge = dynamic(import('../recoil/src/components/Emerge/Emerge'), { ssr: false });

Now you can import them to your tsx files error free!

[mohammedzamakhan]

@blinkcat @timneutkens

import dynamic from "next/dynamic";

const Button = dynamic(import('../components/Button'));

I see that the code splitting is successful, but still shows the error

Argument of type 'Promise<typeof "/components/Button" >' is not assignable to parameter of type 'Promise<ComponentType<{}>>'.

event though my tsconfig.json has correct module and allowSyntheticDefaultImports

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es2015",
      "es2016"
    ]
  }
}