Why flow doesn't understand `export default` - javascript

Two instances of code:
const obj = {}
export default obj
export default obj = {}
Flow gives an error on the second
Cannot resolve name obj
Is there something wrong with the code in second place? It works just fine, but flow warns me.

const obj = {
// property goes here
}
export default obj
or,
export default {
// property goes here
}
or
let obj;
export default obj = {
// property goes here
}
Ref: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Related

Change ESM export bindings

I'm wondering how the exported bindings of an ES6 module work when destructuring. I'm exporting an object (thing) as a named export -- but also one of its properties (foo), too, which I'm later updating.
This update works when I import the object and reference its prop, but not when I directly import foo, as shown below. I'm guessing the export const... creates a new, immutable binding, but is there any way to retain its reference to the original object upon export?
// module: 'thing.js'
let thing = {
foo: (x) => console.log(x)
};
const init = () => {
thing.foo = (x) => console.log("updated");
};
export { init, thing };
export const { foo } = thing;
// index.js
import { foo, thing, init } from "./thing";
init();
foo("test"); // does not work
thing.foo("test"); // update is reflected, here
codesandbox
There is not issue with export/import
see this example:
let thing = {
foo: (x) => console.log(x)
};
const init = () => {
thing.foo = (x) => console.log("updated");
};
const foo = thing.foo;
init();
foo("test"); //test
thing.foo("test"); //updated
Variable foo and field thing.foo contains different functions after you rewrite thing.foo inside init function

unable to update object using hooks in react

I have a function that will update my object value depending on the app name using useState hook. But I am not able to use the hook, it gives error invalid hook call.
Any other way to achieve the same will also work.
var myfun = (function() {
const APP_NAME= "sample app"
const [object, setObject] = useState({obj: 'value'})
if(APP_NAME =="sample app") {
setObject({obj:'new value'})
console.log('here')
}
return object
});
myfun();
Create a custom Hook instead of that Function:
const useMyFun = () => {
const [object, setObject] = useState({obj: 'value'});
const APP_NAME = 'sample name';
useEffect(() => {
if (APP_NAME === 'sample name') setObject({obj: APP_NAME});
}, [APP_NAME]);
return object;
}
// In the component you need it:
const SomeComponent = () => {
// will update if state changes in the useMyFun Hook;
const appname = useMyFun();
// rest of your component code
...
}
make sure you use functional components to use this.
NOTE: but this will only be useful if APP_NAME will ever change.
otherwhise you could just use a simple ternary operator:
const object = APP_NAME === 'sample name' ? {obj: APP_NAME} : {obj: 'value'}
Try to move the hook call outside the function like this and the invalid hook call error will disapear i think :
import React from "react";
import { useState } from "react";
function App() {
const [object, setObject] = useState({ obj: "value" });
const myfun = () => {
const APP_NAME = "sample app";
if (APP_NAME === "sample app") {
setObject({ obj: "new value" });
console.log("here");
}
return object;
};
myfun();
return (
....
);
}
export default App;
i hope this helps you .
If all the above answers don't work look for an infinite react hook loop (usually with useEffect);

difference between export default { name } and named export { name }

I am trying to deprecate a module with many named exports like so:
const Foo = () => 'foo';
const Bar = () => 'bar';
export { Foo };
export { Bar };
which is fine when consuming via:
import { Foo, Bar } from './something';
My thoughts about enabling deprecation warnings was to use a default export of type object with a property getter override for each key that prints the deprecation and then returns the module.
The shape then becomes something like:
const something = {};
Object.defineProperty(something, 'Foo', {
get(){
console.warn('Foo is deprecated soon');
return Foo;
}
});
// etc
export default something;
My thinking had been that the destructuring import would figure it out so
import { Foo, Bar } from './something';
... would continue to work as before. Instead, webpack complains that something does not have a named export Foo or Bar
using this, however, works:
const { Foo, Bar } = require('./something');
I can also have import something from './something'; const { Foo, Bar } = something and that works but it defeats the purpose if I have to refactor every import that exists.
So the question really is about how import { Foo, Bar } from './something'; works compared to the require() - I'd have thought that if the default export is an object, it would figure it out and destructure, but no joy.
Is there an easy way to do this 'proxying' without changing how the exports are being consumed elsewhere?
I think i made it work. Bare in mind that this is a workaround.
Given that you said that the library is being "re-exported" from a single file you could add an additional "layer" to the "re-export" where we turn the "re-exportation" file into a JS file and write our own associated typing file for it.
Working repl: https://repl.it/#Olian04/CelebratedKlutzyQuotes
Code snippets:
// index.ts
// consuming the library
import { Foo } from './demo';
console.log(Foo());
// library.ts
// the library it self
const Foo = () => 'foo';
export { Foo }
// demo.js
// the workaround implementation
const depricatedLibrary = require('./library');
const something = new Proxy(depricatedLibrary, {
get(obj, key) {
if (typeof key === 'string') {
console.warn(key + ' is deprecated soon');
}
return obj[key];
}
});
module.exports = something;
// demo.d.ts
// the workaround types
export * from './library';

JSON import from another file contains undefined

I have a data.js containing placeholder data.
Here is data.js :
export const FOO = {
"prop": "example",
"sample":[OB1, OB2, OB3]
}
export const OB1 = {
"id":"1",
"name":"bar"
}
export const OB2 = {
"id":"2",
"name":"buzz"
}
export const OB3 = {
"id":"3",
"name":"bing"
}
console.log(FOO);
I'm trying to import FOO in another file
import {FOO} from './data.js'
But when I log the value of sample I get [undefined, undefined, undefined]
Now I know that the variable reference is probably missing ?
What could be the solution to access FOO with OB values and not just variable.
Your sequence of specifying the export is incorrect
export const OB1 = {
"id":"1",
"name":"bar"
}
export const OB2 = {
"id":"2",
"name":"buzz"
}
export const OB3 = {
"id":"3",
"name":"bing"
}
export const FOO = {
"prop": "example",
"sample":[OB1, OB2, OB3]
}
const FOO should be exported at the end so that it can use the value of OB1, OB1 and OB3. Then you will not get undefined for that array.
A more decent way to do this would be to import data.js first and then reference FOO
Example
//in your new file declare data like this
var _data = require('../data');
//then call FOO
_data.FOO;
//or print it to console like this
var display = _data.FOO;
console.log(display);

react-native imported(?) function arguments is so weired

My react native project skeleton here
-app
--component
--LoginScreen.js
--container
--styles.js
-index.ios.js
-index.android.js
and styles.js....
...
export const colors = {
'green' : '#######'
....
}
export const test = () => {
console.log(arguments);
}
...
and LoginScreen.js
import { test } from '../styles';
export default class LoginScreen {
....
constructor () {
test();
}
....
}
so watch chrome debug console...
Arguments[5]
0:DedicatedWorkerGlobalScope
1:_require(moduleId)
2:Object
3:Object
4:null
callee:(global, require, module, exports)
length:5
Symbol(Symbol.iterator):values()
__proto__:Object
what is this?
imported function always return arguments[5]
I don't know why return that arguments.
I think that this related import? function.
Let me know please
Arrow functions do not bind their arguments. If you want to use variable number of arguments in React Native, you can use rest parameter syntax ... to get an array of arguments.
export const test = (...args) => {
console.log(args);
}
The arguments object should work with named function expressions:
export function test() {
console.log(arguments);
}

Categories