experimental.esmExternals feedback #27876
Replies: 25 comments 42 replies
-
|
So call me dumb, I:
to: And it throws the classic: Am I missing a piece of the workflow? |
Beta Was this translation helpful? Give feedback.
-
|
A little self-learning here, I updated our dependencies to use The only issue I'm having now is that directory imports don't work (which are only supported in Node via the Is there any way to pass that flag into Next.js's build process? Edit, I'm assuming that's the issue based on this error message: Edit, maybe I'm crazy, it did start working, but next I'm getting a hooks error. There's got to be something funky with our internal react component lib. |
Beta Was this translation helpful? Give feedback.
-
|
@GrossDesignCo - isn't |
Beta Was this translation helpful? Give feedback.
-
|
@GrossDesignCo - I don't think enabling |
Beta Was this translation helpful? Give feedback.
-
|
Hi, do I need Webpack 5 though for this to work? In addition to Next 12. Because I still hit "ERR_REQUIRE_ESM" in a package I try to build |
Beta Was this translation helpful? Give feedback.
-
|
@GrossDesignCo Did you manage to fix this issue? |
Beta Was this translation helpful? Give feedback.
-
|
I use custom server // next.config.js
module.exports = {
experimental: { esmExternals: true }
}// package.json
{
"type": "module"
}// server.js
import next from 'next'
const dev = process.env.NODE_ENV === 'development'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
// custom server
})Run |
Beta Was this translation helpful? Give feedback.
-
|
This has nothing to do with |
Beta Was this translation helpful? Give feedback.
-
|
Importing from third-party esm seems to be working, but all of my |
Beta Was this translation helpful? Give feedback.
-
|
I have the same problem as you. |
Beta Was this translation helpful? Give feedback.
-
|
Please provide a full reproduction in a repository. |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens |
Beta Was this translation helpful? Give feedback.
-
|
Have the same problem. Seems to be related to ESM import in the submodules. Simple re-export |
Beta Was this translation helpful? Give feedback.
-
|
Named re-export like |
Beta Was this translation helpful? Give feedback.
-
|
I upgraded to Next.js 11.1.0 for support of ES modules, but I still get 'export' error: And I get error: |
Beta Was this translation helpful? Give feedback.
-
|
Why not? You don't have to share application code. |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens So, can you explain what shoud I reproduce? Importing |
Beta Was this translation helpful? Give feedback.
-
|
@timneutkens this is my |
Beta Was this translation helpful? Give feedback.
-
|
react-syntax-highlighter is missing Best would be a |
Beta Was this translation helpful? Give feedback.
-
|
@Henzelix - your issue can be resolved by changing your import statement from |
Beta Was this translation helpful? Give feedback.
-
|
When enabling, we get the following error: Build log: All I did was remove the transpile step for // const withTM = require('next-transpile-modules')(['@popperjs/core']);
module.exports = withBundleAnalyzer(
// withTM(
{ /*config*/ }
// )
); |
Beta Was this translation helpful? Give feedback.
-
|
@sandcastle - I don't think enabling |
Beta Was this translation helpful? Give feedback.
-
|
Enabling esmExternals should also transpile the dependencies via babel. Chances are really good that modules which use ESM are also written in modern JS. While Next.js transpiles first-party code (btw, even with modern:true arrow functions and class syntax are downcompiled to ES5?), it won't touch third-party code and so any modern syntax is retained and will cause issues in older browsers. Without this there will always be the need to carry next-transpile-modules along in our configurations. Somewhat related issue is that it's still impossible to easily specify what browsers the project supports, as browserslist configuration is not respected (#12826), and requires custom babelrc. |
Beta Was this translation helpful? Give feedback.
-
|
@wereHamster - isn't |
Beta Was this translation helpful? Give feedback.
-
|
Hi, |
Beta Was this translation helpful? Give feedback.
-
|
I get this error: SolutionAs mentioned in the comments, please import the files of the ESM module separately, instead of importing the index file that contains them. |
Beta Was this translation helpful? Give feedback.
-
|
We had something similar - it was caused by exporting multiple files through an index file, we broke out each import into its own line with a full path and it resolved the issue |
Beta Was this translation helpful? Give feedback.
-
|
I’m pretty sure this is due to node.js not supporting directory imports (yet). There’s only an experimental flag for it at the moment |
Beta Was this translation helpful? Give feedback.
-
Yep. Unfortunately the flag alone doesn't work |
Beta Was this translation helpful? Give feedback.
-
|
If anyone wants to check out a working example, I've updated my site to use the latest remark/rehype packages (which are ESM only) using this new flag. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, @leerob thanks for the example. I want to do something similar but I'd like to access file outside of I tried your
I tried using relative path in Any ideas? Or do I have to duplicate the same code of looping through blogposts just to generate sitemap & rss? I'm out of ideas. |
Beta Was this translation helpful? Give feedback.
-
|
With esmExternals enabled, d3 (which recently switched to |
Beta Was this translation helpful? Give feedback.
-
|
Same, Identical error with d3-interpolate and d3-color. |
Beta Was this translation helpful? Give feedback.
-
|
I was not able to reproduce it with a fresh I tried in Maybe try to upgrade some dependencies like |
Beta Was this translation helpful? Give feedback.
-
|
@sokra Not sure if it matters but I import d3 like |
Beta Was this translation helpful? Give feedback.
-
|
@sokra my issue is in using |
Beta Was this translation helpful? Give feedback.
-
|
oh looks like i just needed up update all the |
Beta Was this translation helpful? Give feedback.
-
|
There are some npm modules that only export using ems syntax, but are not marked as such. AVA is one such example. So far this feature works great, but it would be fantastic it be able to manually specify modules you know to need transpilled. |
Beta Was this translation helpful? Give feedback.
-
|
Is it still far from here to solve #9607 and #23725? It would help me use webpack loaders written in ESM in |
Beta Was this translation helpful? Give feedback.
-
|
this is what I want as well. the ability to use ESM in |
Beta Was this translation helpful? Give feedback.
-
|
This feature helps with a few use-cases, for example ESM modules used inside of page data-fetching methods; but we really still need
|
Beta Was this translation helpful? Give feedback.
-
I am on next.js v11.1.0 and I am still able to use ESM modules inside of page data-fetching methods without the |
Beta Was this translation helpful? Give feedback.
-
|
I'm using next.js v11.1.0 and the |
Beta Was this translation helpful? Give feedback.
-
|
I enabled this experimental feature, but was unable to dynamically import ESM modules from my file system from the Next.js api, will this capability be added? When importing this error was thrown: |
Beta Was this translation helpful? Give feedback.
-
|
If I use 'module' field instead of 'main' from package.json by extending webpack config I am getting following error with popperjs: node_modules/@popperjs/core/lib/modifiers/arrow.js:1
import getBasePlacement from "../utils/getBasePlacement.js";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:988:16)
at Module._compile (internal/modules/cjs/loader.js:1036:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
at Module.load (internal/modules/cjs/loader.js:937:32)
at Function.Module._load (internal/modules/cjs/loader.js:778:12)
at Module.require (internal/modules/cjs/loader.js:961:19)
at require (internal/modules/cjs/helpers.js:92:18)Also is there any way to force esm import for specific lib (without updating webpack config), if lib supports both? |
Beta Was this translation helpful? Give feedback.
-
|
anyone else getting an error when importing |
Beta Was this translation helpful? Give feedback.
-
|
Some notes, having been exploring this recently: Do not add
|
Beta Was this translation helpful? Give feedback.
-
|
This setting works only in the browser. Is there a way to make it work server-side as well? |
Beta Was this translation helpful? Give feedback.
-
|
I'm having issues because directory imports. We have some old components that uses Apollo's I tried running |
Beta Was this translation helpful? Give feedback.
-
|
Hi guys, I am trying to build a package for Next.js, using TS and ESM. Dynamic import of client-only code doesn't seem to work. The package seems to be built correctly, but maybe this is due to TS interfering in the Next app, transforming import() into require()? Repro: https://github.com/VulcanJS/npm-the-right-way, run |
Beta Was this translation helpful? Give feedback.
-
|
I have an issue with See nodeca/pica#228 for some more context. Any idea what could cause webpack to not use the existing ES Module for the prod build? |
Beta Was this translation helpful? Give feedback.
-
|
I'm having a similar issue, I've bundled up a package locally using rollup exporting both cjs and esm files. It worked fine locally (referencing the es module file) via npm link, but then when I deployed my package and installed it, it won't use the esm file. It keeps trying to use the cjs which is causing issues. Did you have any updates? |
Beta Was this translation helpful? Give feedback.
-
|
Yes similar issue there #35112 |
Beta Was this translation helpful? Give feedback.
-
|
For now, |
Beta Was this translation helpful? Give feedback.
-
I seem to be getting a similar error as above running next 12 |
Beta Was this translation helpful? Give feedback.
-
|
Maybe use Problematic package should export CJS version of package so node won't brek like this. Solution for now - use https://github.com/martpie/next-transpile-modules for problematic package. |
Beta Was this translation helpful? Give feedback.
-
|
is this still experimental, when this will be available outside experimental config ? |
Beta Was this translation helpful? Give feedback.
-
It's default from Next.js 12 |
Beta Was this translation helpful? Give feedback.
-
|
I don't think so, it is still allowed without warning in experimental config, & value is still being used from this experimental config here: |
Beta Was this translation helpful? Give feedback.
-
|
Here is info about it https://nextjs.org/blog/next-12#es-modules-support-and-url-imports (with link to 11.1 announcement of esmExternals) |
Beta Was this translation helpful? Give feedback.
and others
-
Update: This has shipped! https://nextjs.org/blog/next-12#es-modules-support-and-url-imports
Thread to collect feedback about
experimental.esmExternals: true.Beta Was this translation helpful? Give feedback.
All reactions