Voyage I: Federation from Day One - Putting it all together - Client application when started is failing

Other Apollo Topics
1

Voyage I: Federation from Day One - Putting it all together - Client application when started is failing
What is wrong and how do I address this.

Compiled with problems:
×
ERROR
[eslint]
src/App.js
Line 1:20: Replace './layout/Layout' with "./layout/Layout" prettier/prettier
Line 2:9: Replace Fallback,·HomePage,·Location}·from·'./pages' with ·Fallback,·HomePage,·Location·}·from·"./pages" prettier/prettier
Line 3:9: Replace Route,·BrowserRouter·as·Router,·Switch}·from·'react-router-dom' with ·Route,·BrowserRouter·as·Router,·Switch·}·from·"react-router-dom" prettier/prettier

src/components/Button.js
Line 1:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 2:9: Replace Button}·from·'@chakra-ui/react' with ·Button·}·from·"@chakra-ui/react" prettier/prettier
Line 4:23: Replace children,·...props with ·children,·...props· prettier/prettier
Line 7:14: Replace bg:·'brand.300' with ·bg:·"brand.300"· prettier/prettier
Line 8:14: Replace bg:·'brand.300' with ·bg:·"brand.300"· prettier/prettier
Line 9:17: Replace bg:·'brand.200',·cursor:·'not-allowed' with ·bg:·"brand.200",·cursor:·"not-allowed"· prettier/prettier
Line 18:38: Insert , prettier/prettier

src/components/LocationCard.js
Line 1:20: Replace './Button.js' with "./Button.js" prettier/prettier
Line 2:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 3:26: Replace './ReviewRating' with "./ReviewRating" prettier/prettier
Line 10:26: Insert , prettier/prettier
Line 11:8: Replace '@chakra-ui/react' with "@chakra-ui/react" prettier/prettier
Line 12:9: Replace Link}·from·'react-router-dom' with ·Link·}·from·"react-router-dom" prettier/prettier
Line 19:35: Insert , prettier/prettier
Line 21:10: Replace comment with ·comment· prettier/prettier
Line 27:20: Replace 'scale(1.1)' with "scale(1.1)" prettier/prettier
Line 28:18: Replace '100%' with "100%", prettier/prettier
Line 36:20: Replace '95%' with "95%" prettier/prettier
Line 71:38: Insert , prettier/prettier

src/components/Logo.js
Line 1:8: Replace '../logo.css' with "../logo.css" prettier/prettier
Line 2:19: Replace 'react' with "react" prettier/prettier

src/components/Nav.js
Line 1:9: Replace Box,·HStack}·from·'@chakra-ui/react' with ·Box,·HStack·}·from·"@chakra-ui/react" prettier/prettier
Line 2:9: Replace Link}·from·'react-router-dom' with ·Link·}·from·"react-router-dom" prettier/prettier
Line 3:9: Replace Logo}·from·'./Logo' with ·Logo·}·from·"./Logo" prettier/prettier

src/components/ReviewCard.js
Line 1:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 2:26: Replace './ReviewRating' with "./ReviewRating" prettier/prettier
Line 3:9: Replace Box,·Heading,·Stack,·Text}·from·'@chakra-ui/react' with ·Box,·Heading,·Stack,·Text·}·from·"@chakra-ui/react" prettier/prettier
Line 4:9: Replace Link}·from·'react-router-dom' with ·Link·}·from·"react-router-dom" prettier/prettier
Line 6:37: Replace rating,·comment,·location with ·rating,·comment,·location· prettier/prettier
Line 8:14: Replace '80%' with "80%" prettier/prettier
Line 9:13: Replace 'pointer' with "pointer", prettier/prettier
Line 40:29: Insert , prettier/prettier

src/components/ReviewRating.js
Line 1:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 2:19: Replace 'react' with "react" prettier/prettier
Line 3:24: Replace 'react-rating-stars-component' with "react-rating-stars-component" prettier/prettier
Line 4:19: Replace '../theme.js' with "../theme.js" prettier/prettier
Line 5:9: Replace IoStar,·IoStarHalf,·IoStarOutline}·from·'react-icons/io5' with ·IoStar,·IoStarHalf,·IoStarOutline·}·from·"react-icons/io5" prettier/prettier
Line 15:18: Insert , prettier/prettier
Line 25:27: Insert , prettier/prettier
Line 46:26: Insert , prettier/prettier

