React: How to load components properly? - javascript

I am working on a simple app in react with ES6 and babel. Recently I faced this issue. I used react-notifications package here: https://github.com/minhtranite/react-notifications
I just followed the docs and it works fine. I can import it with import {NotificationContainer, NotificationManager} from 'react-notifications';
But then I tried to work with this: https://github.com/cezary/react-loading
Now in the example of react-loading, the developer isn't using the ES6 way to get the component. I tried to look at the JS file and tried this after doing npm install react-loading:
import {Loading} from 'react-loading'; but somehow this doesn't work. I get this:
You likely forgot to export your component from the file it's defined in
But I can see it is exported. What am I doing wrong?

Since it is a single module, it is exported as default. You'll have to do this:
import Loading from 'react-loading';

Related

How to stop import of node modules with relative paths in React, VS code

I have been using VS code for my React development for over a month now and everything was okay, until recently i noticed something odd, about how node modules were imported in project.
Initially, they were imported as follows, which i believe is the right way:
import { useNavigate } from "react-router-dom";
But now, they are imported like:
import { useNavigate } from "../../../node_modules/react-router-dom/index";
Please help, how can I revert this behaviour.
I have found a solution to this problem from the VS code GitHub issues section.
This was an issue caused by an extension i installed - "Babel Javascript".
According to this comment, I had to switch the language in the bottom bar of VS code being detected from Babel Javascript to Javascript. that solved the issue.
To prevent the issue from recurring, i also disabled the Babel Javascript plugin.

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

React, Getting error: Uncaught ReferenceError: require is not defined

I have a project where I use both react and node (express). When I link to react using src="https://unpkg.com/react#16/umd/react.development.js" etc.. I have no problem using react with JSX in the project, but when I try to import like this:
import React from "react";
I get the error: Uncaught ReferenceError: require is not defined
This kind of "handicaps" me since I want to use modules like axios etc..
I am not using any module bundler
Thanks for any help!
Don't know if I fully understand the question but you seem to be using React.js from a cdn link. With no module bundler. So why are you importing it also? You've already "imported" React.js from your cdn link. =) No need to import it again. The import statement is when you use modules and import them like that with the ES6 syntax. If you want to do that use create-react-app instead.
I had a similar issue that I eventually solved with Browserify. Here's a link to my answer:
https://stackoverflow.com/a/63356350/5132452

How to import vue plugins installed with npm

I am sorry upfront for the pretty noobie question, but I don't know how to import plugins installed with npm. I would like to use this plugin for Vue, I have installed it with npm, in my project, and would like to import it to my main app.js file so that I can use it in Vue.
I have tried with using the path to the file in dist folder:
import MaskedInput from 'node-modules/vue-masked-input/dist/MaskedInput.js'
Vue.use(MaskedInput);
But, that obviously didn't work, what is the right way to do this?
Following the link this is actually a component, so what you could do in your component is:
import MaskedInput from 'vue-masked-input'
export default {
components: {
MaskedInput
}
}
What usually helps is by clicking through to the actual github page, and look for either an example in the README or in the actual code. In this case:
https://github.com/niksmr/vue-masked-input/blob/master/src/App.vue
There it shows you how you can use it 'in real life'

How to import poorly named libraries?

Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.
It's the IDE issue. Please follow WEB-25805 for updates

Categories