Alpine: Getting syntax error with NextJS

[AlexanderArvidsson]

I am getting the following error when attempting to use this with NextJS:

Failed to compile
./components/Navbar.js
SyntaxError: /home/metamist/dev/node/utlaggdtek/components/Navbar.js: Unexpected token (3:29)

  1 | import React from "react";
  2 | 
> 3 | const Component = () => <div @keydown.window.escape="open = false" />;
    |                              ^
  4 | 
  5 | // const Navbar = () => (
  6 | //   <nav x-data="{ open: false }" @keydown.window.escape="open = false" class="bg-gray-800">
This error occurred during the build time and cannot be dismissed.

Here is a simple component that I cannot get working:

const Component = () => <div @keydown.window.escape="open = false" />;

This is my .babelrc:

{
  "presets": ["next/babel"],
  "plugins": [
    "babel-plugin-root-import"
  ]
}

I cannot find any information about any package and I am using the latest packages (I just updated everything).
It is pretty much a completely fresh NextJS project with barely anything in it.

Am I missing something in my babelrc or some plugin? Prettier cannot parse the file either.

Using Node v10.13.0 on Linux (Archlinux).

[HugoDF]

JSX compilers don't support @ or Alpine.js' use of colons inside of attributes.

To use Alpine.js you'll need to use dangerouslySetInnerHTML and template strings, I've written a post up about this: https://codewithhugo.com/alpine-js-react/

[HugoDF]

The good news is that Alpine.js _does_ work when run inside of React.

See https://github.com/alpinejs/alpine/issues/201#issuecomment-592946560

[AlexanderArvidsson]

@HugoDF that's a little too bad, I would have loved to use Alpine with React to have easy state management when dealing with simple open/close states for example.
Thank you for the post, I'll make sure to read through it!

[HugoDF]

You can use Alpine.js inside of React, you just can't write Alpine.js attribute bindings in JSX, hence the workaround I've posted.

[AlexanderArvidsson]

@HugoDF I understand that, but writing my components in template strings kind of defeats the entire purpose of React, which means the only option with your workaround is either using React, or using Alpine, not both together.
It also would mess up Prettier auto formatting on save.
It would be nice if JSX compilers would support those attributes so that they could work together rather than independently.

[dancomanlive]

ReferenceError: navigator is not defined
at isTesting .../node_modules/alpinejs/dist/alpine.js:79:5

import "./index.css"
import 'alpinejs';

const alpineTemplate = `<div x-data="counter()">
  <button @click="inc()">Increment</button>
  <p x-text="count"></p>
</div>`;

const AlpineWidget = () => (
  <div dangerouslySetInnerHTML={{__html: alpineTemplate}} />
);

function Button({ children, ...buttonProps }) {
  return (
    <button
      className="px-2 py-1 rounded-lg bg-green-400 text-green-800 text-xl font-light uppercase shadow-md hover:shadow-lg"
      {...buttonProps}
    >
      {children}
    </button>
  );
}

export default function App() {

  return (
    <AlpineWidget />
  )
}

Using Next js with Tailwind

[HugoDF]

I'm assuming that happens when server-rendering?

The offending line is https://github.com/alpinejs/alpine/blob/master/src/utils.js#L27 which we might want to fail more gracefully.

If you could make the AlpineWidget run client-side only that would fix it I think.

[AlexanderArvidsson]

@dancomanlive You can solve that error by importing Alpine with dynamic and disabling SSR. Essentially, only load Alpine on the client since server has no state.
dynamic(() => import("alpinejs"), { ssr: false });

[HugoDF]

@AlexanderArvidsson @dancomanlive have you managed to get Alpine.js working inside of Next? If yes, would be good to close this issue.

[AlexanderArvidsson]

No, I dropped the matter since I'd rather wait for some kind of solution for parsers to work with the extra symbols. So I'll close it for now. Thanks anyway :)