src/components/Spinner.js
Line 1:19: Replace 'react' with "react" prettier/prettier
Line 2:9: Replace Center,·Spinner}·from·'@chakra-ui/react' with ·Center,·Spinner·}·from·"@chakra-ui/react" prettier/prettier
Line 6:19: Replace height:·200 with ·height:·200· prettier/prettier

src/components/SubmitReview.js
Line 1:20: Replace './Button.js' with "./Button.js" prettier/prettier
Line 2:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 3:16: Replace useState}·from·'react' with ·useState·}·from·"react" prettier/prettier
Line 4:26: Replace './ReviewRating' with "./ReviewRating" prettier/prettier
Line 5:9: Replace Flex,·Stack,·Text,·Textarea}·from·'@chakra-ui/react' with ·Flex,·Stack,·Text,·Textarea·}·from·"@chakra-ui/react" prettier/prettier
Line 6:9: Replace GET_LOCATION_DETAILS}·from·'../pages/Location' with ·GET_LOCATION_DETAILS·}·from·"../pages/Location" prettier/prettier
Line 7:9: Replace gql,·useMutation}·from·'@apollo/client' with ·gql,·useMutation·}·from·"@apollo/client" prettier/prettier
Line 24:39: Replace locationId with ·locationId· prettier/prettier
Line 25:42: Replace '' with "" prettier/prettier
Line 28:24: Replace event with (event) prettier/prettier
Line 32:24: Replace comment,·rating:·parseInt(rating,·10),·locationId} with ·comment,·rating:·parseInt(rating,·10),·locationId·}, prettier/prettier
Line 35:8: Replace query:·GET_LOCATION_DETAILS,·variables:·{locationId} with ·query:·GET_LOCATION_DETAILS,·variables:·{·locationId·}· prettier/prettier
Line 36:7: Replace 'getLocationDetails' with "getLocationDetails", prettier/prettier
Line 38:49: Insert , prettier/prettier
Line 65:31: Insert , prettier/prettier

src/index.js
Line 1:17: Replace './App' with "./App" prettier/prettier
Line 2:19: Replace 'react' with "react" prettier/prettier
Line 3:22: Replace 'react-dom' with "react-dom" prettier/prettier
Line 8:17: Insert , prettier/prettier
Line 9:8: Replace '@apollo/client' with "@apollo/client" prettier/prettier
Line 11:19: Replace './theme.js' with "./theme.js" prettier/prettier
Line 12:9: Replace ChakraProvider}·from·'@chakra-ui/react' with ·ChakraProvider·}·from·"@chakra-ui/react" prettier/prettier
Line 15:8: Replace 'http://127.0.0.1:4000' with "http://127.0.0.1:4000", prettier/prettier
Line 20:29: Insert , prettier/prettier
Line 29:27: Replace 'root' with "root" prettier/prettier

src/layout/Layout.js
Line 1:17: Replace '../components/Nav' with "../components/Nav" prettier/prettier
Line 2:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 3:9: Replace Container}·from·'@chakra-ui/react' with ·Container·}·from·"@chakra-ui/react" prettier/prettier
Line 8:19: Replace 'container.xl' with "container.xl", prettier/prettier
Line 23:34: Insert , prettier/prettier

src/pages/Error.js
Line 1:23: Replace 'prop-types' with "prop-types" prettier/prettier
Line 2:19: Replace 'react' with "react" prettier/prettier
Line 3:9: Replace Box,·Heading,·Text,·VStack}·from·'@chakra-ui/react' with ·Box,·Heading,·Text,·VStack·}·from·"@chakra-ui/react" prettier/prettier
Line 5:24: Replace children,·code,·error with ·children,·code,·error· prettier/prettier
Line 30:27: Insert , prettier/prettier

src/pages/Fallback.js
Line 1:20: Replace '../components/Button' with "../components/Button" prettier/prettier
Line 2:19: Replace 'react' with "react" prettier/prettier
Line 3:9: Replace Error}·from·'./Error' with ·Error·}·from·"./Error" prettier/prettier
Line 4:9: Replace Link}·from·'react-router-dom' with ·Link·}·from·"react-router-dom" prettier/prettier

