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.

How to import browser version, or use rendering without `fs` calls, etc.

See original GitHub issue

Describe the bug When using the default import, I receive an error

ReferenceError: Can’t find variable: fs

I am basically trying to use “in memory” rendering, I don’t have access to any fs type methods, I am just attempting to render from template variables (I don’t need to use layouts, etc.)

To Reproduce Steps to reproduce the behavior:

import * as eta from ‘eta’ use code in browser

Package & Environment Details

  • Environment: All browsers
  • Version: ex. 1.12.3

Additional context I am building my plugin using rollup

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5

github_iconTop GitHub Comments

1reaction
shadowtime2000commented, Jan 30, 2022

@nick-allen @mikeerickson This will be added within the next update, which will probably be a patch release, with imports available in eta/dist/browser/eta.es.min.js or eta/dist/browser/eta.es.dev.js. Let me know if you have any other problems.

0reactions
nick-allencommented, Dec 21, 2021

Having a separate import for the browser version would work totally fine for my case, as mentioned in my last comment, I tried something similar using what looked like an earlier effort at supporting something like this via package.json exports, but I get the impression this is either misconfigured, or a typescript issue that didn’t fully make it into v4.5, as I couldn’t get it to import. Ultimately wound up using browser import to workaround this, by adding the following to my package.json:

  "browser": {
    "fs": false,
    "path": false
  },

This isn’t an ideal workaround, despite being easier for me to implement in my environment, instead of trying to have to fuss with webpack polyfill fallbacks in my case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

import() - JavaScript - MDN Web Docs - Mozilla
The import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously ...
Read more >
How can I conditionally import an ES6 module? - Stack Overflow
Following is way to do conditional rendering as per your case. ... You can now call the import keyword as a function (i.e....
Read more >
Gotchas - Remix
To fix it, move the import into a different module named *.server.js or *.server.ts and import from there. In our example here, we...
Read more >
Features | Vite
Vite supports importing .ts files out of the box. Vite only performs transpilation on .ts files and does NOT perform type checking. It...
Read more >
What's Server Side Rendering and do I need it? - Medium
Before the advent of applications fully generated by JS, in the browser, HTML was returned in response to the HTTP call — be...
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