Error trying to import reducer from 'redux-form' - redux-form

he app was running ok, importing the reducer from redux-form and added to combine reducers, this error appears and i can't find the solution in the web.
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import { createStore, applyMiddleware, compose } from 'redux'
import App from './components/App'
import reducers from './reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(thunk))
)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector('#root')
)
import { combineReducers } from 'redux'
import authReducer from './authReducer'
import {reducer} from '../../node_modules/redux-form/lib/reducer'
export default combineReducers({
auth: authReducer,
form: reducer,
})
withRef is removed. To access the wrapped instance, use a ref on the connected component


I solved this problem with fixing react-redux version in package.json
Changed "react-redux": "^6.0.0" to "react-redux": "^5.1.1"

Related

Module not found: Error: Can't resolve './services/ability' in 'D:\vue.js\ims_frontend\src'

I'm using the #casl package to make a permission-based system with Laravel JWT, I'm following this one https://www.npmjs.com/package/#casl/ability
My main.js file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { abilitiesPlugin } from '#casl/vue';
import ability from './services/ability';
createApp(App)
.use(abilitiesPlugin, ability, {
useGlobalProperties: true
})
.use(router)
.mount('#app');
The error:

Customizing CKEditor for Strapi gives "ckeditor-duplicated-modules" error

I tried to modify this repo to customize CKEditor I want to use in my Strapi project. I added a lot more plugins, this is what my ckeditor.js file looks like:
import ClassicEditorBase from '#ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import EasyImage from '#ckeditor/ckeditor5-easy-image/src/easyimage';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import HorizontalLine from '#ckeditor/ckeditor5-horizontal-line/src/horizontalline.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import IndentBlock from '#ckeditor/ckeditor5-indent/src/indentblock.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import MediaEmbedToolbar from '#ckeditor/ckeditor5-media-embed/src/mediaembedtoolbar.js';
import PageBreak from '#ckeditor/ckeditor5-page-break/src/pagebreak.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import SimpleUploadAdapterStrapi from 'ckeditor5-upload-strapi/src/adapters/simpleuploadadapterstrapi';
import SpecialCharacters from '#ckeditor/ckeditor5-special-characters/src/specialcharacters.js';
import SpecialCharactersEssentials from '#ckeditor/ckeditor5-special-characters/src/specialcharactersessentials.js';
import SpecialCharactersArrows from '#ckeditor/ckeditor5-special-characters/src/specialcharactersarrows.js';
import SpecialCharactersCurrency from '#ckeditor/ckeditor5-special-characters/src/specialcharacterscurrency.js';
import SpecialCharactersLatin from '#ckeditor/ckeditor5-special-characters/src/specialcharacterslatin.js';
import SpecialCharactersMathematical from '#ckeditor/ckeditor5-special-characters/src/specialcharactersmathematical.js';
import SpecialCharactersText from '#ckeditor/ckeditor5-special-characters/src/specialcharacterstext.js';
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough.js';
import Subscript from '#ckeditor/ckeditor5-basic-styles/src/subscript.js';
import Superscript from '#ckeditor/ckeditor5-basic-styles/src/superscript.js';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableCellProperties from '#ckeditor/ckeditor5-table/src/tablecellproperties';
import TableProperties from '#ckeditor/ckeditor5-table/src/tableproperties';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import Title from '#ckeditor/ckeditor5-heading/src/title.js';
import TodoList from '#ckeditor/ckeditor5-list/src/todolist';
import Underline from '#ckeditor/ckeditor5-basic-styles/src/underline.js';
import UploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
export default class AdvancedEditor extends ClassicEditorBase {}
AdvancedEditor.builtinPlugins = [
Essentials,
UploadAdapter,
Alignment,
Autoformat,
Bold,
Italic,
BlockQuote,
CKFinder,
CKFinderUploadAdapter,
EasyImage,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
HorizontalLine,
Image,
ImageCaption,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
IndentBlock,
Link,
List,
MediaEmbed,
MediaEmbedToolbar,
PageBreak,
Paragraph,
PasteFromOffice,
SimpleUploadAdapterStrapi,
SpecialCharacters,
SpecialCharactersEssentials,
SpecialCharactersArrows,
SpecialCharactersCurrency,
SpecialCharactersLatin,
SpecialCharactersMathematical,
SpecialCharactersText,
Strikethrough,
Subscript,
Superscript,
Table,
TableCellProperties,
TableProperties,
TableToolbar,
Title,
TodoList,
Underline
];
AdvancedEditor.defaultConfig = {
// ...many configurations here
language: 'en'
};
I ran the "npm run build" command and then copied the generated file (with translations folder) to the ./extensions/content-manager/admin/src/components/CKEditor folder and this is how I used it in the index.js file:
import React from 'react';
import PropTypes from 'prop-types';
import CKEditor from '#ckeditor/ckeditor5-react';
import styled from 'styled-components';
import { auth } from 'strapi-helper-plugin';
import AdvancedEditor from './ckeditor.js';
const Wrapper = styled.div`
.ck-editor__main {
min-height: 220px;
> div {
min-height: 220px;
}
}
`;
const Editor = ({ onChange, name, value }) => {
const jwtToken = auth.getToken();
return (
<Wrapper>
<CKEditor
editor={AdvancedEditor}
data={value}
onChange={(event, editor) => {
const data = editor.getData();
onChange({ target: { name, value: data } });
}}
config={{
simpleUpload: {
uploadUrl: `${strapi.backendURL}/upload`,
headers: {
Authorization: "Bearer " + jwtToken
}
}
}}
/>
</Wrapper>
);
};
Editor.propTypes = {
onChange: PropTypes.func.isRequired,
name: PropTypes.string.isRequired,
value: PropTypes.string.isRequired,
};
export default Editor
Now already in IDE (Webstorm) I receive a Duplicated code fragment warning. Build passed correctly though. But when I go into Admin Panel on the browser I see this error message:
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated.
I did follow their instructions, deleted the node_modules folder and installed everything again, but still getting the same error.
Any ideas what is wrong here?

