Issue with selecting object properties with import - javascript

i'm using some custom types for my reducers and action creators like this :
const types = {
REQUEST_PENDING: 'ajax api request pending ...',
REQUEST_SUCCESS: 'ajax api success',
TOGGLE_SUGGESTIONS: '[ui] show/hide suggestions list'
}
export default types;
But when i try to import them in other files like this
import { REQUEST_PENDING, REQUEST_SUCCESS } from '../types';
I got this error
Attempted import error: 'REQUEST_PENDING' is not exported from '../types'

You can import "types" and use it like
import types from "../types";
types.REQUEST_PENDING
types.REQUEST_SUCCESS
Or you can export REQUEST_PENDING and REQUEST_SUCCESS as a constants
export const REQUEST_PENDING = "REQUEST_PENDING";
export const REQUEST_SUCCESS = "REQUEST_SUCCESS";
And then import it like
import { REQUEST_PENDING, REQUEST_SUCCESS } from "../types";

If types is the default export anyway why not export the variables directly?
export const REQUEST_PENDING = 'ajax api request pending ...';
export const REQUEST_SUCCESS = 'ajax api success';
export const TOGGLE_SUGGESTIONS = '[ui] show/hide suggestions list';
The problem you have is that you currently have no named exports, only a default export, so you cannot import named values directly from the module.

Related

Translations management with i18n-js, expo-localization, redux in react native project

I have a react native project I am going to localize with expo-localization and I have some questions about the process, mainly If the way I'm doing this is the right approach and one concrete question I have about beign able to use user language stored in redux outside components.
First, the way I'm doing it is:
app/i18n.js
import * as Localization from 'expo-localization'
import { I18n } from 'i18n-js'
import translations from '#app/locales'
const i18n = new I18n(translations)
i18n.enableFallback = true
i18n.locale = Localization.locale
export default i18n
app/components/RandomComponent.js
import * as React from 'react'
import { Text } from 'react-native'
import i18n from '#app/i18n'
const RandomComponent = () => {
return <Text>{i18n.t('key')}</Text>
}
export default RandomComponent
app/services/RandomService.js
import i18n from '#app/i18n'
const method = () => {
return i18n.t('key')
}
export default {
method
}
So far it works just fine. Then I add user language, stored in redux store:
app/components/RandomComponent.js
import * as React from 'react'
import { Text } from 'react-native'
import i18n from '#app/i18n'
const RandomComponent = () => {
i18n.locale = /* use locale from redux store */
return <Text>{i18n.t('key')}</Text>
}
export default RandomComponent
app/services/RandomService.js
import i18n from '#app/i18n'
const method = () => {
i18n.locale = /* use locale from redux store does not work cause it is outside of components */
return i18n.t('key')
}
export default {
method
}
So that's the thing:
Is ok the way i'm organizing this?
How can I use localization with user language stored in redux outside of components? It guess it can not be done because that code is outside store provider? Should I just pass i18n as a parameter in service method calls?

How can i export an import for its side effects only in ecmascript 6?

Recently i saw a video that i guy was exporting a module in commonjs:
// src/routes/index.js file
module.exports = [
require('./user'),
require('./auth'),
require('./demo')
]
// src/routes/user.js
const exppres = require('express')
const api = express.Router()
api.post('/user' , doSomething())
// src/handler.js
const express = require('express')
const api = require('./routes')
const app = express()
app.use(api) // add all routes
I tried all different ways of doing, like:
export default {
import "./user",
import "./auth"
}
and in server layer
import api from './routes'
but nothing works...
Someone knows how to do it?
Try this
module.exports = {
user:require('./user'),
auth:require('./auth'),
demo: require('./demo')
}
Then access them like this
const {user,auth, demo} = require("path to the expoted module")
I don't quite understand what you mean by "for its side effects only", because then you wouldn't need to export anything. Importing for side effects only is done like this with ES6 modules:
import './user';
import './auth';
import './demo';
If you wanted to re-export something from these modules, you'd typically write
export * from './user';
export * from './auth';
export * from './demo';
or
export { default as user } from './user';
export { default as auth } from './auth';
export { default as demo } from './demo';
You would not export an array.

TypeScript does not provide default export

I have problems with Laravel + Vite + Vue 3 project.
I have installed everything as documentation and needed, and this project works separated from Laravel and Vite. But here is the problem, TypeScript doesn't recognize export default. It's always giving an error like:
MainLayout.vue:42
Uncaught SyntaxError: The requested module '/resources/scripts/composable/Auth.js' does not provide an export named 'default' (at MainLayout.vue:42:1)
But the Auth.ts file has exported function, and it looks like:
export default function useAuth(){
return {
CurrentUserToken: 'test';
};
}
This is how I'm calling in some files (example)
import useAuth() from './Auth';
const { CurrentUserToken } = useAuth();
return CurrentUserToken;
Why it would not recognize this named function?
You can export it like this
export function useAuth() {
return {
CurrentUserToken: 'test';
};
}
Import
import { useAuth } from './Auth';
Execute the function
useAuth();
OR
If you want to export default
export default function() {
return {
CurrentUserToken: 'test';
};
}
And import would look like this
import useAuth from './Auth';
Execute the function
useAuth();

Why can't I `import {}` from `export default {}` in typescript

I have a typescript file:
#util.ts
export default {name: 'name'}
I import it from another file:
import {name} from './util'
It fails to compile with the error util has no exported member name. How should I import it in typescript?
Your util.ts file exports a default export, while you are requesting a named export. You must change your import to request the default export:
import name from './util';
See the difference in this article.
If you want to access the value of the name field consider using a named export in your util.ts:
export const name = 'name';
or:
const name = 'name';
export {
name,
}
and then import with:
import { name } from '/util';

how ES6 imports and exports works?

I am writing react application and i has dir with actions files my example action file looks like
export const USER_LOADING_START = 'USER_LOADING_START';
export const USER_LOADED = 'USER_LOADED';
export function userLoadingStart() {
return {
type: USER_LOADING_START
};
}
export function userDataLoaded(value) {
return {
type: USER_LOADED,
payload: {
value: value
}
};
}
and in actions dir i have a file named index.js which content is
import * as userActions from './userActions';
let exp = {
...userActions,
};
export default exp;
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
and it doesn't work but if i write:
import actions from '../actions';
const { userLoadingStart } = actions;
then it is working correctly, so what am i doing wrong ?
i tried
export {
...userActions,
...spinnerActions,
...errorActions
}
and
export exp
but it doesn't compile by webpack
So in other files i want to import my action creators so i use:
import {userLoadingStart} from './actions';
For that to work, it means ./actions must export named values. The issue is that your logic currently bundles everything up and exports it as single named export named default. The easiest way to do that would be for your index to do
export * from './userActions';
to essentially pass everything from ./userActions through as exports of ./actions.

Categories

Resources