I've noticed strange behavior in my react-redux actions import.
So, I import import * as types from './types'; as usual, everything is clean in my console and all code is works.
But I'm worried about this little error:
What does it means and why my chrome console think this is kinda an error?
Anything I should be worried about?
how you export your const , component from ./types file matters in import.
check below link
Difference between import X and import * as X in node.js (ES6 / Babel)?
Related
When we write code in index.js file in src folder of an React app first of all we write this line:
import React from 'react';
I know react is a package
But I want to know what is React basically
an object, a method or something else.
The React variable that you import is an object, and it contains most of the methods that are used by React when generating a web-page.
The reason this import has been historically required is because the JSX that you write (e.g. return <p>text</p>) gets converted into a function call, calling the React.createElement function.
Note that in newer versions of React you no longer need to import react when using JSX. See https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html for more information.
Credit to Olivier Boissé for an answer in the comments.
In order to find out what React is, you just need to write:
console.log(react);
Then you will see that it is an object with many properties and methods.
String:
import React from "react";
We are writing in order to import this object into a file where we will use some of its method. If you don't use anything from React in the file, then you don't need to import it.
For example, in react 18, it is no longer necessary to import the react object into a file index.js
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />);
In any case, at this stage of your study of react, it may not be entirely clear to you what is used in it and for what, but in the future you will become more aware of all the possibilities of react. There is a time for everything
Happy Friday.
Let me see if I can lay out the problem clearly here:
I build up a bunch of providers in a 'core' package project-core to be shared across a bunch of related projects, and wrap them all in a super provider ProjAppProvider, which I then wrap around my related project, call it Proj1.
So, super simplified to make the issue clear, let's just use material-ui's ThemeProvider as an example (but, in reality, I have apollo-client, notistack, an auth provider, etc.):
In core...
import * as React from 'react'
import theme from '../theme'
import {ThemeProvider} from '#material-ui/core'
const ProjAppProvider = ({children}) => {
return(
<ThemeProvider theme={theme}>
{children}
<ThemeProvider>
}
}
export default ProjAppProvider
and then export that in the index and publish that package.
Then in project-one's package.json I import project-core and then do something like this:
import...
import ProjAppProvider from 'project-core'
const WrappedApp = () => {
return (
<ProjAppProvider>
<ProjOneComponent />
</ProjAppProvider>
)
}
and then in ProjOneComponent:
...
import {useTheme} from '#material-ui/core'
const ProjOneComponent = () => {
const theme = useTheme()
console.log(theme)
}
I get the default theme. If this were notistack, I'd get undefined. Just happens that MUI has a fallback.
Some provisos to stick on here... if at any point in project-core, I use that hook (inside the provider), it works as expected. Also, it appears that if I actually export the hook itself from project-core and use that (i.e., projUseTheme is just exported useTheme), it works.
Everything else "works". It's definitely seeing the core package, importing the right version, etc. etc. Shared components work as expected. Same versions of #material-ui/notistack in both. The theme is available anywhere in the core package-- meaning in nested providers, I can read it correctly. It's something about importing a provider, wrapping it, and then using the use... hook from the original package to retrieve the context that isn't working (or, more likely, I'm not understanding.)
Also, it appears, though I haven't had the time to bisect it, that this started when we upgraded to React 17 and/or CRA 4. Not sure about that. I'll be working on that debugging when I get time.
Any input on what to look for, and/or, if I'm just missing something about why this would be expected is appreciated.
Update:
Seems that I have to export the useTheme and makeStyles from the core package, and that'll make it work. (I.e., import useTheme as coreUseTheme from '#mui' and then export const coreUseTheme in core... and import {coreUseTheme as useTheme} in project-one.
The issue seems to be that the two referencing and external provider conflict somehow? Even if I get the theme from coreUseTheme and log it, it's right. But if I don't import makeStyles from core, and pass it that theme, it will just ignore it and use the default. Which... kinda blows my mind if I'm being really honest.
In my file sketch.js before shifting to combined p5 and react, I had a command
amp = new p5.Amplitude();
after shifting to react, the 'p5' method is not defined anymore.
p.Amplitude()/song.Amplitude() isn't doing the job and returns
(TypeError: ... .Amplitude is not a constructor)
I really don't know from where or how import p5. I guess its something to do with the web config but not sure what.
I've npm install both p5 and react-p5-wrapper, and except this line and rest of the things that required amp all the code running as expected, and I can play music/adjust background with sliders etc ...
at the begging of the file I'm importing:
import React from 'react';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';
I will really be glad for little help!
You might be able to try:
import * as p5 from './{library-path}/p5.js';
It looks like P5 was not originally set up for easy ES6 imports.
This GitHub issue from 2016 seems to identify a similar problem. https://github.com/processing/p5.js/issues/1734
More recently it looks like it can be used correctly with NPM:
https://medium.com/front-end-weekly/learning-the-p5-canvas-drawing-library-in-es6-and-webpack-bf514a679544
Also check out this other potential answer here.
How to use React with p5.js
I'm new to React, still struggling to understand some basics, sorry if my question seems to be weird. We know we need to import modules as
import sth from 'sth';
so when we use Jest, don't we need to do as:
import { test, expect...} from 'Jest';
As #nahanil points out, Jest puts the methods you need in the global scope of your NodeJS runtime. If you put a console.log(global) in your file when running jest, you will see the methods are hooked onto the global scope. Other libraries such as assert does not follow the same convention, and you will need to import the assertions you need.
That happens here:
https://github.com/facebook/jest/blob/160d27ae9b6728dccf268f8a98351bcf82a7d9e1/packages/jest-environment-node/src/index.ts#L21
As explained in the first section in official documentation api
📚 :
In your test files, Jest puts each of these methods and objects into the global environment. You don't have to require or import anything to use them. However, if you prefer explicit imports, you can do import {describe, expect, test} from '#jest/globals'.
import {describe, expect, test} from '#jest/globals'
I'm using karma-webpack and I am refactoring a React Component to use in multiple places. I moved the component
to it's own file, so I can import it and connect it differently by applying mapStateToProps / mapDispatchToProps in the HOC I later include on my page.
Here's the scenario:
EventTable - imports EventTableComponent, exports connected / wrapped component
MyEventTable - imports EventTableComponent, exports connected / wrapped component
EventTableComponent - defines the props / behaviors shared to render the data rows
When I git mv EventTable to EventTableComponent and refactored the code so the connected stuff is in the HOCs, the tests start failing to import EventTableComponent only in karma-webpack. Chrome works just fine and the view render perfectly. QA is happy, or would be, but my build fails.
The build is failing because WrappedComponent is undefined for the EventTable and MyEventTable components, which causes connect to throw the message in the synopsis (cannot read displayName of undefined), but I don't even import either of these files into my test! Instead, it fails while karma webpack is building, but before running any tests.
I fixed the build locally by destroying the view and making a "fake" / "replacement" like this:
function EventTableComponent () {
return (<div>garbage here</div>);
}
The build passes.
The most confusing part in all of this? I don't even test the HOC at all. I import just the EventTableComponent into the test, but karma-webpack, as suggested in the Redux Documentation.
I've written a minimal example gist to illustrate:
https://gist.github.com/zedd45/cbc981e385dc33d6920d7fcb55e7a3e0
I was able to solve this by tricking the module system.
// EventTableComponentWrapper.jsx
import EventTableComponent from './EventTableComponent';
if (process.env.NODE_ENV === 'test') {
module.exports = require('./EventTableComponent.test.jsx');
} else {
module.exports = EventTableComponent;
}
I import this file in both HOC Components, and based on my environment variable, I get the right one, and Karma Webpack is tricked into not exploding.
I arrived at this conclusion based on a few leads, but credit goes to this SO Post:
Conditional build based on environment using Webpack
and also to Wout Mertens from the Webpack Gitter channel for tipping me off to the issue being ES6 Class Import / Export related.