Uncaught ReferenceError: __VITE_IS_MODERN__ is not defined - reactjs

I am working with #solana/web3.js and #solana/spl-token but I am getting error
Uncaught ReferenceError: __VITE_IS_MODERN__ is not defined
at modulepreload-polyfill:43:3
I am not sure which library is causing this.
My import packages list is here:
import { useState, useEffect, useRef } from "react";
import Select from "react-select";
import "vite/modulepreload-polyfill";
import {Transaction } from "#solana/web3.js";
import { Connection, PublicKey, Keypair, Transaction} from "#solana/web3.js";
import {Token, TOKEN_PROGRAM_ID,ASSOCIATED_TOKEN_PROGRAM_ID, } from "#solana/spl-token";
import bs58 from "bs58";
package.json:


Remove the line
import "vite/modulepreload-polyfill";

Related

Cannot read properties of undefined (reading 'React')

I have an app that works well locally. But on production, I am getting this error.
enter image description here
enter image description here
I thought it is related to webpack but could not find any clue. I am stuck with that.
import React from 'react';
import ReactDOM from 'react-dom';
import moment from 'moment';
import * as styled from 'styled-components';
import NotificationContext from 'og-merchant-portal-react-library/lib/NotificationContext/NotificationContext';
import FetchContext from 'og-merchant-portal-react-library/lib/FetchContext';
import { UserInfoContext } from 'og-merchant-portal-react-library';
import App from './App';
import { unregister } from './serviceWorker';
window.IngenicoLib = {
React,
ReactDOM,
moment,
NotificationContext,
FetchContext,
UserInfoContext,
'styled-components': styled,
};

when i run the code it cant find the model in main.js but app.js is connected through am i suposed to use only '.' insted of'../shared'?

the error
./src/App.js
Module not found: Can't resolve './components/MainComponent' in 'C:\Users\TiZuM\Desktop\NucampFolder-copy\3-React\nucampsite\src'
app.js
import React, { Component } from 'react';
import Main from './components/MainComponent';
import './App.css';
main.js
import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Directory from './DirectoryComponent';
import { CAMPSITES } from '../shared/campsites';
import CampsiteInfo from './CampsiteInfoComponent';

Attempted import error: 'makeObservable' is not exported from 'mobx'

import React from 'react'
import { observer } from 'mobx-react'; //Cause of Error
export default observer(App); //At the bottom of the code
the only line causing an error is import { observer } from 'mobx-react'; and gives my the following error
./node_modules/mobx-react-lite/es/utils/assertEnvironment.js
Attempted import error: 'makeObservable' is not exported from 'mobx'.

update mobx to last version and try again

React Import looks in the wrong directory

For some reason when I try to import one particular module, react refuses to look in the correct directory (./node_modules/). Instead it looks in the ./src/ directory and throws this error:
/src/App.js
Module not found: Can't resolve 'react-d3gantt' in '/Users/RAVEN/Desktop/frontend/materialui/material/src'
All of my other modules are imported correctly. What is it about this one in particular?
Here is my code:
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { GanttChart } from "react-d3gantt";
import OilSite from './components/oilsite';
import BigButton from './components/bigButton';
import LeftNav from './components/leftNav';
import './index.css';
Edit: I used Create-React-App, in case this is relevant to my set up.

Observable.from() in angular 2 tests - errors inside test method

I have to use an Observable in my tests and this little code:
it("should emit values", () => {
const f = Observable.of([1, 3, 5]);
f.subscribe(d => console.log(d));
});
gives the following error:
TypeError: undefined is not a constructor (evaluating 'Observable_1.Observable.of([1, 3, 5])')
But if I put these 2 lines of code inside a component (say, in ngOnInit) I see emitted values and no error. I wonder if this me or angular 2 has some issues with its testing codebase?
Just in case, these are all imports I use in this particular test file:
import {
it,
inject,
injectAsync,
beforeEachProviders,
TestComponentBuilder
} from 'angular2/testing';
import {ComponentFixture, dispatchEvent, fakeAsync, tick} from 'angular2/testing_internal';
import {provide, bind} from 'angular2/core';
import {FormBuilder} from 'angular2/common';
import {By} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import {ArrayObservable} from 'rxjs/observable/fromArray';
import {Subject} from 'rxjs/Subject';
import {BehaviorSubject} from 'rxjs/subject/BehaviorSubject';
import {SpyLocation} from 'angular2/src/mock/location_mock';
import {RootRouter} from 'angular2/src/router/router';
import {Router, RouterOutlet, RouterLink, RouteParams, ComponentInstruction, RouteData, Location, ROUTER_PRIMARY_COMPONENT} from 'angular2/router';
import {
RouteConfig,
Route,
AuxRoute,
AsyncRoute,
Redirect
} from 'angular2/src/router/route_config_decorator';
import {RouteRegistry} from 'angular2/src/router/route_registry';
import {DirectiveResolver} from 'angular2/src/core/linker/directive_resolver';
import {ResolvedInstruction} from 'angular2/src/router/instruction';

Have you tried changing import {Observable} from 'rxjs/Observable'; to import {Observable} from 'rxjs/Rx'; ? It might help because importing it this way will get you all the operations which you might use in your component.

Resources