I just started using react-redux-session. I installed the same using npm and implemented the code in my react app. However there is an error that is coming up, localForage.setDriver is not a function. I even installed the dependencies (localforage) for it, but still the error.
Am I missing some necessary step? Below is my component where I am calling it.
import App from './containers/App';
import Routes from './Routes';
import appReducer from './reducers';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';
import { sessionService } from 'redux-react-session';
let store = createStore(appReducer);
const options = { refreshOnCheckAuth: true, redirectPath: '/login', driver:
'LOCALSTORAGE' };
sessionService.initSessionService(store, options);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App>
<Routes />
</App>
</BrowserRouter>
</Provider>,
document.getElementById('main')
);
Package Details:
"redux-react-session": "^2.1.0"<br/>
"localforage": "^1.5.2",
"webpack": "^3.5.6",<br/>
"webpack-dev-server": "^2.7.1"
Any advice would be of great help.
Thanks
Related
So I am trying run a react app locally that was originally developed on windows, on my system which is running Ubuntu 18.04. I use npm install --legacy-peer-deps as suggested by the original developer and the run npm start/npm run start. I encounter the following error from a whole bunch of files,
ERROR in ./src/components/ui/Task/Template/ReturnHomeTemplate.js
1:40-111 Module not found: Error: You attempted to import
/home/praneet/SevenHub/node_modules/react-refresh/runtime.js which
falls outside of the project src/ directory. Relative imports outside
of src/ are not supported. You can either move it inside src/, or add
a symlink to it from project's node_modules/.
In most of the files, the first line is
import React from "react";
and in some files it's not even that. Apparently the app does not use react-refresh explicitly anywhere.
There are warnings with npm install, but I was told that I can safely ignore them and don't have to audit fix them (I am new to react so I am not sure). I have tried reinstalling various node versions, removing node_modules and package-lock.json but am still unsuccessful in resolving the issue. Any pointers on this would be great, and happy to provide more information if necessary.
A few files where the error is thrown from for reference:
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
import Header from "./components/ui/Header";
import { WorldProvider } from "./components/ui/ToolContext";
import { ROSProvider } from "./components/RosContext";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import UniversMap from "./components/ui/UniversMap/UniversMap";
import { Login } from "./components/ui/Login/Login";
import { FormantProvider } from "#formant/ui-sdk";
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Navigation.js
import React from "react";
import LiveTvSharpIcon from "#material-ui/icons/LiveTvSharp";
import EditSharpIcon from "#material-ui/icons/EditSharp";
import BorderHorizontalSharpIcon from "#material-ui/icons/BorderHorizontalSharp";
import StreetViewSharpIcon from "#material-ui/icons/StreetviewSharp";
import EqualizerSharpIcon from "#material-ui/icons/EqualizerSharp";
import ListAltSharpIcon from "#material-ui/icons/ListAltSharp";
import TodayOutlinedIcon from "#material-ui/icons/TodayOutlined";
import robotIcon from "../../assets/robotlogo.png";
import MapOutlinedIcon from "#material-ui/icons/MapOutlined";
import TaskItem from "./Taskitem";
import TaskTabs from "./../ui/TaskTabs";
import RobotList from "./Robots/RobotList";
import { userDemoData } from "./User/Users";
import Users from "./User/Users";
const routes = [
"/dashboard",
"/robots",
"/maps",
"/tasks",
"/users",
"/settings",
"/newmap",
];
const taskTabs = [{ id: 1 }];
const dashboardMappings = {
Live: <LiveTvSharpIcon />,
Layout: <EditSharpIcon />,
test: <EditSharpIcon />,
Zones: <BorderHorizontalSharpIcon />,
Streams: <StreetViewSharpIcon />,
Stats: <EqualizerSharpIcon />,
Logs: <ListAltSharpIcon />,
};
const taskList = [
{ id: 1, task: "sort", user: "A" },
{ id: 2, task: "Collaboration", user: "B" },
{ id: 3, task: "queue", user: "C" },
];
const robotList = [
{ id: 1, name: "Robot1" },
{ id: 2, name: "Robot2" },
];
const drawerMappings = {
dashboard: dashboardMappings,
robots: {
list: [<RobotList />],
icon: <img src={robotIcon} style={{ maxWidth: "24px" }} />,
active: [],
},
maps: {
list: ["Map1", "Map2", "Map3", "Map4"],
icon: <MapOutlinedIcon />,
active: [],
},
tasks: {
list: [<TaskTabs />], //taskTabs.map((item) => <TaskTabs />),
active: [],
},
// tasks: {
// list: taskList.map((item) => (
// <TaskItem task={item.task} id={item.id} user={item.user} />
// )),
// icon: <TodayOutlinedIcon />,
// disabled: true,
// active: [],
// },
users: {
list: [<Users />],
icon: <MapOutlinedIcon />,
active: [],
},
};
export { routes, dashboardMappings, drawerMappings, robotList };
It's hard to provide you with a proper solution, but we can investigate. Try these 3 things:
I) Reinstall node.
Remove node_modules, package-lock.json, yarn.lock (if you have it) from your project. Clear cache (npm cache clean --force).
Completely remove node from your computer (How to completely remove node.js from Windows).
Install node. Try the one that you have now (I may assume that the problem is not related to the node version).
Install packages in your project.
II) Issue with the path
Remove the line import robotIcon from "../../assets/robotlogo.png";. The error is related to importing the data outside of ./src directory, maybe the issue is here. If the number of errors will decrease, please, let me know.
III) Replace:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
{/* <Login /> */}
<FormantProvider>
<App />
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
with
ReactDOM.render(
<div>text</div>,
document.getElementById("root")
);
If the errors are left, provide the list. If the errors disappeared, try:
ReactDOM.render(
<WorldProvider>
<DndProvider backend={HTML5Backend}>
<FormantProvider>
<div>text</div>
</FormantProvider>
</DndProvider>
</WorldProvider>,
document.getElementById("root")
);
Removing the parts of the code, you will localize the error(s).
Also:
Provide the contents of the files where the errors appear (UniversMap.tsx, UserDetails.js, etc). So far, just index.js and Navigation.js are provided, they don't have the errors following your screenshot and they are less useful rather than files with the errors.
Text of all errors including the details provided with the number of the errors (not on a screenshot, but in a text format).
I build an npm package as a test to see how it works. So far it worked, I could build it (--prod) and publish it to a registry. Just one question, if I want to use it in a different project I can include the Module of my npm package which is published and it will be shown in my project.
My Module consists of a few components (ts and HTML) how do I do that if I only want to use one component? So install everything but only use one of them through the selector? For example Angular packages like routing you can do something like this
"" this is what I want to do too.
My module.ts of npm package
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { ShowTitleComponent } from './show-title/show-title.component';
import { MypageComponent } from './mypage/mypage.component';
import { MyCounterComponent } from './my-counter/my-counter.component';
import { MyTitleComponent } from './my-title/my-title.component';
#NgModule({
imports: [
CommonModule,
RouterModule.forChild([
{path: '', pathMatch: 'full', component: MypageComponent}
]),
],
declarations: [ShowTitleComponent, MypageComponent, MyCounterComponent, MyTitleComponent]
})
export class MyuiModule {}
And say I want to install everything but only use ShowtitleComponent, how do I do this? If I import my module in new project everything is shown.
I am trying to get started on running tests on my create-react-app project. I keep getting this error 'Cannot find module 'react-dom' from 'reactBatchedUpdates.js'.
I tried editing package.json by pasting this code into it.
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!<rootDir>/node_modules/",
"!<rootDir>/path/to/dir/"
],
"coverageThreshold": {
"global": {
"branches": 90,
"functions": 90,
"lines": 90,
"statements": 90
}
},
"coverageReporters": ["text"],
"snapshotSerializers": ["my-serializer-module"]
}
I assume that react-dom cannot be imported correctly for whatever reason?
const Header = ({clicked, open}) => {
return (
<div className="Header__Wrapper">
<DrawerToggleButton clicked={clicked} open={open} />
<SubHeader subHeadClass={'Header__Left'} urls={URLS.slice(0, 2)} />
<div className="Logo">
<Lock />
</div>
<SubHeader subHeadClass={'Header__Right'} urls={URLS.slice(2)} />
<LogInButton className="right LogInButton__Wrapper"/>
</div>
);
};
export default Header;
Here is the test code, simple rendering of my presentational header. I am starting to realize it is the way I am wrapping redux and react-router-dom over my component. I think that is my main issue at the moment. I am rather rusty on the inner workings of redux and react-router-dom. I tried following the example in this post redux and react-router-dom wrapping but I am rather unsuccessful.
import React from 'react'
import '#testing-library/jest-dom/extend-expect'
import { render } from '#testing-library/react'
import { createStore } from 'redux'
import {NAVIGATE_PAGES, SAVE_ROUTE} from '../../../../actions/types';
import SubHeader from '../SubHeader';
import Navigate from '../../../../actions/index';
const INITIAL_STATE = {
page: null,
route: null,
};
function reducer(state = INITIAL_STATE, action){
switch (action.type) {
case NAVIGATE_PAGES: {
return {...state, page: action.payload};
}
case SAVE_ROUTE: {
return {...state, route: action.payload};
}
default:
return state;
}
};
function renderWithRouter(
ui,
{
route = '/',
history = createMemoryHistory({ initialEntries: [route] }),
initialState, store = createStore(reducer, initialState) ,
} = {}
) {
return {
...render(<Provider store={store}><Router history={history}>{ui}</Router></Provider>),
// adding `history` to the returned utilities to allow us
// to reference it in our tests (just try to avoid using
// this to test implementation details).
history,
}
}
test('it renders lock', async () => {
const store = createStore(() => ({ reducer: reducer ,initialState:INITIAL_STATE}))
renderWithRouter(<SubHeader/>,{store,});
})
I am just trying to render a simple presentational Navbar component.
However I keep getting the error below.
● Test suite failed to run
Cannot find module 'react-dom' from 'reactBatchedUpdates.js'
However, Jest was able to find:
'utils/reactBatchedUpdates.js'
'utils/reactBatchedUpdates.native.js'
You might want to include a file extension in your import, or update your 'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
However, Jest was able to find:
'../Login/LogInButton.js'
I'm sorry for my bad english.
my fault is that when I want to seo the joints in the module.browser class bootstrap does not appear
app.browser.module.ts;
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
bootstrap: [
AppComponent
],
imports:[
BrowserModule.withServerTransition({appId: 'app-root'}),
AppModule,
]
})
export class AppBrowserModule {}
my bad eror
D:\çalışmalar\code\myWebSite>ng add #ng-toolkit/universal
Installing packages for tooling via npm.
INFO: Project property is set to 'myWebSite'.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
ERROR: If you think that this error shouldn't occur, please fill up bug report here: https://github.com/maciejtreder/ng-toolkit/issues/new
INFO: stacktrace has been sent to tracking system.
Nothing to be done.
help me please
After running once ng add #ng-toolkit/universal we got our initial files generated and retrieved this error.
For me this solution worked:
Delete app.browser.module.ts
In main.ts you need to insert AppModule (instead of AppBrowserModule) in the .bootstrapModule() function.
Now your main.ts looks like this:
import { AppBrowserModule } from '.././src/app/app.browser.module';
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
});
Add bootstrap: [AppComponent] to your app.module.ts #NgModule configuration
Run ng add #ng-toolkit/universal
This will run through successfully but ng-toolkit will leave an invalid line in app.module.ts .withServerTransition({appId:''}), which you can simply delete. Afterwards you can run ng run build:prod and deploy.
If this retrieved an error check if bootstrap: [AppComponent] exists in your app.module.ts and run ng run build:prod again.
You should check where you included Bootstrap.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
This error points that, it can not find the right path.
I try to build Angular 4 app with server rendering side and language route path. All this base on Angular CLI in 1.5.0-rc1 version.
Everything work OK but I can't solve a problem with language in route.
I have two idea - one to make it like a parameter :lang in URL, but everywhere people advice me to use localize-router plugin. It look very good, but my npm run server can't start properly. In console I get an error:
/home/xxx/Projects/private/angular4-cli-seed/node_modules/localize-router/src/localize-router.config.js:1
(function (exports, require, module, __filename, __dirname) { import { Inject, OpaqueToken } from '#angular/core';
Here is my app-routing.module.ts:
import {NgModule, PLATFORM_ID, Inject, OpaqueToken} from '#angular/core';
import 'zone.js';
import 'reflect-metadata';
import { Routes, RouterModule } from '#angular/router';
import {AboutComponent} from './about/about.component';
import {HomeComponent} from './home/home.component';
import {LocalizeParser, LocalizeRouterModule, LocalizeRouterSettings, ManualParserLoader} from 'localize-router';
import {HttpClientModule, HttpClient} from '#angular/common/http';
import {TranslateService} from '#ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import { Location } from '#angular/common';
const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
}
];
export function localizeFactory(translate: TranslateService, location: Location, settings: LocalizeRouterSettings): LocalizeParser {
const browserLocalizeLoader = new ManualParserLoader(translate, location, settings, ['en', 'pl'], 'pl');
return browserLocalizeLoader;
}
#NgModule({
imports: [
RouterModule.forRoot(routes),
LocalizeRouterModule.forRoot(routes, {
parser: {
provide: LocalizeParser,
useFactory: (localizeFactory),
deps: [TranslateService, Location, LocalizeRouterSettings, HttpClient]
}
}),
],
exports: [RouterModule]
})
export class AppRoutingModule {
private static TranslateService: any;
}
Do you have any tips how can I solve it? I found some tips for Webpack (to use exclude list), but I want to use CLI because I don't know Webpack too well.
This problem is connected with library type - it's not a commonjs type, but ES6. More about this problem you can read here on GitHub.
To solve it you can contact the author of library what you want to use in Angular 4 Universal (with Angular CLI). They should recompile it in a proper way.
Another solution (more quick to realize) give me a #sjogren on GitHub. You can use babel.js to recompile library during a building process. To do this you should run:
npm install babel-cli --save
npm install babel-preset-env --save
npm install babel-preset-es2015 --save
and add this code in package.json:
"babel": {
"presets": [
"es2015"
]
},
Finally in package.json you should add to your scripts prestart script with code to recompile the library. In my example:
"scripts": {
"prestart": "node node_modules/babel-cli/bin/babel.js node_modules/localize-router --out-dir node_modules/localize-router --presets es2015"
"start": "......"
}
This worked fine for me, and I don't have an Unexpected Token Import error.