Unable to compile react application as it says "Module not found" - javascript

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 .

Related

Error: "domain option is required" in Auth0 create-react-app

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.

Attempted import errors in react-native-web monorepo architecture

Hi there,
I am following this article to setup a react-native + web code sharing. Here is the repo link with bare-bone monorepo setup as described in above article.
I successfully did setup bare-bone monorepo app as described in above article, than i ported my existing react-native app code to this architecture(in the components folder) and got mobile app working and everything.
I am getting some errors when i try to run web app(which used react-native-web to convert react-native to web). Its not that i was not expecting some errors, i know react-native-web is yet not that stable and not that up to date for react-native version above 0.55 and all those gotchas.
But the errors i am getting here are more related to my webpack config i think. My config-override.js file is basically the same as original one except this part(which i changed in a hope to get through the errors i will mention below):
const appIncludes = [
resolveApp('src'),
resolveApp('../components/src'),
resolveApp('../../node_modules/react-navigation-deprecated-tab-navigator'),
resolveApp('../../node_modules/react-native-color-matrix-image-filters'),
resolveApp('../../node_modules/react-native-htmlview'),
resolveApp('../../node_modules/react-native-loading-spinner-overlay'),
resolveApp('../../node_modules/#react-native-community/async-storage'),
resolveApp('../../node_modules/react-native-cookies'),
resolveApp('../../node_modules/react-native-router-flux'),
resolveApp('../../node_modules/react-native-actionsheet'),
resolveApp('../../node_modules/react-native-autocomplete-input'),
resolveApp('../../node_modules/react-native-circular-progress'),
resolveApp('../../node_modules/react-native-google-places-autocomplete'),
resolveApp('../../node_modules/react-native-image-progress'),
resolveApp('../../node_modules/react-native-image-zoom-viewer'),
resolveApp('../../node_modules/react-native-image-pan-zoom'),
resolveApp('../../node_modules/react-native-keyboard-aware-scroll-view'),
resolveApp('../../node_modules/react-native-linear-gradient'),
resolveApp('../../node_modules/react-native-permissions'),
resolveApp('../../node_modules/react-native-phone-input'),
resolveApp('../../node_modules/react-native-picker-select'),
resolveApp('../../node_modules/react-native-progress'),
resolveApp('../../node_modules/react-native-push-notification'),
resolveApp('../../node_modules/react-native-snap-carousel'),
resolveApp('../../node_modules/react-native-svg'),
resolveApp('../../node_modules/react-native-tab-view'),
resolveApp('../../node_modules/react-navigation-drawer'),
resolveApp('../../node_modules/react-navigation-stack'),
resolveApp('../../node_modules/react-native-screens'),
resolveApp('../../node_modules/react-navigation-tabs'),
resolveApp('../../node_modules/#react-navigation'),
resolveApp('../../node_modules/react-native-router-flux'),
resolveApp('../../node_modules/react-native-gesture-handler'),
resolveApp('../../node_modules/react-navigation'),
]
Couple or errors i am getting on yarn workspace web start are:
import {
Grayscale
} from 'react-native-color-matrix-image-filters';
It gives:
Attempted import error: 'Grayscale' is not exported from
'react-native-color-matrix-image-filters'.
If i just remove this import and its use, i than get:
Attempted import error: 'react-native-cookies' does not contain a
default export (imported as 'CookieManager').
On:
import CookieManager from 'react-native-cookies';
While playing around, i also got:
...../node_modules/react-native-router-flux/src/navigationStore.js
Attempted import error: 'TabBarBottom' is not exported from 'react-navigation-deprecated-tab-navigator' (imported as 'DEPRECATED_TabBarBottom').
I am pretty sure this is something wrong with my webpack/babel config(config-override.js file). And i certainly know i will get more errors after resolving these. And this setup might end up not working at all for us. But it worths a try and i must be able to get through these errors with your help.
Thanks.

You can probably not use these packages on the web since they're react native packages (Android and iOS) and not web packages.
Which means that you have to split the files that import and use these packages.
Example of creating a wrapper for CookieManager: cookieManagerWrapper.js(everything else: Android and iOS) and cookieManagerWrapper.web.js(Web only).
In the web specific js file, you don't import CookieManager but import an alternative web library instead to implement the same functionality as on mobile but with different code that works on the web.
Then you can import and use cookieManagerWrapper.js everywhere and react-native-web will automatically substitute it with the cookieManagerWrapper.web.js when available.
Some react native packages do work on web too when they're only consisting of platform independent JavaScript code. Also some packages have web implementations that can be aliased in webpack like react-native-gradients with react-native-web-gradients, sadly this is not the case with the packages mentioned in the question.
This file splitting with file.js, file.web.js, file.android.js and file.ios.js makes it possible to write different implementations for each platform. This is also great for some user interface code, you can use 3rd party react components on the web and 3rd party react native components on mobile that look similar to implement more complex user interactions since react native web supports all regular react code and jsx tags on the web.

I was able to get past this error by adding:
config.module.strictExportPresence = false in the config-override.js
Now i am stuck on further issues.
Original issue in the question is gone by this. I will post with any other related updates if i have any.

Trying to install React Keyed File Browser

I have a website that I use to download common files that I need. I want to use this to display the files: https://github.com/uptick/react-keyed-file-browser
I have a raspberry pi that I run my website off of. I installed npm and ran the command from that github page (npm install react-keyed-file-browser) with success but I'm confused as to how to do the next step. Where does this go?
import React from 'react'
import ReactDOM from 'react-dom'
import FileBrowser from 'react-keyed-file-browser'
var mount = document.querySelectorAll('div.browser-mount');
ReactDOM.render(
<FileBrowser
files=[]
/>,
mount[0]
);
Thanks a ton! I'm sorry I'm so clueless.

Best place in project to put a file with polyfill for cross-browser JavaScript support

Wondering where in a React / Redux app (created using create-react-app) is the optimal place to locate/place any files that will serve as custom polyfills for browsers that lack support. Specifically, I need to be able to use Array.prototype.includes and String.prototype.startsWith, along with a few other methods that aren't supported in Internet Explorer or Microsoft Edge. Any suggestions are appreciated!

After you eject your React/Redux app (created using create-react-app),
you should find the polyfills.js at /config folder.
Then you can add your polyfill codes, or use those suggested by Mozilla Developer Network:
Array.prototype.includes()
String.prototype.startsWith()
I hope above does help.

If you use core-js it will be installed using npm and the code will be under the node_modules folder.
You can import it from your application's entry point:
require('core-js')

add this line to your index.js file or app entry file and you are done!
import 'core-js/es6/';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('root'));

Import Session not working

In my Ember App I want to extend Ember Simple Auth's Session Object (I'm using the Ember CLI Addon). That's why I import it like stated in the docs:
import Session from 'simple-auth/session';
When I try to build my app the console logs a file not found error.
I can import the LoginControllerMixin with:
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
Is anyone else experiencing this problem or got a clue what could cause this issue?

That's a known bug in the Ember Simple Auth Addon (https://github.com/simplabs/ember-cli-simple-auth/issues/1) - for now please install the addon directly from the github repository.

Categories