OK, finally figured it out. The problem was in all the plugins with version 18.0.0
I guess they were the ones duplicating some modules. Once downgraded to version 15.0.0 - it all worked as it should!
Here's a link to GitHub repo
And to npm package

Vue-socket.io vuex store integration

I have my store defined in ./store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
...
});
and want to set up vue-socket.io in my main.js:
import { MyVuexStore } from './store.js'
Vue.use(VueSocketio, 'http://localhost:5000', MyVuexStore);
However, since the store has no name, I cannot import it and pass it to the VueSocketio:
62:46-57 "export 'MyVuexStore' was not found in './store.js'

I think if you use 'export default', you don't import with curley's.
Try
import MyVuexStore from './store.js'
or change the export to be
export const MyVuexStore = new Vuex.Store({

Could not find a declaration file for module 'material-ui/styles/MuiThemeProvider'?

I'm trying to use the react material-ui theme having installed it from npm, I get the following errors when I include 'import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";' in boot-client.tsx:
TS7016: Could not find a declaration file for module
'material-ui/styles/MuiThemeProvider'.
'W:/web/WebFront/node_modules/material-ui/styles/MuiThemeProvider.js'
implicitly has an 'any' type. Try npm install
#types/material-ui/styles/MuiThemeProvider if it exists or add a new
declaration (.d.ts) file containing declare module
'material-ui/styles/MuiThemeProvider';
I've tried both suggestions to no avail including running the command: npm install -D #types/material-ui.
My #types folder in node_modules exists with the relevant types.
Here is the code where I'm trying to use it:
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}

Ok I figured it out, in tsconfig.json under 'compilerOptions' visual-studio by default had its types set to ["webpack-env"], I needed to add "material-ui" to it or optionally just remove it: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Use the default import from the same path.
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'

The solution that worked for me which is med's answer above which I explain in more detail below.
Open the tsconfig.json file. Add "types":"material-ui", within "compilerOptions": {}
as in
"compilerOptions": {"types":"material-ui"}

vendor.js bundle in fusebox not working

I'm configuring my angular app with fusebox instead of webpack and I want to have 3 separated bundles (polyfills.js, vendor.js and app.js).
In webpack I'm using this:
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts'
being polyfills.ts
import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');
if (process.env.ENV === 'production') {
// Production
} else {
// Development and test
Error['stackTraceLimit'] = Infinity;
require('zone.js/dist/long-stack-trace-zone');
}
and vendor.ts
import '#angular/platform-browser';
import '#angular/platform-browser-dynamic';
import '#angular/core';
import '#angular/common';
import '#angular/compiler';
import '#angular/http';
import '#angular/router';
import '#angular/forms';
import 'rxjs';
import './rxjs-extensions';
with rxjs-extensions.ts
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
Now I changed this to fusebox
fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('~ main.ts vendor.ts');
fuse.bundle('app').instructions('!> [main.ts]').watch().hmr();
In this case polyfills is fine, and vender has all 3rd party dependencies from the app (~main.ts) plus all in vendor.ts, while app has only what is in the project.
It seems to compile fine but then when I execute the code I get a ERROR TypeError: this.http.get(...).map is not a function in my service.get(...).map()
My feeling is that vendor.ts is not importing rxjs-extensions.
Anyone knows how to fix this?
If I use just
fuse.bundle('polyfills').instructions('> polyfills.ts');
fuse.bundle('vendor').instructions('> vendor.ts');
fuse.bundle('app').instructions('> main.ts').watch().hmr();
it works, but then my app.js bundle includes too many things and goes from 303K to 2.4MB

Make sure you got the order right. Try WebIndexPlugin it helps to automatically inject scripts. If you post your configuration file it might be able to tell you what's wrong

Resources