When I do npm start in the portal dir it has the error message:
Script: c:\users\me\IdeaProjects\portal\cp-frontend\tailwind.js
Line 32, char 7
Error: expected identifier, string or number
Code: 800A0404.
Source: Microsoft JScript compilation error.
The info on the screen before the error message and after npm start is:
>npm start
> start
> concurrently -k -n 'frontend,backend' "npm run start-frontend" "npm run start-backend"
[frontend]
[frontend] > start-frontend
[frontend] > cd cp-frontend && npm run start
[frontend]
[backend]
[backend] > start-backend
[backend] > cd cp-backend && npm run start
[backend]
[frontend]
[frontend] > customer-portal-frontend@0.1.0 start
[frontend] > npm run tailwind:css && react-scripts start
[frontend]
[backend]
[backend] > customer-portal-poc@1.0.0 start
[backend] > nodemon -r dotenv/config index.js
[backend]
[backend] [nodemon] 2.0.2
[backend] [nodemon] to restart at any time, enter `rs`
[backend] [nodemon] watching dir(s): *.*
[backend] [nodemon] watching extensions: js,mjs,json
[backend] [nodemon] starting `node -r dotenv/config index.js`
[backend] Server listening on port: 3002
[frontend]
[frontend] > customer-portal-frontend@0.1.0 tailwind:css
[frontend] > tailwind build src/tailwind.src.css -c tailwind.js -o src/tailwind.css
[frontend]
[frontend] npm run start-frontend exited with code 1
--> Sending SIGTERM to other processes..
[backend] npm run start-backend exited with code 1
My tailwind.js file looks like this (line 32 shown in added comment):
module.exports = {
theme: {
extend: {
colors: {
primary: '#63ACE5',
background: '#E6EFF6',
'blue-light': '#63ACE5',
'blue': '#4C86B5',
'blue-dark': '#2A4E68',
accent: '#FCAB4D'
},
spacing: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem',
}, //this is line 32
screens: {
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
}
},
},
variants: {
tableLayout: ['responsive', 'hover', 'focus'],
borderWidth: ['responsive', 'first', 'last', 'hover', 'focus'],
padding: ['responsive', 'first', 'last'],
},
plugins: [],
};
I'm looking at these threads, tailwind file or enter link description here, but since this web page is a running web page in prod, I doubt I'd need to edit my tailwinds file or rename a file.
I have built the project in IntelliJ idea.
Update1: I tried npm install -g yarn but still get the same error message.
Update: I tried renaming tailwind.js to tailwind.config.js in cp-frontend and also it's reference in package.json. Npm start had error:
Failed to compile layout.js. Module not found can’t resolve react.router
I did the following:
in root dir and cp-frontend dir:
npm install react-router-dom
npm install react-router-config
I didn't get popup error after that, but had errors:
[frontend] Line 21:6: React Hook useEffect has a missing dependency: 'register'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/findProperty/FindProperty.js
[frontend] Line 47:6: React Hook useEffect has a missing dependency: 'register'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/dashboard/PastPayments.js
[frontend] Line 4:8: 'ChevronIcon' is defined but never used no-unused-vars
[frontend] Line 5:8: 'DownloadIcon' is defined but never used no-unused-vars
[frontend]
[frontend] ./src/components/common/alerts/Alerts.js
[frontend] Line 54:6: React Hook useEffect has an unnecessary dependency: 'fetchAlertData'. Either exclude it or remove the dependency array. Outer scope values like 'fetchAlertData' aren't valid dependencies because mutating them doesn't re-render the component react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/pastBills/PastBills.js
[frontend] Line 66:6: React Hook useEffect has missing dependencies: 'history', 'params', 'serviceAccounts', and 'showFileInUrl'. Either include them or remove the dependency array react-hooks/exhaustive-deps
[frontend] Line 93:11: <iframe> elements must have a unique title property jsx-a11y/iframe-has-title
[frontend]
[frontend] ./src/components/user/dashboard/CustomerSvcTable.js
[frontend] Line 7:22: 'formatCurrencyNum' is defined but never used no-unused-vars
[frontend] Line 34:6: React Hook useEffect has a missing dependency: 'getSvcOrder'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[frontend]
[frontend] ./src/components/user/layout/Layout.js
[frontend] Line 80:6: React Hook useEffect has a missing dependency: 'fetchInitialData'. Either include it or remove the dependency array react-hooks/exhaustive-deps
[frontend] Line 86:20: 'Tawk_API' was used before it was defined no-use-before-define
[frontend] Line 91:9: 'Tawk_LoadStart' is assigned a value but never used no-unused-vars
[frontend]
[frontend] ./src/components/common/navbar/Navbar.js
[frontend] Line 91:15: No duplicate props allowed react/jsx-no-duplicate-props
[frontend]
[frontend] ./src/components/common/card/Card.js
[frontend] Line 94:21: Using target="_blank" without rel="noopener noreferrer" is a security risk: see https://mathiasbynens.github.io/rel-noopener react/jsx-no-target-blank
[frontend]
[frontend] Search for the keywords to learn more about each warning.
[frontend] To ignore, add // eslint-disable-next-line to the line before.
My question now is, do I need to add the missing dependencies to the package.json for the frontend? I'm sure they will go away if I do npm install , but I'm unclear on the permanent fix. Do the dependency list items have an order? The browser popped up with a blank screen but the debugging tool doesn't show an error that I can see.