src/pages/Homepage.js
Line 1:26: Replace '../components/LocationCard' with "../components/LocationCard" prettier/prettier
Line 2:24: Replace '../components/ReviewCard' with "../components/ReviewCard" prettier/prettier
Line 3:9: Replace Error}·from·'./Error' with ·Error·}·from·"./Error" prettier/prettier
Line 5:21: Replace '../components/Spinner' with "../components/Spinner" prettier/prettier
Line 12:9: Insert , prettier/prettier
Line 13:8: Replace '@chakra-ui/react' with "@chakra-ui/react" prettier/prettier
Line 14:9: Replace gql,·useQuery}·from·'@apollo/client' with ·gql,·useQuery·}·from·"@apollo/client" prettier/prettier
Line 42:10: Replace error,·loading,·data with ·error,·loading,·data· prettier/prettier
Line 67:39: Replace review with (review) prettier/prettier
Line 80:34: Replace location with (location) prettier/prettier

src/pages/Location.js
Line 1:26: Replace '../components/ReviewRating' with "../components/ReviewRating" prettier/prettier
Line 3:21: Replace '../components/Spinner' with "../components/Spinner" prettier/prettier
Line 4:26: Replace '../components/SubmitReview' with "../components/SubmitReview" prettier/prettier
Line 5:9: Replace Error}·from·'./Error' with ·Error·}·from·"./Error" prettier/prettier
Line 13:7: Insert , prettier/prettier
Line 14:8: Replace '@chakra-ui/react' with "@chakra-ui/react" prettier/prettier
Line 15:9: Replace gql,·useQuery}·from·'@apollo/client' with ·gql,·useQuery·}·from·"@apollo/client" prettier/prettier
Line 16:9: Replace useParams}·from·'react-router-dom' with ·useParams·}·from·"react-router-dom" prettier/prettier
Line 36:10: Replace id with ·id· prettier/prettier
Line 41:14: Insert , prettier/prettier
Line 43:17: Replace locationId:·id} with ·locationId:·id·}, prettier/prettier
Line 52:18: Insert , prettier/prettier
Line 62:75: Replace '·' with "·" prettier/prettier
Line 96:33: Replace comment,·rating with ·comment,·rating· prettier/prettier

src/pages/index.js
Line 1:9: Replace default·as·HomePage}·from·'./Homepage' with ·default·as·HomePage·}·from·"./Homepage" prettier/prettier
Line 2:9: Replace default·as·Location}·from·'./Location' with ·default·as·Location·}·from·"./Location" prettier/prettier
Line 3:9: Replace default·as·Fallback}·from·'./Fallback' with ·default·as·Fallback·}·from·"./Fallback" prettier/prettier

src/theme.js
Line 1:8: Replace '@apollo/space-kit/reset.css' with "@apollo/space-kit/reset.css" prettier/prettier
Line 2:9: Replace extendTheme}·from·'@chakra-ui/react' with ·extendTheme·}·from·"@chakra-ui/react" prettier/prettier
Line 7:14: Replace '#12151A' with "#12151A" prettier/prettier
Line 8:14: Replace '#FCFDFF' with "#FCFDFF" prettier/prettier
Line 9:14: Replace '#DEE2E7' with "#DEE2E7" prettier/prettier
Line 10:12: Replace '#D9CFFF' with "#D9CFFF" prettier/prettier
Line 11:12: Replace '#AD9BF6' with "#AD9BF6" prettier/prettier
Line 12:12: Replace '#7156D9' with "#7156D9" prettier/prettier
Line 13:12: Replace '#3F20BA' with "#3F20BA" prettier/prettier
Line 14:17: Replace '#1B2240' with "#1B2240" prettier/prettier
Line 15:14: Replace '#9C2323' with "#9C2323", prettier/prettier
Line 16:6: Insert , prettier/prettier
Line 20:42: Insert , prettier/prettier
Line 21:4: Insert , prettier/prettier

Search for the keywords to learn more about each error.

2

Hi there @mshah100 ! It looks like the prettier tool we’re using to keep our code nice and organized is objecting to much of the formatting. I’ve jumped into my local version of the code and in the client directory’s .eslintrc.json file, added the following to the "rules" object, under the "prettier/prettier" entry: { "singleQuote": "true" },. This will take care of the error while we work on fixing it on our side.

For reference, here’s how my entire "rules" object looks now:

    "rules": {
        "react/react-in-jsx-scope": "off",
        "prettier/prettier": [
           { "singleQuote": "true" },
           "error",
           {
              "endOfLine": "auto"
           }
        ],
        "no-multi-spaces": ["error"]
    },

Let me know if that doesn’t take care of the issue on your side, and I’ll be happy to troubleshoot further.

1 Like