question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot use dynamic imports for ESM packages

See original GitHub issue

- Do you want to request a feature or report a bug? Bug

- What is the current behavior? When deploying to Netlify, the deploy itself succeeds, but the deployed site throws errors whenever a dynamic import is encountered.

  • unspecified node_bundler: Error: Cannot find package ‘unified’ imported from /var/task/netlify/functions/server/build/index.js
  • node_bundler = "esbuild": Error: ENOENT: no such file or directory, open <path to my project>/.netlify/functions-serve/server/src/netlify/functions/languages/abap.tmLanguage.json
  • node_bundler = "esbuild" & external_node_modules = ["unified"]: Error: Must use import to load ES Module: <path to my project>/.netlify/functions-serve/server/src/node_modules/unified/index.js

Locally via netlify dev, things do work when neither node_bundler nor external_node_modules is specified, but does not work on Netlify remotely.

If node_bundler = "esbuild", then I get the ^above errors on routes relying on unified.

- If the current behavior is a bug, please provide the steps to reproduce.

  1. Create a new Remix app npx create-remix@latest
  2. Select “Netlify” as the deployment option
  3. Create a route that imports unified (or any other ESM-only package) dynamically
  4. Deploy to Netlify

I’ve noticed that locally, when esbuild is used, a .netlify directory is created and the transpiled code has replaced dynamic imports with require calls, causing Error: Must use import to load ES Module.

- What is the expected behavior?

esbuild keeps dynamic imports and does not replace them with require calls.

- Please mention your node.js, and operating system version.

MacOS 11.6.1 Node 14


I’ve tried debugging this on the Remix side of things, but right now I’m stuck trying to figure out how netlify dev’s usage of esbuild is transpiling things such that dynamic imports are replaced by require calls.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
pcattoricommented, Dec 21, 2021

I was able to get things working by adding shiki to external_node_modules:

[functions]
  node_bundler = "esbuild"
  external_node_modules = ["shiki"]

shiki relys on a bunch of .json files for its (programming) language support as well as for its themes. abap.tmLanguage.json was one of the language files it needed.

The warnings about unified just threw me off.

1reaction
kubaracekcommented, Feb 7, 2022

I freaking love you guys! I did spend half a day trying to fix one of my imports… Thank you!!!

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Dynamically Import ECMAScript Modules
You can import modules dynamically if you use import as a function — import(pathToModule) — a feature available starting ES2020.
Read more >
Importing JSX with ESM Dynamic Imports in Node.js
I've done this by using the transformFileSync method, but this created the error message: Error [ERR_MODULE_NOT_FOUND]: Cannot find package '" ...
Read more >
Dynamically Import ESM Modules From A CDN - ITNEXT
When the component is mounted, it creates a string variable that point to the ES modules that needs to be loaded. The usage...
Read more >
How to Bypass ES Modules Errors in Next.js with Dynamic ...
The snippet above shows how you can import a module with dynamic imports and pass the ssr object as an argument to it....
Read more >
ES2020: `import()` – dynamically importing ES modules - 2ality
ECMAScript modules are completely static: you must specify what you import and export at compile time and can't react to changes at runtime....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found