Setting up Wepack and React with ES2015 syntax supported on Django 1.8+

Last week I finished implementing Webpack and React with Django 1.9 thanks to this article from Owais Lone:

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 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!

Kenny Pham

Read more posts by this author.