Modelesq Modelesq - 1 month ago 9
React JSX Question

Importing react with webpack Error: Cannot resolve module 'react'

I'm getting an error

Error: Cannot resolve module 'react'
(and react-dom) with webpack. This has to be the hardest project setup I've had to deal with and I'm really not sure why its not working. I've also checked for similar issues on so, and can't seem to find a solution.

webpack.config.js

module.exports = {
entry: './static/js/base/base.jsx',
output: {
path: __dirname + '/static/scripts',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
}


base.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Navigation extends React.Component {
// ...
constructor(props) {
super(props);

[
// Functions & Event Handlers declaration
].forEach(method => { this[method] = this[method].bind(this); });

this.state = {
hello: 'Hello World!',
};
}

render() {
return (
<div>
<div href="#" class="header item">
WINPMP Login
</div>
<div class="right menu">
<a class="ui primary button item">Students</a>
<a class="ui button item">Teachers</a>
</div>
</div>
);
}
}

React.render(<Navigation/>, document.getElementById('nav'));


I've run
npm install
, everything is there. Why won't it import properly? How can I make this work?

And my package.json

"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"bower": "^1.7.9",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
}

Answer

Try creating a .babelrc file in your project root which looks like this:

{
  presets: [
    "es2015", "react"
  ]
}

and pull out the 'query' field from your webpack config 'loader'