Deployed NextJS app to Vercel failed Deployment only says "Failed to Compile" - reactjs
I can't figure out why my deployment is crashing because i'm not getting any significant error messages, just loads of warnings that it should still run on (its ran in the past with these same warnings)
Here is the build log:
Running build in Cleveland, USA (East) – cle1
Cloning github.com/shaunsmerling/ecomjobs (Branch: main, Commit: 8953abf)
Cloning completed: 2.582s
Running "vercel build"
Vercel CLI 28.15.7
Installing dependencies...
> ecomjobs#0.1.0 postinstall
> prisma generate || true
Prisma schema loaded from prisma/schema.prisma
✔ Generated Prisma Client (4.10.1 | library) to ./node_modules/#prisma/client in 124ms
You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client
import { PrismaClient } from '#prisma/client'
const prisma = new PrismaClient()
added 284 packages, removed 49 packages, and changed 199 packages in 15s
224 packages are looking for funding
run `npm fund` for details
Detected Next.js version: 13.1.6
Running "npm run build:prod"
> ecomjobs#0.1.0 build:prod
> npm run prisma:update && npm run build
> ecomjobs#0.1.0 prisma:update
> npx prisma db push
Prisma schema loaded from prisma/schema.prisma
Datasource "db": MongoDB database "ejserver" at "ejserver0.krz3l.mongodb.net"
The database is already in sync with the Prisma schema.
Running generate... (Use --skip-generate to skip the generators)
Running generate... - Prisma Client
✔ Generated Prisma Client (4.10.1 | library) to ./node_modules/#prisma/client in
122ms
> ecomjobs#0.1.0 build
> next build
info - Linting and checking validity of types...
warn - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
Failed to compile.
./pages/api/auth/[...nextauth].js
31:21 Warning: 'res' is assigned a value but never used. no-unused-vars
./pages/api/company.js
49:5 Warning: Expected a default case. default-case
./pages/api/emails.js
48:7 Warning: Expected a default case. default-case
./pages/api/jobs.js
58:5 Warning: Expected a default case. default-case
./pages/api/register.js
51:5 Error: 'accpassword' is not defined. no-undef
55:20 Error: 'email' is not defined. no-undef
59:48 Error: 'email' is not defined. no-undef
70:5 Warning: Expected a default case. default-case
./pages/api/users.js
4:5 Warning: 'getUserById' is defined but never used. no-unused-vars
51:7 Warning: Expected a default case. default-case
./pages/australian-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
28:27 Warning: Invalid typeof comparison value. valid-typeof
60:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/blog/build-a-brand-on-shopify.js
37:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
60:19 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
74:15 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
98:17 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
114:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/blog/five-proven-methods-to-increase-your-shopify-brands-aov-in-2023.js
37:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
60:19 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
74:15 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
98:17 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
114:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/blog/index.js
3:10 Warning: 'useState' is defined but never used. no-unused-vars
3:20 Warning: 'useEffect' is defined but never used. no-unused-vars
70:11 Warning: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
119:13 Warning: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
168:13 Warning: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
216:13 Warning: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/blog/top-7-ecommerce-trends-in-2023.js
37:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
60:19 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
74:15 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
99:17 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
115:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/blog/what-is-google-shopping.js
1:17 Warning: 'useState' is defined but never used. no-unused-vars
43:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
66:19 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
80:15 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
104:17 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
121:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/brands/index.js
1:16 Warning: 'useState' is defined but never used. no-unused-vars
1:26 Warning: 'useEffect' is defined but never used. no-unused-vars
./pages/business-operations-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
27:9 Warning: 'bizOps' is assigned a value but never used. no-unused-vars
27:24 Warning: Unexpected string concatenation of literals. no-useless-concat
27:30 Warning: Unexpected string concatenation of literals. no-useless-concat
30:27 Warning: Invalid typeof comparison value. valid-typeof
62:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/canada-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
28:27 Warning: Invalid typeof comparison value. valid-typeof
60:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/company/[companyId]/index.js
1:10 Warning: 'useEffect' is defined but never used. no-unused-vars
1:21 Warning: 'useState' is defined but never used. no-unused-vars
2:10 Warning: 'useRouter' is defined but never used. no-unused-vars
129:23 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
196:19 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
198:17 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
./pages/contactus.js
10:8 Warning: 'submitted' is assigned a value but never used. no-unused-vars
./pages/createaccount.js
49:25 Error: 'session' is not defined. no-undef
157:61 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
157:169 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/creative-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
28:27 Warning: Invalid typeof comparison value. valid-typeof
60:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/customer-service-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
21:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
26:17 Warning: 'session' is assigned a value but never used. no-unused-vars
29:27 Warning: Invalid typeof comparison value. valid-typeof
64:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/employers/companyprofile.js
119:25 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
383:23 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
./pages/employers/posts.js
69:24 Warning: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/finance-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
21:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
26:17 Warning: 'session' is assigned a value but never used. no-unused-vars
29:27 Warning: Invalid typeof comparison value. valid-typeof
64:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/human-resources-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
21:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
26:17 Warning: 'session' is assigned a value but never used. no-unused-vars
29:27 Warning: Invalid typeof comparison value. valid-typeof
64:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/index.js
2:8 Warning: 'HeroBanner' is defined but never used. no-unused-vars
12:8 Warning: 'LogoBanner' is defined but never used. no-unused-vars
19:8 Warning: 'Grid' is defined but never used. no-unused-vars
28:17 Warning: 'session' is assigned a value but never used. no-unused-vars
31:27 Warning: Invalid typeof comparison value. valid-typeof
./pages/job/[jobId]/index.js
1:10 Warning: 'useEffect' is defined but never used. no-unused-vars
1:21 Warning: 'useState' is defined but never used. no-unused-vars
4:8 Warning: 'Footer' is defined but never used. no-unused-vars
139:17 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
141:96 Warning: Unexpected string concatenation of literals. no-useless-concat
142:17 Warning: Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank
./pages/list-your-company.js
92:5 Warning: 'logo' is assigned a value but never used. no-unused-vars
211:23 Warning: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. jsx-a11y/alt-text
./pages/marketing-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
28:27 Warning: Invalid typeof comparison value. valid-typeof
60:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/netherlands-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
20:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
25:17 Warning: 'session' is assigned a value but never used. no-unused-vars
28:27 Warning: Invalid typeof comparison value. valid-typeof
60:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/people-jobs.js
12:8 Warning: 'Filter' is defined but never used. no-unused-vars
21:23 Warning: 'setClearFilter' is assigned a value but never used. no-unused-vars
26:17 Warning: 'session' is assigned a value but never used. no-unused-vars
29:27 Warning: Invalid typeof comparison value. valid-typeof
64:9 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
./pages/post/[slug].js
40:17 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
63:19 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
77:15 Warning: The href attribute requires a valid value to be accessible. Provide a valid, navigable address as the href value. If you cannot provide a valid href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Error: Command "npm run build:prod" exited with 1
Related
React warnings point out to the bundle, not the actual file
I use react-script start, and in chrome console I see warnings point not to the jsx file but bundle.js. Debugging works proper however using the original files, so it looks that sourcemap works (or not?). Is it possible to see points to the original files. Example of the warning: Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. at input at li at ul at TodosList (http://localhost:3000/static/js/bundle.js:430:5) at section at Main (http://localhost:3000/static/js/bundle.js:340:5) at section at App (http://localhost:3000/static/js/bundle.js:35:76)
How do I name my React Component in Webpack export?
I have tested a range of possible Webpack configurations to ensure my component is named when I build my React component. However, I am still met with this PropTypes error: Warning: Failed prop type: The prop `name` is marked as required in `w`, but its value is `undefined`. How do rename my component in an export so that this error would read: Warning: Failed prop type: The prop `name` is marked as required in `CustomName`, but its value is `undefined`. I'd like the reference to be customised instead of w. I'm finding Webpack's documentation to be a little unclear.
The reason this happens is because Webpack minifies your code such that the name of your component (which is just like any variable) is changed to a shorter version in order to make the bundle smaller.
You have to manually set this as a static property on your component:
const Customised = () => {
// Your component
}
Customised.displayName = "Customised"
You can often find plugins for your build tooling (e.g. babel, esbuild) to do this automatically.
Optional Routing in nextjs
I am trying to have optional dynamic routing in nextjs. I have a signup page what i want to have like optional query params like this /signup/:id also i don't want to be shown when hover over the link. When i use 'as' property in link it throws an error. Error: The provided `as` value (/signup) is incompatible with the `href` value (/signup/[id]). Read more: https://err.sh/vercel/next.js/incompatible-href-as
Mock with jest causes warnings: correct casing, tag is unrecognized and unknown properties
I have AccountSelection, that renders AccountSelectionModal.
I want to do mount in order to test some aspects of the user interaction:
const wrapper = mount(<AccountSelection {...accountSelectionComponentParams} />);
However I would like to mock AccountSelectionModal - I don't need it (and it is also connected component and I don't want to use store in my tests).
When I mock it with jest.mock('../AccountSelectionModal', () => 'AccountSelectionModal');
I start to get plenty of warnings:
Warning: <AccountSelectionModal /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
console.error node_modules\fbjs\lib\warning.js:33
and
Warning: The tag <AccountSelectionModal> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
or
Warning: Unknown event handler property `onHide`. It will be ignored.
or
React does not recognize the `selectedAccountId` prop on a DOM element. If you intentionally want it to appear in the DOM as
a custom attribute, spell it as lowercase `selectedaccountid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
All warnings come from props that are set on AccountSelectionModal.
How can I mock properly AccountSelectionModal
The second argument that you pass to mock is a function that returns whatever you want it to return, and since you want to mock a component, then this function should return a valid react component (now it's returning a String).
This is how you should mock your component.
jest.mock('../AccountSelectionModal', () => () => 'AccountSelectionModal');
(Notice how the function passed to mock is now returning a function)
You can also return an String but it should be in lowercase (that contains a dash), that way it would be considered as a custom element and not as a react element.
jest.mock('../AccountSelectionModal', () => 'account-selection-modal');
React, warning 'css' is defined but never used no-unused-vars
I'm working to import CSS files in my React App. I have css being imported successfully like so:
Original source app: https://github.com/timscott/react-devise-sample
MainLayout.jsx
import css from '../styles/base.css'
base.css
body {
opacity: .1;
}
When I load my app in a browser I see the styles taking effect. The problem is, in the console I'm getting a JS warning:
webpackHotDevClient.js:198 ./src/layouts/MainLayout.jsx
.../client/src/layouts/MainLayout.jsx
12:8 warning 'css' is defined but never used no-unused-vars
✖ 1 problem (0 errors, 1 warning)
What am I doing wrong in React to cause the CSS to render but still get a warning in the console?
Name this "component" only if you need call them in some part of the code. e.g. Using CSS-Modules. This is only a regular css so load in this manner : import '../styles/base.css' But if you still want to keep this unused var you can edit your es-lint, and delete this rule. (Not Recommended)
You do not need "css from" since the css file is already connected to the jsx file. You only do that when using other jsx components, for example: import SomeComponent from '../SomeComponent.jsx'