We Keep Coding

Why export default doesn't work in this simple code?

Why when I use export default on index.js module it says:
export 'appReducers' (imported as 'appReducers') was not found in './reducers/index' (possible exports: default), but when I change it to module.exports the error go away, why is that?
At redux.js
import { appReducers } from './reducers/index'
const Store = () => {
console.log(appReducers);
}
export default Store
in index.js
const appReducers = "hello world";
export default appReducers
in app.js
import React, { useState, useEffect, useMemo } from 'react';
import Store from './redux'
function App() {
Store();
return (
<div>
</div>
);
}
export default App;

The problem is in redux.js. Instead of
import { appReducers } from './reducers/index'
You need
import appReducers from './reducers/index'
What you were doing before was a named import, not a default import.

Cannot find module with absolute import Next+TS+Jest

I am using absolute imports and
testing a component with Context Provider in a NextJS project.
I have set this up according to jest setup
TEST:
import { render, screen } from 'test-util';
import { Sidebar } from '#/components/Sidebar/Sidebar';
test('if it has a brand image', () => {
render(<Sidebar />);
const brandLogo = screen.getByAltText('logo');
expect(brandLogo).toBeInTheDocument();
});
Here is my test-util.tsx in the root folder.
import React, { FC, ReactElement, ReactNode } from 'react';
import { render, RenderOptions } from '#testing-library/react';
import { AuthProvider } from 'store/auth';
const AllTheProviders: FC = ({ children }) => {
return <AuthProvider>{children}</AuthProvider>;
};
const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
render(ui, { wrapper: AllTheProviders, ...options });
export * from '#testing-library/react';
export { customRender as render };
This is my jest.config.js in the root folder
// #ts-nocheck
const nextJest = require('next/jest');
const createJestConfig = nextJest({
// Provide the path to your Next.js app to load next.config.js and .env files in your test environment
dir: './',
});
// Add any custom config to be passed to Jest
const customJestConfig = {
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
moduleNameMapper: {
// Handle module aliases (this will be automatically configured for you soon)
'^#/components/(.*)$': '<rootDir>/components/$1',
'^#/pages/(.*)$': '<rootDir>/pages/$1',
'^#/firebase/(.*)$': '<rootDir>/firebase/$1',
'^#/store/(.*)$': '<rootDir>/store/$1',
},
testEnvironment: 'jest-environment-jsdom',
};
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);
Here is jest.setup.js in the root folder
import '#testing-library/jest-dom/extend-expect';
I get this error:
FAIL components/Sidebar/__test__/Sidebar.test.tsx
● Test suite failed to run
Cannot find module 'test-util' from 'components/Sidebar/__test__/Sidebar.test.tsx'
1 | import { Sidebar } from '#/components/Sidebar/Sidebar';
> 2 | import { render } from 'test-util';
| ^
3 |
Here is tsconfig.paths.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/pages/*": ["./pages/*"],
"#/components/*": ["./components/*"],
"#/features/*": ["./features/*"],
"#/firebase/*": ["./firebase/*"],
"#/store/*": ["./store/*"]
}
}
}
How to solve this issue? I want to use
import { render, screen } from 'test-util';
What works:
import { render, screen } from '../../../test-util';
import { Sidebar } from '#/components/Sidebar/Sidebar';
test('if it has a brand image', () => {
render(<Sidebar />);
const brandLogo = screen.getByAltText('logo');
expect(brandLogo).toBeInTheDocument();
});

I have a similar config, but it works for me.
Try to add moduleDirectories: ["node_modules", "<rootDir>/"]
inside your customJestConfig object.

Root state of redux/react-native app undefined

When I add this line: import { makePages } from './pages'
I get the error:
Cannot read property 'product' of undefined
pages/index.js
export * from './add'
export { makePages } from './model'
export * from './reducer'
pages/model.js
import type { RecordFactory, RecordOf } from 'immutable'
import { Record } from 'immutable'
export const makePages: RecordFactory<any> = Record({
height: 5
})
export type Pages = RecordOf<any>
I'm not even using makePages in the file and it gets the error.
product/model.js
import type { RecordFactory, RecordOf } from 'immutable'
import { Record } from 'immutable'
import { makePages } from './pages'
const makeProduct: RecordFactory<any> = Record({
pages: 3
})
let product = new makeProduct()
export { product }
Why does import { makePages } from './pages' cause the error?

Actually when I delete export * from './add' the error does not occur so I just need to make sure I'm exporting correctly. Possibly should export everything individually rather than all *

Conditional default export in Typescript

I have the following JS code from a tutorial:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./configureStore.prod');
} else {
module.exports = require('./configureStore.dev');
}
The configureStore.*.ts files both have a default export:
export default function configureStore(initialState?: State) {
// ...
}
I want to translate the conditional export in the former code snippet into TypeScript. If I just leave the code as is, I get a compile-time error:
error TS2306: File 'configureStore.ts' is not a module.
After some trial and error I could get the following to compile:
import {Store} from "redux";
import {State} from "../reducers";
let configureStore: (state?: State) => Store<State>;
if (process.env.NODE_ENV === "production") {
configureStore = require("./configureStore.prod");
} else {
configureStore = require("./configureStore.dev");
}
export default configureStore;
I tried using it like this:
import configureStore from "./store/configureStore";
const store = configureStore();
But I got this error message at runtime:
TypeError: configureStore_1.default is not a function
How can I successfully translate the original code into TypeScript?

if (process.env.NODE_ENV === "production") {
configureStore = require("./configureStore.prod").default;
} else {
configureStore = require("./configureStore.dev").default;
}

Flux threw Dispatcher is not a constructor

I try to use jspm with reactjs. I worked fine. But when I integrated it with flux package from npm. Then it always threw Dispatcher is not a constructor error.
My code as below
AppDispatcher.js
import Flux from 'flux';
export default new Flux.Dispatcher();
StoreBase.js
'use strict';
import {EventEmitter} from 'events';
import AppDispatcher from '../dispatchers/AppDispatcher';
const CHANGE_EVENT = 'change';
export default class BaseStore extends EventEmitter {
constructor() {
super();
}
subscribe(actionSubscribe) {
this._dispatchToken = AppDispatcher.register(actionSubscribe());
}
get dispatchToken() {
return this._dispatchToken;
}
emitChange() {
this.emit(CHANGE_EVENT);
}
addChangeListener(cb) {
this.on(CHANGE_EVENT, cb)
}
removeChangeListener(cb) {
this.removeListener(CHANGE_EVENT, cb);
}
}
I used reactjs#0.13.3, react-router#0.13.3 and flux#2.0.3. Could anyone help me on this?

If you are using Babel you can use below
import { Dispatcher } from 'flux';
const dispatcher = new Dispatcher();
export default dispatcher;

You should export the Dispatcher as follows
import Flux from 'flux';
export default new Flux.Dispatcher;