Emotion: Module parse failed in emotion/src/index.js (12:19) and emotion/src/utils.js (3:5), unexpected token

[granmoe]

I'm getting the following error output from webpack when attempting to build a simple component that uses emotion:

WARNING in ./~/emotion/src/react/index.js
81:11-12 "export 'createElement' (imported as 'h') was not found in 'react'

ERROR in ./~/emotion/src/utils.js
Module parse failed: /mnt/c/Users/Granmoe/projects/boilerplates/react-redux-saga-boilerplate/node_modules/emotion/src/utils.js Unexpected token (3:5)
You may need an appropriate loader to handle this file type.
| // @flow weak
| export function omit(
|   obj: { [string]: any },
|   testFn: (key: string, obj: any) => boolean
| ) {
@ ./~/emotion/src/react/index.js 3:0-52
@ ./~/emotion/lib/react/index.js
@ ./~/emotion/react/index.js
@ ./src/components/app.jsx
@ ./src/main.jsx
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.jsx

ERROR in ./~/emotion/src/index.js
Module parse failed: /mnt/c/Users/Granmoe/projects/boilerplates/react-redux-saga-boilerplate/node_modules/emotion/src/index.js Unexpected token (12:19)
You may need an appropriate loader to handle this file type.
| sheet.inject()
|
| export let inserted: { [string | number]: boolean | void } = {}
|
| export function flush() {
@ ./~/emotion/src/react/index.js 2:0-30 6:0-14:17
@ ./~/emotion/lib/react/index.js
@ ./~/emotion/react/index.js
@ ./src/components/app.jsx
@ ./src/main.jsx
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.jsx

I read something in another issue about problems being caused by having your webpack entry file in a source dir named "src," which mine is, as you can see below.

I do have the emotion babel plugin in my babelrc:

```{
"env": {
"production": {
"presets": [["es2015", { "modules": false }], "react", "stage-1"],
"plugins": ["emotion/babel"]
},
"test": {
"presets": [
["env", {
"targets": {
"chrome": 60
}
}],
"react",
"stage-1"
],
"plugins": ["emotion/babel", "babel-plugin-transform-es2015-parameters", "babel-plugin-transform-es2015-destructuring"]
},
"development": {
"presets": [
["env", {
"targets": {
"chrome": 60
}
}],
"react-hmre",
"react",
"stage-1"
],
"plugins": ["emotion/babel", "babel-plugin-transform-es2015-parameters", "babel-plugin-transform-es2015-destructuring"]
}
}
}

And here's my webpack config:

```module.exports = {
  devtool: IS_DEV ? 'inline-source-map' : 'eval',
  entry: './src/main.jsx',
  output: {
    filename: 'bundle.js'
  },
  resolve: {
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js', '.jsx']
  },
  plugins, // uglify, image min, etc
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }, {
        test: /\.css$/,
        exclude: /node_modules/,
        loaders: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    port: 3000,
    compress: false,
    inline: true,
    hot: true,
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true
    }
  }
}

Here's one of my components:

import React from 'react'
import { Fragment, Link } from 'redux-little-router'
import styled from 'emotion/react'

import Counter from 'components/counter.jsx'

const App = styled.div`
  margin: 30px;
`

const List = styled.List`
  list-style-type: none;
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
`

const ListItem = styled.ListItem`
  display: inline;
`

export default () =>
  <App>
    <List>
      <ListItem><Link href="/react-redux-saga-boilerplate/counter">Async Counter</Link></ListItem>
      <ListItem><Link href="/react-redux-saga-boilerplate/foo">Foo</Link></ListItem>
      <ListItem><Link href="/react-redux-saga-boilerplate/bar">Bar</Link></ListItem>
    </List>

    <hr/>

    <Fragment forRoute="/react-redux-saga-boilerplate/counter">
      <Counter />
    </Fragment>
    <Fragment forRoute="/react-redux-saga-boilerplate/foo">
      <p>Just a placeholder</p>
    </Fragment>
    <Fragment forRoute="/react-redux-saga-boilerplate/bar">
      <p>Some content coListd go here</p>
    </Fragment>
  </App>

• emotion version: 7.0.13
• react version: 15.6.1

Reproduction:

Run
./node_modules/webpack-dev-server/bin/webpack-dev-server.js
with BABEL_ENV and NODE_ENV === "development"

[granmoe]

Closing as I got the fix in the slack channel. Fixed by changing

  resolve: {
    modules: [
      'src',
      'node_modules'
    ]
  }

to

  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ]
  }

[mitchellhamilton]

For anyone curious why this happens: it happens because webpack tries to look for the react module so it goes up the file tree until it finds a module directory which in this case is src then node_modules so it looks in src and finds a react folder and uses the index.js file from that folder as the react module.

We're planning to switch to a monorepo with a seperate package for the react version soon which will completely fix this problem.