While running tests got: Uncaught TypeError: _get__(...).div is not a function

[shpyo]

Hey, I'm facing one issue that I can't find the root cause. Everything works fine until I run tests. There is an issue with styled.div which throws an error:

  Uncaught TypeError: _get__(...).div is not a function
  at webpack:///src/App/Details.js:3:0 <- tests.webpack.js:96021
HeadlessChrome 0.0.0 (Mac OS X 10.12.4) ERROR
  Uncaught TypeError: _get__(...).div is not a function
  at webpack:///src/App/Details.js:3:0 <- tests.webpack.js:96021

Some details about my project

• emotion version: 8.0.9
• react version: 16.0.0

.babelrc config:

{
  "env": {
    "development": {
      "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "ie >= 11"]
          },
          "modules": false
        }],
        "react"
      ],
      "plugins": [
        "emotion",
        "transform-object-rest-spread",
        "transform-decorators-legacy",
        "transform-class-properties",
        "transform-export-extensions",
        ["transform-runtime", {
          "polyfill": true
        }]
      ]
    }
}

And here is my webpack.config.test.js:

const webpack = require('webpack');
const path = require('path');

const config = {
  devtool: 'inline-source-map',
  target: 'web',
  module: {
    noParse: [
      /node_modules\/sinon\//
    ],
    rules: [{
      test: /\.js$/,
      include: [
        path.join(__dirname, 'src')
      ],
      enforce: 'pre',
      use: [{
        loader: 'babel-loader',
        options: {
          "presets": [
            ["env", {
              "targets": {
                "browsers": ["last 2 versions", "ie >= 11"]
              }
            }],
            "react"
          ],
          "plugins": [
            "emotion",
            "transform-object-rest-spread",
            "transform-decorators-legacy",
            "transform-class-properties",
            "transform-export-extensions",
            "transform-runtime",
            "rewire"
          ]
        }
      }, {
        loader: 'eslint-loader',
        options: {
          failOnError: false,
          failOnWarning: false
        }
      }]
    }, {
      test: /\.js$/,
      exclude: [
        /node_modules/,
        /\.test.js$/
      ],
      loader: 'istanbul-instrumenter-loader',
      options: {
        esModules: true
      },
      enforce: 'post'
    }, {
      test: /\.json$/,
      use: [{
        loader: 'json-loader'
      }]
    }, {
            test: /\.css$/,
            use: [
                {
                    loader: 'css-loader',
                    options: {
                        includePaths: [
                            path.resolve("./node_modules")
            ]
          }
                }
            ]
        }]
  },
  resolve: {
    alias: {
            App: path.resolve(__dirname, 'src/App')
        },
    modules: [
      'src',
      'node_modules'
    ],
    extensions: ['.json', '.js'],
    alias: {
      'sinon': 'sinon/pkg/sinon'
    }
  },
  externals: {
    'react/lib/ExecutionEnvironment': true,
    'react/addons': true,
    'react/lib/ReactContext': true
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({ debug: true }),
    new webpack.NamedModulesPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      __DEVELOPMENT__: false,
      __INTEGRATION__: false
    }),
    {
      apply: function(compiler) {
        compiler.plugin('done', (stats) => {
          if (stats.compilation.errors.length > 0) {
            throw new Error(stats.compilation.errors.map((err) => `\n${err.message}` || `\n${err}`));
          }
        });
      }
    }
  ]
};

const webpackMiddleware = {
  // It suppress error shown in console, so it has to be set to false.
  quiet: false,
  // It suppress everything except error, so it has to be set to false as well
  // to see success build.
  noInfo: false,
  stats: {
    // Config for minimal console.log mess.
    // No asset Information
    assets: false,
    // No chunk information, this is very verbose
    chunks: false,
    // Nor built module information
    chunkModules: false,
    // Use colors
    colors: true,
    // Display the entry points with the corresponding bundles
    entrypoints: false,
    // No need for compilation hash
    hash: false,
    // No need for module information, as of webpack 3
    modules: false,
    // No timing information
    timings: false,
    // Show which exports of a module are used
    usedExports: false,
    // No webpack version information
    version: false
  }
};

module.exports = {
  webpack: config,
  webpackMiddleware
};

And here a source of that file:

import React from 'react';
import { Provider } from 'mobx-react';
import styled from 'react-emotion';

const StyledDetails = styled.div`
    h1 {
        color: #000;
        font-family: 'Proxima Nova';
    }
`;

const stores = {};

const ProofDetails = () => (
    <StyledDetails>
        <Provider {...stores}>
            <div>
                <h1>Details</h1>
            </div>
        </Provider>
    </StyledDetails>
);

export default Details;

Did I missed something? Any clues or ideas?

[emmatown]

That error likely means that emotion's babel plugin isn't running, it's likely that there's another .babelrc or something overwriting the babel config. Try adding babelrc: false to the babel-loader options in your webpack config to force babel to use that config.

{
  loader: 'babel-loader',
  options: {
    babelrc: false,
    presets: [
      [
        'env',
        {
          targets: {
            browsers: ['last 2 versions', 'ie >= 11']
          }
        }
      ],
      'react'
    ],
    plugins: [
      'emotion',
      'transform-object-rest-spread',
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-export-extensions',
      'transform-runtime',
      'rewire'
    ]
  }
}

[greggb]

Your environment might also be test which would not pickup the emotion plugin from dev.

[shpyo]

Thanks for all replies! @mitchellhamilton I added that prop to ignore .babelrc and still got the same error. @greggb So.. I created a test env in my .babelrc - still got that error I'm wondering if this is a webpack issue that loads wrong plugins.

[greggb]

Hmm, my next step would be reducing the config as much as possible to see if it works. Would it be possible to remove your webpack babel config and use just the babelrc to see if it will work?

[shpyo]

@greggb tip with config was very helpful! I had to remove whole options in babel-loader and setup test environment in .babelrc. I'm closing this ticket.

[greggb]

Glad it worked!