Last week I finished implementing Webpack and React with Django 1.9 thanks to this article from Owais Lone: http://owaislone.org/blog/webpack-plus-reactjs-and-django/
However, I had stumbled upon some errors since I use some ES2015 syntax in my React's JSX code.
So if you follow that tutorial but still couldn't make your setup to work. Please take your time to do these additional steps:
First, you have to install an npm package name "babel-preset-es2015" by running this command:
npm install --save-dev babel-preset-es2015 babel-preset-react
Then, on the same directory where you have your npm's package.json file. Add a file named .babelrc with this content:
{
"presets": ["react","es2015"]
}
It means that whenever you use webpack to bundle your JSX code. It will use babel-preset-react and babel-preset-es2015 to translate your JSX files to JS files with ES2015 syntax supported.
Moreover, in your Django's settings.py file, the original code from the tutorial is:
WEBPACK_LOADER = {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
However, if you are using a newer Django version (1.9+). You need to change those lines to:
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'bundles/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
}
}
Then, you can run the command ./node_modules/.bin/webpack --config webpack.config.js like the tutorial shows and you'll be good to go!