Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError #1

Open
badaz opened this issue Jul 11, 2022 · 6 comments
Open

SyntaxError #1

badaz opened this issue Jul 11, 2022 · 6 comments

Comments

@badaz
Copy link

badaz commented Jul 11, 2022

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
Copy link
Author

badaz commented Jul 12, 2022

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/@[email protected]_jzpzrimekk3fabjuggj4nchnou/node_modules/@remix-run/dev/dist/cli.js" "$@"
else
  exec node  "$basedir/../../../../node_modules/.pnpm/@[email protected]_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
Copy link
Author

badaz commented Jul 12, 2022

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
Copy link
Contributor

alexkuz commented Jul 15, 2022

Hm. I'll look into it

@alexkuz
Copy link
Contributor

alexkuz commented Jul 15, 2022

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

@badaz
Copy link
Author

badaz commented Jul 15, 2022

I will try and report back here tx

@alexkuz
Copy link
Contributor

alexkuz commented Jul 15, 2022

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants