We Keep Coding

How do I import framer-motion using dynamic import in NextJS?

I working with framer-motion in my NextJS project. I'm trying to import {motion} using Next's dynamic import. But unfortunately, it doesn't seem to work.
import { motion } from "framer-motion"
I'm trying to convert the above import as a dynamic import as given below:
const motion = dynamic(() =>
import("framer-motion").then((module) => module.motion)
)
But it throws an error :
"Argument of type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((<Props>(Component: string | ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents)>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'."
Whenever I import other things like icons, custom components it works as expected, for example the dynamic import given below works fine :
const DoubleArrowRightIcon = dynamic(() => import("#radix-ui/DoubleArrowRightIcon"), {
loading: () => <p>..</p>,
})
I have looked at other answers and found this link but still, not able to make it work.
Any help please?

error while import functional component + Element type is invalid: expected a string or a class/function but got: undefined

I am facing the below issue in my test (enzyme test file) . I wanted to create test file for the below component. When i import it to my test file , throwed an error.
Error
Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: undefined.
You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of `FormElement`.
10 | }
11 | it("render the formelement",()=>{
> 12 | mount(<FormElement {...props}/>)
| ^
13 | })
14 | })
My FormElement component
import React from "react";
import '../Styles/Form.scss';
function FormElement({ component: headerComponent, headerName }) {
return (
<section className="form_section">
<div style={{ display: "flex", alignItems: "center" }}>
<h3 style={{ paddingLeft: "15px" }}>{headerName}</h3>
</div>
{headerComponent}
</section>
);
}
export default FormElement;
My test file FormElement.test.js
import React from "react";
import {mount} from "enzyme";
import FormElement from "./FormElement";
describe("FormElement component",()=> {
const props = {
headerName: "test",
component : null
}
it("render the formelement",()=>{
mount(<FormElement {...props}/>)
})
})
My project directory would be like
ui/src/Components/Forms/Common/FormElement.js
ui/src/Components/Forms/Common/FormElement.test.js
I tried couple of ways like change FormElement component in to const like
const FormElement = () =>{
.....,
}
export default FormElement;
then in test file
import FormElement from "./FormElement"
But nothing is working i am not sure what is missing my end , could anyone please suggest .

How to dynamically import React JSX Component; SyntaxError: Unexpected Token

How can I dynamically import a file containing JSX and have it be transpiled like a regular import?
I'm trying to dynamically import() this React component:
import React from 'react';
export default () => {
return (
<div>Test</div>
);
}
from a service in my application:
import('./test').then(({default: Component}) => {
callback(Component);
});
but it appears the dynamic import doesn't transpile the JSX:
SyntaxError: /path/to/test.js: Unexpected token (5:4)
3 | export default () => {
4 | return (
5 | <div>Test</div>
| ^
6 | );
7 | }
8 |
I have plenty of regular imports which work fine:
import OtherComponent from './OtherComponent';
export default () => (
<OtherComponent />
);
so Babel is definitely transpiling those... just not the dynamic ones.
Looking at the build output from yarn build, I can see a chunk is created but it simply contains this error (implying the file cannot be transpiled at build time ?!?):
(window["webpackJsonptest-app"]=window["webpackJsonptest-app"]||[]).push([[0],{272:function(m,e){throw new Error('Module build failed (from ./node_modules/babel-loader/lib/index.js):\nSyntaxError: /path/to/build/test.js: Unexpected token (12:2) ... etc

Query Strings with React for a small weather app

I want to be able to set a city for my weather app using query-strings like ?latt_long=34.052235,-118.243683&&woeid=2442047. Here is a link to it https://github.com/rushingMarina/weather-react-app . Right now I have a cities.json file in my project and App.js fetches data about the cities from there. I can not seem to figure out how to use query-strings. On https://www.npmjs.com/package/query-string it tells me to use const queryString = require('query-string'); in order to use query-strings but I can not declare a const in my App.js.
My App.js:
import React, { Component } from "react";
import FrontSide from "./FrontSide";
import BackSide from "./BackSide";
import "./panel.css";
import cities from "./cities.json"
import queryString from 'query-string';
class App extends Component {
const queryString = require('query-string'); //I get unexpected token error (11:6) on this line right before queryString
console.log(location.search);
state = {flipped: false, currentCity: cities[0]};
onFlip =() => {
this.setState({flipped: !this.state.flipped});
};
onSelectCity = (city) => {
this.setState({currentCity: city})
}
render() {
return (
<div className={`panel ${this.state.flipped ? 'flip' : ""}`}>
<div className="panel-front">
<FrontSide onClick={this.onFlip} currentCity={this.state.currentCity}/>
</div>
<div className="panel-back">
<BackSide
cities={cities}
onClick={this.onFlip}
currentCity={this.state.currentCity}
onSelect={this.onSelectCity}
/>
</div>
</div>
);
}
}
export default App;
My cities.json
[
{
"title":"Los Angeles",
"location_type":"City",
"woeid":2442047,
"latt_long":"34.052235,-118.243683"
},
{
"title":"San Diego",
"location_type":"City",
"woeid":2487889,
"latt_long":"32.715736,-117.161087"
},
{
"title":"New York",
"location_type":"City",
"woeid":2459115,
"latt_long":"40.730610,-73.935242"
},
{
"title":"Chicago",
"location_type":"City",
"woeid":2459115,
"latt_long":"41.881832,-87.623177"
},
{"title":"St Petersburg",
"location_type":"City",
"woeid":2123260,
"latt_long":"59.932739,30.306721"
}
]
i tried declaring
const queryString = require('query-string');
but react shows unexpected token at "queryString"
Please refer to my github link, there you will find App.js and cities.json files
I expect to get information about the city to display on my FrontSide from URL query-string like.
This is the error I am getting:
Failed to compile.
./src/App.js
Syntax error: Unexpected token (11:6)
9 | class App extends Component {
10 |
> 11 | const queryString = require('query-string');
| ^
12 | console.log(location.search);
13 |
14 | state = {flipped: false, currentCity: cities[0]};

Just remote the const queryString = require('query-string'); line out of the class declaration and put it on top. Just right below the import statements and everything should work fine. React doesn't like require statements inside the class declaration

node-vibrant package and react

People,
I´m trying to show the hex of a color inside a react Component with node-vibrant. (I have this node package installed)
It´s working when I run it with node from the console.
|- file.js
|- image.jpg
file.js
// I cannot make it work with ES6 importing
const Vibrant = require('node-vibrant');
let v = new Vibrant('image.jpg')
v.getPalette((err, palette) => console.log(palette.Vibrant.getHex()))
CMD:
node file.js
Result:
#2e5475
When I move that to my component...
import React, { Component } from 'react'
const Vibrant = require('node-vibrant');
class Hello extends Component {
helloPalette = palette => {
console.log(palette)
}
render() {
// I also tried here const Vibrant = require('node-vibrant');
return (
{
let v = new Vibrant('image.jpg')
v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
}
)
}
}
export default Hello
I received the following error...
Error in ./src/Hello.js
Syntax error: C:/test/src/Hello.js: let is a reserved word (23:7)
21 | return (
22 | {
> 23 | let v = new Vibrant('image.jpg')
| ^
24 | v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
25 |
26 | }
And...
If I change and move the var declaration to var v; below the function...
Failed to compile.
Error in ./src/Hello.js
Syntax error: C:/test/src/Hello.js: Unexpected token (10:4)
Or...
If I change and move the var before the return() as well nexpected token, expected ,
Can anyone provide light...? Does anyone use this or something similar with React...?
Will appreciate anyhelp.
Good weekend

You need to declare your object first and correct some syntax errors, THEN return it.
...
let v = new Vibrant('image.jpg')
return v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))

For people interested, you can use the react-palette package which does the job for you:
yarn add react-palette
And your code would look like this:
import Palette from 'react-palette'
<Palette image={IMAGE_URL}>
{palette => (
<div style={{ color: palette.vibrant }}>
Hello world
</div>
)}
</Palette>
The package uses node-vibrant under the hood thanks to an util function, so you can have a look at that if you are interested!