I'm having weird errors.
When i try to import redux like this:
import Redux from 'redux'
And when i try to console it
console.log('Redux is', Redux);
It gives me Redux is undefined.
I'm using webpack with babel loader, all standard configurations, nothing seems wrong. I also yarn removed all modules and re-added them, still got the same thing. Now my index.js is just simple as below:
import Redux from 'redux';
console.log('Redux is ', Redux);
My webpack config is like below: '
module.exports = {
devtool: 'inline-source-map',
entry: ['./src/index.jsx', 'babel-polyfill'],
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx'],
},
module: {
rules: [
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
},
include: __dirname,
exclude: /node_modules/,
}
],
},
devServer: {
historyApiFallback: true,
},
plugins: [HtmlWebpackPluginConfig],
};
And i'm using yarn. below is my package.json
"dependencies": {
"redux": "^3.7.2"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"html-webpack-plugin": "^2.29.0",
"path": "^0.12.7",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
},
If i switch to use CDN by adding script tag on index.html, it works fine.
=========EDIT========
as Gilad's answer, doing it this way works
import { createStore } from redux;
// do stuff with createStore
But why I can't do it this way:
import Redux from 'redux';
const { createStore } = Redux;
The latter one gives me "Cannot read property 'createStore' of undefined"
=========MORE EDIT========
i just had a look at the source code of redux, it is written in typescript and there is no "export default" or "export as namespace", that is probably why I can't use
import Redux from 'redux';
const { createStore } = Redux;
Correct me if im wrong.
Please help.
thanks
Your configurations is fine.
Instead of using import Redux from 'redux'
, and the for example using Redux.createSore
, you can use: import { createStore } from 'redux'
and then call createStore
directly.
The same goes off course for combineReducers
and any other function redux exposes.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With