Line 18:3: 'React' must be in scope when using JSX react/react-in-jsx-scope

8
open
mixxit
mixxit
Posted 1 month ago

Line 18:3: 'React' must be in scope when using JSX react/react-in-jsx-scope #4061

Core Library

No response

Wrapper Library

MSAL React (@azure/msal-react)

Documentation Location

https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/README.md#prerequisites

Description

Following the instructions on the page results in the following error

C:\dev\git\microsoft-authentication-library-for-js\samples\msal-react-samples\b2c-sample>npm install

up to date, audited 1976 packages in 4s

152 packages are looking for funding run npm fund for details

10 moderate severity vulnerabilities

To address all issues (including breaking changes), run: npm audit fix --force

Run npm audit for details.

C:\dev\git\microsoft-authentication-library-for-js\samples\msal-react-samples\b2c-sample>npm run build .

[email protected] build react-scripts build "."

(node:8760) ExperimentalWarning: Package name self resolution is an experimental feature. This feature could change at any time Creating an optimized production build... Failed to compile.

src\App.js Line 18:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 19:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 20:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 21:6: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 22:7: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 23:8: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 34:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 35:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 36:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 38:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 39:5: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\pages\Home.jsx Line 8:3: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 9:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 10:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 13:4: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 14:5: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 15:6: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\pages\Protected.jsx Line 38:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 39:29: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 50:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 56:13: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\ErrorComponent.jsx Line 4:12: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\Loading.jsx Line 4:12: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\NavBar.jsx Line 14:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 15:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 16:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 17:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 18:21: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 20:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 21:17: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\PageLayout.jsx Line 6:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 7:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 8:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 9:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 11:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 12:13: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\SignInButton.jsx Line 28:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 29:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 35:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 50:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 51:17: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\SignInSignOutButton.jsx Line 11:16: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 14:16: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\SignOutButton.jsx Line 25:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 26:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 30:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 32:13: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 47:17: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 48:17: 'React' must be in scope when using JSX react/react-in-jsx-scope

src\ui-components\WelcomeName.jsx Line 16:16: 'React' must be in scope when using JSX react/react-in-jsx-scope

Search for the keywords to learn more about each error.

msftbot[bot]
msftbot[bot]
Created 3 weeks ago

This issue requires attention from the MSAL.js team and has not seen activity in 5 days. @pkanher617 please follow up.

tnorling
tnorling
Created 3 weeks ago

@mixxit These are lint errors, can you please confirm that you have not configured your own lint rules somewhere? (I was not able to reproduce this) You can either turn off the "react/react-in-jsx-scope" rule if you're using react 17 or add import React from "react"; to each of the offending files.

msftbot[bot]
msftbot[bot]
Created 2 weeks ago

@mixxit This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.

mixxit
mixxit
Created 2 weeks ago

@mixxit These are lint errors, can you please confirm that you have not configured your own lint rules somewhere? (I was not able to reproduce this) You can either turn off the "react/react-in-jsx-scope" rule if you're using react 17 or add import React from "react"; to each of the offending files.

I haven't configured any lint rules i just checked it out from scratch

I do not see any import React from "react" in microsoft-authentication-library-for-js\samples\msal-react-samples\b2c-sample\src

Are you saying the source in git is missing this?

package.json in the b2c sample folder seems to show "react": "^17.0.1", for me

Thanks!

samuelkubai
samuelkubai
Created 2 weeks ago

Hi @mixxit,

I have been unable to reproduce this error as well, however as noted in the this issue, this might be an issue with CRA, could you follow this instructions to try resolve the error and tell us if it works.

At the end of the day adding import React from 'react' at the top of each offending files will resolve this error as well, if the above instruction set does not bare fruit.

mixxit
mixxit
Created 2 weeks ago

my package.json says "react-scripts": "4.0.1" but it is advising changing it to "react-scripts": "4.0.0-next.98" the .env file already existed with SKIP_PREFLIGHT_CHECK=true the eslint was different but i have added it

the npm start is now

image

tnorling
tnorling
Created 2 weeks ago

@mixxit You shouldn't need to downgrade react-scripts to a prerelease version. What happens if you revert back to 4.0.1 but keep the new eslint rules?

msftbot[bot]
msftbot[bot]
Created 1 week ago

@mixxit This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.