Remix deploy Error: "Code generation from strings disallowed for this context"

[tseijp]

marp dependencies does not support remix deploy.

ref

• Error "Code generation from strings disallowed" · Issue #1268 · cloudflare/wrangler
• EvalError: Code generation from strings disallowed for this context - Developers / Cloudflare Pages - Cloudflare Community
• Error uploading script to cloudflare · Issue #1 · cloudflare/workers-webpack-example

[mf:inf] Build succeeded
[mf:err] ~\build\index.js:102414
      var load = eval("require");
                 ^

EvalError: Code generation from strings disallowed for this context
    at ~\build\index.js:102414:18
    at node_modules/mathjax-full/js/components/version.js (~\build\index.js:102418:6)
    at __require2 (~\build\index.js:48:50)
    at node_modules/mathjax-full/js/mathjax.js (~\build\index.js:102566:24)
    at __require2 (~\build\index.js:48:50)
    at node_modules/mathjax-full/js/util/AsyncLoad.js (~\build\index.js:102589:24)
    at __require2 (~\build\index.js:48:50)
    at node_modules/mathjax-full/js/util/Entities.js (~\build\index.js:102619:26)
    at __require2 (~\build\index.js:48:50)
    at node_modules/mathjax-full/js/adaptors/lite/Parser.js (~\build\index.js:103143:33)

[smtlab]

Any updates on this?

[tseijp]

Packages that cannot work on remix or cloudflare runtime can be solved by using remix-esbuild-override

But there are many packages which are not designed for SSR, so updating is difficult.

remix-esbuild-override

What is this?

This is a library that makes it possible to change the configuration values of the Remix compiler (esbuild).

For example, Next.js allows you to control webpack option values from a configuration file (next.config.js).
Remix does not have that functionality. A member of the development team says in a PR comment that this is because exposing the configuration values would lock in the compiler's choices and also risk breaking the application.
I support that argument, but in actual use cases, I often want to change the settings.
So I decided to provide that functionality outside of Remix (in this 3rd-party library).

Install

# npm
npm install -D remix-esbuild-override

# yarn
yarn add -D remix-esbuild-override

2. Add remix-esbuild-override to scripts.postinstall in package.json.

"scripts": {
  "postinstall": "remix-esbuild-override"
}

3. Run npm install or yarn install again to run postinstall

How to use

You can define function properties in remix.config.js that can override esbuild configuration values.

// remix.config.js
const { withEsbuildOverride } = require("remix-esbuild-override");

/**
 * Define callbacks for the arguments of withEsbuildOverride.
 * @param option - Default configuration values defined by the remix compiler
 * @param isServer - True for server compilation, false for browser compilation
 * @param isDev - True during development.
 * @return {EsbuildOption} - You must return the updated option
 */
withEsbuildOverride((option, { isServer, isDev }) => {
  // update the option
  option.plugins = [someEsbuildPlugin, ...option.plugins];

  return option;
});

/**
 * @type {import('@remix-run/dev').AppConfig}
 */
module.exports = {
  // ...
};

📝 NOTE: Compilation is executed twice, once for the server and once for the browser.

Examples

• emotion on Cloudflare
• Chakra UI on Cloudflare
• Styled componets

If you have other example requests, please create an issue. Additional pull requests for examples are also welcome.

https://github.com/marp-team/marp-core/blob/72f17766171835801257a1d014998b7868a832f8/src/custom-elements/browser/marp-auto-scaling.ts#L5-L16

https://github.com/mathjax/MathJax-src/blob/f939f2ff2c4678785e9bf3d3b17e8c6151f0ce9c/components/src/node-main/node-main.js#L18