Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade from 0.30.0 to 0.31.1 breaks dynamic import #793

Closed
louisgv opened this issue Oct 15, 2021 · 5 comments
Closed

Upgrade from 0.30.0 to 0.31.1 breaks dynamic import #793

louisgv opened this issue Oct 15, 2021 · 5 comments

Comments

@louisgv
Copy link

louisgv commented Oct 15, 2021

I have some express route that I'm dynamically importing using the snippet below:

import { Router } from "express"

const routeModulePaths = [
  "auth",
  "user",
  "ping",
  // 30+ more routes
]

export const setupApiRoutes = async () => {
  const router = Router()

  await Promise.all(
    routeModulePaths.map((path) =>
      import(`./${path}`).then((m) => router.use("/", m.default))
    )
  )

  return router
}

ncc@0.30.0 worked, the dist contains multiple index.js files (18.index.js, 276.index.js, etc...), which I assumed was ncc splitting the bundles.

ncc@0.31.1 didn't work. It produces a single index.js file, and upon running it throws this error:

Cannot find module './auth'
Require stack:

  • /app/dist/index.js Error: Cannot find module './auth'

I wonder if the change to how tsconfig is further leveraged on the bundling process has anything to do with this :-?...

@PaulRBerg
Copy link

PaulRBerg commented Nov 21, 2021

The same issue with ncc@0.31.1 caused a bug in my tool create-eth-app. I'm loading a file called gitignore only if condition is met:

https://github.com/paulrberg/create-eth-app/blob/fa2d2771f264a4767ed8617b07e89285d9c24159/src/createEthApp.ts#L93

The copy operation depends upon an if block, so I take it that ncc doesn't bundle the gitignore file in the build dir. But I think this is confusing - ncc should optimistically look for all dynamical paths and add them to the bundle. Or at the very least it should give us a flag to enable this behavior back.

Here's the distributable for create-eth-app@v1.7.0 (before upgrading ncc), and the distributable for create-eth-app@v1.7.1 (after upgrading ncc).

How can we bring the old behavior back?

Update: I managed to get away by using the copyfiles package, which I run after the ncc part in my build script. But this is rather verbose and doesn't scale. It would still be good to have NCC bundle the dynamically imported files.

@styfle
Copy link
Member

styfle commented Nov 21, 2021

If you have multiple tsconfig.json files, then perhaps the walkParentDirs()from #770 is detecting the wrong config?

@louisgv
Copy link
Author

louisgv commented Nov 22, 2021

For my project, I have moved my import to statically analyzable import, which allowed ncc to find and bundle the modules:

import { Router } from "express"

const routeModules = [
  import("auth"),
  import("user"),
  import("ping"),
  // 30+ more routes
]

export const setupApiRoutes = async () => {
  const router = Router()

  await Promise.all(
    routeModules.map((mod) =>
      mod.then((m) => router.use("/", m.default))
    )
  )

  return router
}

A quick write up: https://dev.to/louisgv/typescript-dynamic-module-import-2dln

@PaulRBerg
Copy link

If you have multiple tsconfig.json files, then perhaps the walkParentDirs()from #770 is detecting the wrong config?

I don't have multiple tsconfig.json files. Maybe @louisgv has?

I have moved my import to statically analyzable import

Thanks for posting an update with the solution you found :)

@louisgv
Copy link
Author

louisgv commented Nov 23, 2021

I do have multiple tsconfig.json in my monorepo but the bundle only run under one leaf config (that extend root config)

@louisgv louisgv closed this as completed Dec 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants