emotion: Uncaught ReferenceError: exports is not defined
emotionversion: 6.0.3reactversion: 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)
Tried that as well according to docs but it caused unrelated errors https://webpack.js.org/configuration/resolve/#resolve-modules
Removing
__dirnameworks, howeverAnd…It all compiled! 🎉 🎈 No issues in console
This is going to sound weird but could you try assigning what is returned from
injectGlobalto a variable.