In writing a create-react-app application with authentication provided by Auth0, using a .env file, I am getting a "domain option is required" error. What's causing it and how do I fix it?
(As seen in the code import statements, I'm using the react-use-auth npm module.)
Note: This answer to this question may be found in other SO questions, but they don't reference this error. Hopefully this question helps people with this error find the solution faster. I'm posting the solution I found, but if this error has other causes it'd be great to document those, too.
index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter } from "react-router-dom";
import { AuthProvider } from "react-use-auth";
import App from './App';
ReactDOM.render(
<React.StrictMode>
<AuthProvider
navigate={props.history.push}
auth0_domain={process.env.REACT_APP_AUTH0_DOMAIN}
auth0_client_id={process.env.REACT_APP_AUTH0_CLIENT_ID}>
<App />
</AuthProvider>
</React.StrictMode>,
document.getElementById('root')
);
export default withRouter(App);
.env file (in root directory created by create-react-app):
REACT_APP_AUTH0_DOMAIN=[auth0_domain_name]
REACT_APP_AUTH0_CLIENT_ID=[auth0_client_id]
Watch your .env and environment variables!
As documented here, the "domain option is required error" can be caused by a problem with the environment variables. In fact, replacing
{process.env.REACT_APP_AUTH0_DOMAIN} and {process.env.REACT_APP_AUTH0_CLIENT_ID}
with the actual values makes the error go away.
When using the .env file be aware of the following points (nicely explained in this SO answer):
1. create-react-app has its own mechanism to access the .env file (no need to use dotenv).
2. Make sure the environment variables have the prefix REACT_APP_.
3. Make sure the .env file is in the app's root directory (when created by create-react-app).
4. Make sure to RESTART the app from the command line for .env changes to take effect.
All of these have tripped me up, but most recently it was not restarting (#4) that caused this error.
Related
I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.
This import works, but I can't find any documentation saying that it's valid:
// rather than do a crazy nested import like this
import { myUtil } from '../../../../../lib/utils'
// this appears to work just fine
import { myUtil } from '/lib/utils'
I see where the official answer is to set up a config file with a # alias, so I suppose I will just do that to be compliant. Just thought it was curious that this import worked just fine. I am using the default configuration for a Next.js project set up with create-next-app
Not sure if this is your case, but if the top folder is in the root directory, you can use this
import { myUtil } from './lib/utils'
I'm guessing that's what's happening, even though you don't have the period in yours.
I am actually just getting started with Reactjs. So as i installed all the React packages on my PC using npm, i deleted all the src files which were in it because they were just sample files, i wanted to create on my own, but the problem is that my main js file name was "original.js" while it was demanding that "index.js" can't be found. So i changed my file name to "index.js" and now it works. Can someone tell me how to find the settings where i can see this issue so that i don't have to name my every main rract file as "index.js".
Thank you
Generally in the web development world (not just React), we use index.* files instead of main.* files.
If you would like to rename it, you might need to do some complex stuff like ejecting the app from create-react-app, and then changing webpack.config.js, but that seems way too advanced for you.
Instead I would recommend what most tutorials online say to do, which is keep index.js as the entry point of your app and import your Main component into it, like so:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<React.StrictMode>
<Main />
</React.StrictMode>,
document.getElementById("root")
);
// src/Main.js
import React from 'react';
const Main = () => {
return (
<h1>My main component</h1>
);
};
export default Main;
So I'm having an error that I have no idea where it coming from:
I tried finding where is HeaderSegment but it doesn't exist in my project, I don't have-
import HeaderSegment from './example.js'
I did the usual searched in google but the problem in these answers that I don't have any import module that is HeaderSegment. I'm using React native, Admob and Firebase, and I don't really know where the error is located so here the Repo. I tried to remove node_modules and then npm install but no good,
here the stack:
(Ofcourse that doesn't work) I know it hard to answer this question there two files involved they are header.js and homeStack.js.
Any help will make me happy, Thank you.
Issue
Seems you have mixed up default and named imports of your Header component.
Header is default exported from header.js:
export default Header;
but imported as a named import in homeStack.js:
import { Header } from '../shared/header';
Solution
Fix the Header export to match how it's imported (named export/import):
export Header;
or fix the Header import to match how it's exported (default export/import):
import Header from '../shared/header';
I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!
By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.
If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .