#a weird error

1 messages · Page 1 of 1 (latest)

spare lily
#

code:

import {
  Body,
  Button,
  Container,
  Head,
  Hr,
  Html,
  Img,
  Preview,
  Section,
  Text,
  render,
} from '@react-email/components'
import * as React from "react"

interface EmailTemplateProps {
  actionLabel: string
  buttonText: string
  href: string
}

export const EmailTemplate = ({
  actionLabel,
  buttonText,
  href,
}: EmailTemplateProps) => {
  return (
    <Html>
      <Head />
      <Preview>
        The best "education" games website.
      </Preview>
      <Body style={main}>
        <Container style={container}>
          <Text style={paragraph}>Hi there,</Text>
          <Text style={paragraph}>
            Welcome to ForgeFlash, an "education"games website
            Use the button below
            to {actionLabel}.
          </Text>
          <Section style={btnContainer}>
            <Button style={button} href={href}>
              {buttonText}
            </Button>
          </Section>
          <Text style={paragraph}>
            Best,
            <br />
            The ForgeFlash team
          </Text>
          <Hr style={hr} />
          <Text style={footer}>
            If you did not request this email, you can
            safely ignore it.
          </Text>
        </Container>
      </Body>
    </Html>
  )
}

export const PrimaryActionEmailHtml = (
  props: EmailTemplateProps
) => render(<EmailTemplate {...props} />, { pretty: true })

const main = {
  backgroundColor: '#ffffff',
  fontFamily:
    '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
}

const container = {
  margin: '0 auto',
  padding: '20px 0 48px',
}

const logo = {
  margin: '0 auto',
}

const paragraph = {
  fontSize: '16px',
  lineHeight: '26px',
}

const btnContainer = {
  textAlign: 'center' as const,
}

const button = {
  padding: '12px 12px',
  backgroundColor: '#2563eb',
  borderRadius: '3px',
  color: '#fff',
  fontSize: '16px',
  textDecoration: 'none',
  textAlign: 'center' as const,
  display: 'block',
}

const hr = {
  borderColor: '#cccccc',
  margin: '20px 0',
}

const footer = {
  color: '#8898aa',
  fontSize: '12px',
}```
Error:

return <components_1.Html>
^

SyntaxError: Unexpected token '<'
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module.m._compile (C:\Users\user\AppData\Roaming\npm\node_modules\ts-node\src\index.ts:1618:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Object.require.extensions.<computed> [as .tsx] (C:\Users\user\AppData\Roaming\npm\node_modules\ts-node\src\index.ts:1621:12)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
at Module.call (node:internal/modules/cjs/loader:1235:19)
at Module.mod.require (C:\Users\user\Desktop\website_v2\node_modules\next\src\server\require-hook.ts:70:26)```

marble sequoiaBOT
#

Hi @spare lily. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message Unexpected token '<' typically occurs when you're trying to use JSX syntax but the file is not being transpiled by Babel. In your case, it seems like the file is not being recognized as a module that needs to be transpiled.

Here are a few things you could check:

  1. Make sure your file has the .tsx extension if you're using TypeScript, or .jsx if you're using JavaScript. This is necessary for the transpiler to recognize that it needs to transpile the file.

  2. Ensure that you have a .babelrc or babel.config.js file in your project root, and that it's correctly configured to use the @babel/preset-react preset. This preset enables transpilation of JSX.

  3. If you're using TypeScript, make sure your tsconfig.json file has "jsx": "react" in the compilerOptions.

  4. Make sure you're running your script with a command that includes the Babel transpiler. If you're using node to run your script, you might need to switch to babel-node.

Unfortunately, I can't provide a more specific solution because the extracts provided don't include information about your project configuration or the command you're using to run your script. If you're still having trouble, I recommend checking the Next.js documentation (https://nextjs.org/docs) or asking for help on the Next.js GitHub repository (https://github.com/vercel/next.js).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@spare lily kapa.ai is still learning and improving, please let us know how it did by reacting below