SyntaxError

[badaz]

Hello, I've been trying to use your plugin after hours of trying to fix the Warning: Prop 'className' did not match. problem in my remix/styled-components app. I followed the steps, installed the 2 deps (esbuild-inject-plugin and esbuild-styled-components plugin), added the minimal esbuild-plugins.js file at the root of my project, modified the package.json scripts as shown in your example, yet I'm getting this error when running npm run dev:

> node --require @lukalabs/esbuild-inject-plugin -- ./node_modules/.bin/remix dev

/path/to/my/project/node_modules/.bin/remix:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:75:12)
    at internal/main/run_main_module.js:17:47
 ELIFECYCLE  Command failed with exit code 1.

Any idea how to handle this?

tx

[badaz]

Ok, I finally understand the problem: I'm using pnpm, and the .bin folder does not contain node files but sh files that call the node files, therefore it is not possible to call them using node.

for example .bin/remix looks like this:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -z "$NODE_PATH" ]; then
  export NODE_PATH="/path/to/my/root/monorepo/node_modules/.pnpm/node_modules"
else
  export NODE_PATH="$NODE_PATH:/path/to/my/root/monorepo/node_modules/.pnpm/node_modules"
fi
if [ -x "$basedir/node" ]; then
  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/@remix-run+dev@1.6.4_jzpzrimekk3fabjuggj4nchnou/node_modules/@remix-run/dev/dist/cli.js" "$@"
else
  exec node  "$basedir/../../../../node_modules/.pnpm/@remix-run+dev@1.6.4_jzpzrimekk3fabjuggj4nchnou/node_modules/@remix-run/dev/dist/cli.js" "$@"
fi

If I add --require @lukalabs/esbuild-inject-plugin -- inside this file instead, then the plugin works. Therefore this package and its doc is not "cross package-manager compatible". Maybe there exists a way to make it compatible? Without having to specify --require, like with .babelrc for example?

[badaz]

I managed to automate this by running this script at postinstall (on mac, maybe we could do it with sed -i on linux):

 #!/bin/sh
 perl -0777 -pi -e 's#exec\ \"\$basedir/node\"#exec\ "\$basedir/node"\ --require\ \@lukalabs/esbuild-inject-plugin\ #' node_modules/.bin/remix

 perl -0777 -pi -e 's#exec\ node#exec\ node --require\ \@lukalabs/esbuild-inject-plugin\ #' node_modules/.bin/remix

However it would be nice not to have to do this extra step ;)

[alexkuz]

Hm. I'll look into it

[alexkuz]

@badaz have you tried using https://github.com/kentcdodds/binode instead?

[badaz]

I will try and report back here tx

[alexkuz]

Another option I guess is to use NODE_OPTIONS env variable
Just like

NODE_OPTIONS="--require=@lukalabs/esbuild-inject-plugin" remix dev

Maybe this should be a recommended option (if it works)