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

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

Related

Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'

I am using SwiperJS in Next.js and trying to set up custom navigation. I want to use the useSwiper hook as explained in the docs (https://swiperjs.com/react#use-swiper) but the import is not working.
When trying to import the hook;
import {Swiper, SwiperSlide, useSwiper} from 'swiper/react/swiper-react' i am running in to error Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'.
I have checked the swiper-react.js file and as far as i can see it does export the useSwiper hook;
import { Swiper } from './swiper.js';
import { SwiperSlide } from './swiper-slide.js';
export { useSwiperSlide, useSwiper } from './context.js';
export { Swiper, SwiperSlide }
The Swiper and SwiperSlide imports are working fine.
Unsure as to why this is happening if anyone can please help?

Uncaught ReferenceError: __VITE_IS_MODERN__ is not defined

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";

REACT ERROR WHILE IMPORTING THE REACT MODULES

Attempted import error: 'AlertContainer' is not exported from 'react-alert'.
import AlertContainer from 'react-alert'
I am getting this import error by running the project
react-alert has only named imports:
import { transitions, positions, Provider as AlertProvider } from 'react-alert'

Attempted import error: 'withTranslation' is not exported from 'react-i18next'

I am new to React nad I want to export a component but I get a error with 'withTranslation'
a summary of my code (version:"i18next": "^17.0.6","react-i18next": "^9.0.10",):
import React, {Component} from 'react';
import { translate } from 'react-i18next';
//version: "i18next": "^17.0.6","react-i18next": "^9.0.10",
//..........
//.............
class FromAlumno extends Component {
//................
//.....................
}
export default withTranslation("translation")(FromAlumno);
The problem is not the exporting in your component, the problem is that you haven't imported withTranslation from react-i18next. Just switch your import to this:
import { withTranslation } from 'react-i18next';
I would recommend reading the documentation for react-i18next before posting here too.
https://react.i18next.com/latest/withtranslation-hoc

Adding the DragDropContext gives me an error about exporting the ES6 module

So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend.
When I add the attribute to the class I get this error:
Uncaught Error: Expected the backend to be a function or an ES6 module
exporting a default function.
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserHowView extends React.Component {
...
..
}
const mapStateToProps = state => ({
...
});
export default connect(mapStateToProps)(userShowView);
What am I doing wrong so far?
One of the examples for the library has this:
#DragDropContext(HTML5Backend)
export default class Container extends Component {
But my definition and export are separate.
This library has a breaking change since v11.0.0 breaking changes:
from
import HTML5Backend from 'react-dnd-html5-backend
to
import { HTML5Backend } from 'react-dnd-html5-backend
If you are still encountering the issue, please check this issue in repo
and make sure you're not including DragDropContext in your render function
Remove the braces from the HTML5Backend import statement. Replace with the following:
import HTML5Backend from 'react-dnd-html5-backend';
This has resolved the issue for me.

Resources