Closed ghost closed 2 years ago
To answer your question title, you should know how Node.js treat some file as es modules, either:
"type": "module"
You may know require
can not be used in es modules context natively from #946. But both banner
or inject
won't save you perfectly because once a file is bundled, require()
in it can not resolve relative paths correctly, and those files not resolved won't be included in outdir, so you got require(something_wont_be_found)
.
If your dependencies (not the "dependencies" field in package.json, but libraries your code really depends on) include these dynamic require calls, the best way for esbuild would be you edit these code to "correct" one (not using dynamic require).
What you are trying to do is not going to work. Passing --platform=node
tells esbuild that you're going to be running the result in node, but then you are running the result in the browser instead. This may break things in a lot of ways. You should be using --platform=browser
instead if you are going to be running it in the browser.
ReferenceError: fs is not defined
It sounds like you are trying to use packages that aren't designed to work on the web. There may not be much you can do about that here. If a library needs fs
to work, there's no simple fix because there's no equivalent file system on the web. You could try polyfilling it but that sounds pretty complicated. I'm not sure what polyfill to recommend but when you have one, you can try intercepting fs
with an esbuild plugin to substitute the path of your polyfill instead: https://esbuild.github.io/plugins/#resolve-callbacks. There's some links about fs
polyfills here: https://github.com/webpack/node-libs-browser/issues/72. But you may be better off using some other similar package that is actually intended to be used on the web, or maybe even some other bundler that attempts to polyfill fs
for you.
Uncaught SyntaxError: Cannot use import statement outside a module
You can read about how import statements work here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import. Specifically you need <script type="module">
to load code containing import
in the browser. That doesn't help you in this case because it sounds like you're trying to import node APIs in the browser, which won't work. But if you did need to load code containing import
in the browser, that's how you would do it.
Closing due to age.
I faced a similar error. Adding type=module
resolved it.
But what I do not understand is, the code did not give the error for a pure "JS" app, which did the import.
When I moved the code into React, the error popped up. (Which went away when I added type=module
).
If anyone knows why?
In my Rails project I am facing the following issues. The first issue was a known one as in #946 "ReferenceError: require is not defined". By reading through those issues and PR's I've added the following line to my build (with --banner).
--banner:js='import { createRequire as topLevelCreateRequire } from \"module\";\n const require = topLevelCreateRequire(import.meta.url);'
Now the error beneath occurs. I've already tried set the type to module in the package.json etc.
Uncaught SyntaxError: Cannot use import statement outside a module
This is a webapplication requiring some of the commonJS stuff it seems I've also added
--platform=node
to the build script to fix issues as:ReferenceError: fs is not defined
Is there a way to bundle this all for the web with all requirements?