Syntax Error when setting custom logo in Payload.config

sassycoder

3 months ago

15

import Logo from "./graphics/Logo";

dotenv.config({
  path: path.resolve(__dirname, "../.env"),
});

const mockModulePath = path.resolve(__dirname, "./mocks/emptyModule.js");

export default buildConfig({
  admin: {
    user: "admins",
    meta: {
      titleSuffix: "- Installmint CMS",
      ogImage: "/assets/favicon.svg",
    },
    components: {
      graphics: {
        Logo,
      },
    },
// ... etc

import React from "react";

const Logo = () => (
  <svg
    width="210"
    height="33"
    viewBox="0 0 210 33"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
// ... etc
</svg>
);

export default Logo;

[21:23:52] INFO (payload): Starting Payload...
/Users/user/Documents/Dev/installmint/installmint-cms/src/graphics/Logo/index.js:7
var Logo = function () { return (<svg width="210" height="33" viewBox="0 0 210 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 ^

SyntaxError: Unexpected token '<'

• 

  jarrod69420

  3 months ago

  What does your tsconfig file look like?

• 

  sassycoder

  3 months ago

  {
    "compilerOptions": {
      "target": "es5",
      "lib": [
        "dom",
        "dom.iterable",
        "esnext"
      ],
      "allowJs": true,
      "outDir": "./dist",
      "declaration": true,
      "declarationDir": "./dist",
      "skipLibCheck": true,
      "strict": false,
      "forceConsistentCasingInFileNames": true,
      "esModuleInterop": true,
      "module": "commonjs",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "jsx": "preserve",
      "sourceMap": true
    },
    "include": [
      "src"
    ],
    "exclude": [
      "node_modules",
      "dist",
      "build",
      "src/tests"
    ],
    "ts-node": {
      "transpileOnly": true
    }
  }

• 

  r3pwn

  3 months ago

  I've seen similar issues that have been resolved with changing the file extension. For example, yours is currently

  index.js

  , so I would try changing it to

  index.jsx
• 

  jarrod69420

  3 months ago

  @r3pwn oh yes, should def do that to start!

• 

  sassycoder

  3 months ago

  Same error unfortunately

• 

  jarrod69420

  3 months ago

  oh

  
  

  
  

  change

  jsx: preserve

  to

  jsx: react

  in your tsconfig

• 

  sassycoder

  3 months ago

  Progress? It's a different error now, it can't resolve

  
  

  ERROR in ./src/payload.config.ts 63:0-35
  Module not found: Error: Can't resolve './graphics/Icon'

  
  
  

  I also tried changing the export default to export it as a module then changed the import in the config to

  import { Icon }

  instead and received the same error.

• 

  r3pwn

  3 months ago

  @sassycoder is the "graphics" folder inside of the "src" folder? If not, the path should be "../graphics/Icon", because the path is relative to the file making the import statement

• 

  sassycoder

  3 months ago

  Hi @r3pwn. Yes it is inside the src folder. Ctrl+clicking on the import statement brings me to the file in VSC

• 

  jarrod69420

  3 months ago

  /Icon

  I thought it was

  /Logo

  ?

  
  

  
  

  I just booted up an app and am unable to reproduce this behavior

• 

  sassycoder

  3 months ago

  It's both actually, I was trying to keep my examples to Logo but forgot last time haha

  
  

  
  

  Hm I'll try to spin up a new app and see if I can find the interference, thank you for checking that

  
  

  
  

  Adding

  index.jsx

  after the path in the import was what finally did the trick! So in

  payload.config

  :

  
  
  

  import Logo from "./graphics/Logo/index.jsx";

  
  
  

  The other problem was what Jarrod pointed out where my tsconfig needed

  jsx

  to be set to

  react

  .

  
  
  

  Thanks for the help all!!