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,
};
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";
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';
I've received this template https://themeforest.net/item/light-admin-clean-bootstrap-dashboard-html-template/19760124 to implement an admin dashboard.
I started it in Angular 8, but I must move it to React.
The problem is that I'm not being able to get it working correctly in React.
In Angular, I setup like this inside angular.json:
"styles": [
"node_modules/select2/dist/css/select2.css",
"node_modules/bootstrap-daterangepicker/daterangepicker.css",
"node_modules/dropzone/dist/dropzone.css",
"node_modules/datatables.net-bs/css/dataTables.bootstrap.css",
"node_modules/fullcalendar/dist/fullcalendar.min.css",
"node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css",
"node_modules/slick-carousel/slick/slick.css",
"src/css/main.css",
"src/css/styles.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/moment/moment.js",
"node_modules/chart.js/dist/Chart.min.js",
"node_modules/select2/dist/js/select2.full.min.js",
"node_modules/jquery-bar-rating/dist/jquery.barrating.min.js",
"node_modules/ckeditor/ckeditor.js",
"node_modules/bootstrap-validator/dist/validator.min.js",
"node_modules/bootstrap-daterangepicker/daterangepicker.js",
"node_modules/ion-rangeslider/js/ion.rangeSlider.min.js",
"node_modules/dropzone/dist/dropzone.js",
"node_modules/editable-table/dist/editable-table.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
"node_modules/fullcalendar/dist/fullcalendar.min.js",
"node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js",
"node_modules/tether/dist/js/tether.min.js",
"node_modules/slick-carousel/slick/slick.min.js",
"node_modules/bootstrap/js/dist/util.js",
"node_modules/bootstrap/js/dist/alert.js",
"node_modules/bootstrap/js/dist/button.js",
"node_modules/bootstrap/js/dist/carousel.js",
"node_modules/bootstrap/js/dist/collapse.js",
"node_modules/bootstrap/js/dist/dropdown.js",
"node_modules/bootstrap/js/dist/modal.js",
"node_modules/bootstrap/js/dist/tab.js",
"node_modules/bootstrap/js/dist/tooltip.js",
"node_modules/bootstrap/js/dist/popover.js",
"src/js/demo_customizer.js",
"src/js/main.js"
]
},
It worked like a charm. But in React I'm getting a lot of warnings and errors.
I tried this inside App.tsx:
import 'select2/dist/css/select2.css'
import 'bootstrap-daterangepicker/daterangepicker.css'
import 'dropzone/dist/dropzone.css'
import 'datatables.net-bs/css/dataTables.bootstrap.css'
import 'fullcalendar/dist/fullcalendar.min.css'
import 'perfect-scrollbar/dist/css/perfect-scrollbar.min.css'
import 'slick-carousel/slick/slick.css'
import './assets/css/main.css'
import './assets/css/styles.css'
import 'jquery'
import 'popper.js'
import 'moment'
import 'chart.js'
import 'select2'
import 'jquery-bar-rating'
import 'ckeditor'
import 'bootstrap-validator'
import 'bootstrap-daterangepicker'
import 'ion-rangeslider'
import 'dropzone'
import 'editable-table'
import 'datatables.net'
import 'datatables.net-bs'
import 'fullcalendar'
import 'perfect-scrollbar'
import 'tether'
import 'slick-carousel'
import 'bootstrap'
import 'dragula'
import './assets/js/demo_customizer.js'
import './assets/js/main.js'
import React from 'react';
import Routes from './routes'
const App: React.FC = () => <Routes/>
export default App;
But I'm getting a lot of error, like:
ReferenceError: jQuery is not defined
./node_modules/bootstrap-validator/js/validator.js
... and so on.
Any idea how I can get this template working on React?
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.