emotion: Uncaught ReferenceError: exports is not defined

  • emotion version: 6.0.3
  • react version: 15.6.1

Relevant code.

import { injectGlobal } from 'emotion'
require('dotenv').config({ silent: true })

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const InterpolateHtmlPlugin = require('interpolate-html-plugin')
const devServer = require('@webpack-blocks/dev-server2')
const splitVendor = require('webpack-blocks-split-vendor')
const happypack = require('webpack-blocks-happypack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const {
  addPlugins, createConfig, entryPoint, env, setOutput,
  sourceMaps, defineConstants, webpack,
} = require('@webpack-blocks/webpack2')

const host = process.env.HOST || 'localhost'
const port = process.env.PORT || 3000
const sourceDir = process.env.SOURCE || 'src'
const publicPath = `/${process.env.PUBLIC_PATH || ''}/`.replace('//', '/')
const sourcePath = path.join(process.cwd(), sourceDir)
const outputPath = path.join(process.cwd(), 'dist')

// Get environment variables to inject into our app.
const getClientEnvironment = require('./scripts/env')

const appEnv = getClientEnvironment(publicPath)
const PROD = process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'

const babel = () => () => ({
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
})

const assets = () => () => ({
  module: {
    rules: [
      { test: /\.(png|jpe?g|svg|woff2?|ttf|eot)$/, loader: 'url-loader?limit=8000' },
      {
        test: /\.css$/,
        exclude: /emotion\.css$/,
        use: PROD
          ? ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: {
              loader: 'css-loader',
              options: {
                sourceMap: true,
                modules: true,
              },
            },
          })
          : ['style-loader', { loader: 'css-loader', options: { modules: true } }],
      },
      {
        test: /emotion\.css$/,
        use: PROD
          ? ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: {
              loader: 'css-loader',
              options: {
                sourceMap: true,
              },
            },
          })
          : ['style-loader', { loader: 'css-loader' }],
      },
      {
        test: /\.(jpg|png|svg)$/,
        loader: 'url-loader',
        options: {
          limit: 25000,
        },
      },
      {
        loader: 'raw-loader',
        test: /\.(example|md)$/,
      },
    ],
  },
})

const resolveModules = modules => () => ({
  resolve: {
    modules: [].concat(modules, ['node_modules']),
  },
})

const config = createConfig([
  entryPoint({
    app: sourcePath,
  }),
  setOutput({
    filename: '[name].js',
    path: outputPath,
    publicPath,
  }),
  defineConstants({
    'process.env.NODE_ENV': process.env.NODE_ENV,
    'process.env.PUBLIC_PATH': publicPath.replace(/\/$/, ''),
  }),
  addPlugins([
    new webpack.ProgressPlugin(),
    new webpack.DefinePlugin(appEnv.stringified),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(process.cwd(), 'public/index.html'),
    }),
    new InterpolateHtmlPlugin(appEnv.raw),
  ]),
  assets(),
  happypack([
    babel(),
  ]),
  resolveModules(sourceDir),

  env('development', [
    devServer({
      contentBase: 'public',
      stats: 'errors-only',
      historyApiFallback: { index: publicPath },
      headers: { 'Access-Control-Allow-Origin': '*' },
      host,
      port,
    }),
    sourceMaps(),
    addPlugins([
      new webpack.NamedModulesPlugin(),
    ]),
  ]),
  env('test', [
    splitVendor(),
    addPlugins([
      new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
      new ExtractTextPlugin('styles.css'),
    ]),
  ]),
  env('production', [
    splitVendor(),
    addPlugins([
      new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }),
      new ExtractTextPlugin('styles.css'),
    ]),
  ]),
])

module.exports = config

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ],
    "react",
    "stage-1"
  ],
  "plugins": [
    "emotion/babel",
    "react-hot-loader/babel"
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-es2015-modules-commonjs",
        "transform-async-to-generator"
      ]
    },
    "test": {
      "plugins": [
        "transform-es2015-modules-commonjs"
      ]
    },
    "production": {
      "plugins": [
        "transform-react-remove-prop-types"
      ]
    }
  }
}

What you did: Refreshed my page

What happened:

Uncaught ReferenceError: exports is not defined
    at Object../src/components/App.js (App.emotion.css?589c:26)
    at __webpack_require__ (bootstrap 79b3ad5…:659)
    at fn (bootstrap 79b3ad5…:85)
    at Object../src/index.js (index.js:12)
    at __webpack_require__ (bootstrap 79b3ad5…:659)
    at fn (bootstrap 79b3ad5…:85)
    at Object.0 (selectors.js:4)
    at __webpack_require__ (bootstrap 79b3ad5…:659)
    at ./node_modules/airbnb-prop-types/build/and.js.Object.defineProperty.value (bootstrap 79b3ad5…:708)
    at app.js:712

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 1
  • Comments: 27 (15 by maintainers)

Most upvoted comments

Tried that as well according to docs but it caused unrelated errors https://webpack.js.org/configuration/resolve/#resolve-modules

Removing __dirname works, however

And…It all compiled! 🎉 🎈 No issues in console

This is going to sound weird but could you try assigning what is returned from injectGlobal to a variable.

const something = injectGlobal`

`