redux package not installed correctly - redux

I installed redux as a package but I get this error:
export 'default' (imported as 'Redux') was not found in 'redux' (possible exports: __DO_NOT_USE__ActionTypes, applyMiddleware, bindActionCreators, combineReducers, compose, createStore)
take a look at the repo:
https://github.com/Mai9550/redux-course

The error message is correct - there is no default export from the redux package, so your import statement needs to change.
The recommended pattern is using the actual named imports:
import { createStore, combineReducers } from 'redux';
You could use the "combine all named imports into an object" import pattern:
import * as Redux from 'redux';
However, and this is more important: you shouldn't be using the redux package by itself. Instead, today you should be using our official Redux Toolkit package instead to write your Redux logic.
Please see our Redux core docs tutorials, which explain how to learn and use Redux the right way:
https://redux.js.org/tutorials/index

Related

Meteor Tabular errors on initialization

I'm following along the guide to setup Meteor Tabular v2.1.2 (guide). I have added the package and installed the theming packages. I'm using Meteor v2.8.0 and the project is a Blaze-based project.
In client/main.js, I set up the library as instructed.
import { $ } from 'meteor/jquery';
import dataTablesBootstrap from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
dataTablesBootstrap(window, $);
Now when I go to the browser, there is this error:
Can anyone help me on this?
So after serious debugging , I discovered it is enough to just import the DataTable module as such after installing it with npm
import { $ } from 'meteor/jquery';
import 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
// You don't need the code previously here .
You can now setup you DataTable as such
$(element).DataTable(//Your config object)

hi i tried to import redux to react i put the order npm install redux

i install npm redux also npm react-redux
did these code inside index .js
import { createStore } from "redux";
import { Provider } from "react-redux";
const reducer=(State={count:0} ,action)=>{
return State;
}
const store= createStore(reducer)
root. Render(
<Provider >
<App />
</Provider>
here
but it seem it doesn't read [createstore][1] because at the terminal i saw msg with install redux make the location global
i changed in 4 file npm ,npm.exe ,xpn, xpn.exe and install redux and react-redux again by these commands again (npm i redux -global , npm i react-redux g same thing
i locked at json it seems all file in json package.lock is still same problem doesn't see create store i tried and i keep search it still same any help please
consider adding store prop to the Provider component eg.:
<Provider store={store}>
To make your code cleaner, I recommend you to create your store in a separate file and export it there ..
Then in index.js, import the store and provide it to the Provider component as we did above

How can I import firebase-database as an es6 module

I want to import the firebase-database using esm import. I can only find the script version:
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-database.js"></script>
What is the url I need for the esm module version?
Note: I do not want a "bare import", I am not using webpack etc. I need a complete url.
There is an older version available on unpkg.com but not the current version.
It turns out there are two CDN's that can provide this: snowpack/skypack, and jspm:
skypack:
import firebase from 'https://cdn.skypack.dev/#firebase/app'
import 'https://cdn.skypack.dev/#firebase/database'
jspm:
import { firebase } from 'https://jspm.dev/#firebase/app'
import 'https://jspm.dev/#firebase/database'
These both deal with "bare import" conversion to JS, and any code conversions required to be JS Modules.
Google does not appear to want to support a module form on their firebase CDN, an Issue to that effect was immediately closed, suggesting complex workflow solutions.
I'm really thankful to the two projects above, supporting simple es6 JS and zero workflow solutions.
Edit: snowpack's esinstall can turn most js files into modules. Here's a node script that brought in all my dependencies:
#!/usr/bin/env node --require esm
import { install } from 'esinstall'
import nodePolyfills from 'rollup-plugin-node-polyfills'
async function run() {
const foo = await install(
[
'mapbox-gl',
'three',
'three/examples/jsm/controls/OrbitControls.js',
'three/src/core/Object3D.js',
'chart.js',
'dat.gui',
'fflate',
'#turf/turf',
'stats.js',
'#firebase/app',
'#firebase/database',
],
{
rollup: {
plugins: [nodePolyfills()],
},
}
)
}
run()
If you're using a bundler, then follow the instructions in the documentation:
Install the firebase npm package and save it to your package.json file
by running:
npm install --save firebase
To include only specific Firebase products (like Authentication and
Cloud Firestore), import Firebase modules:
// Firebase App (the core Firebase SDK) is always required and must be listed first
import * as firebase from "firebase/app";
// If you enabled Analytics in your project, add the Firebase SDK for Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
For realtime database, you would add import "firebase/database".

How to migrate from #clr/icons to #clr/core?

Clarity changelog for version 3 says package #clr/icons is now deprecated.
Deprecating the #clr/icons package as a standalone package. A
migration path will be available to get improvements made in Clarity
Core initative to optimize build sizes.
But documentation for icons still uses deprecated package in examples of code.
How I can migrate on #clr/core package?
angular.json
"styles": [
"node_modules/#clr/icons/clr-icons.min.css"
]
app.component.ts
import '#clr/icons';
import '#clr/icons/shapes/essential-shapes';
import '#clr/icons/shapes/media-shapes';
import '#clr/icons/shapes/social-shapes';
import '#clr/icons/shapes/travel-shapes';
import '#clr/icons/shapes/technology-shapes';
import '#clr/icons/shapes/chart-shapes';

Using React components from npm in Meteor 1.3

I would like to know how to use React components from npm in Meteor 1.3 using import.
I am trying to use react-gravatar in my project. I did npm install --save react-gravatar. And in my component, I required it:
import React from 'react';
import Gravatar from 'react-gravatar';
export default React.createClass({
render() {
...
}
});
But I get:
Uncaught Error: Cannot find module 'querystring'
I think this is because querystring is not available in client side, and I need to use browserify-reactify of some sort. But how can I do so in Meteor 1.3?

Resources