I'm trying to pass some environment related variables into my React ponents using Webpack's DefinePlugin. Client side part works great, server side part returns 'MYVARIABLE is not defined'.

I'm using Webpack's Node.JS api. Important parts are below. Am I doing something wrong? Thanks

webpack.config.js

...
webpackConfig.plugins = [
  new webpack.DefinePlugin({
    MYVARIABLE: 'test-value'
  })
]
...

server.js

...
import webpack from 'webpack'
import webpackConfig from '../config/webpack.config'
...
var piler = webpack(webpackConfig)
...

ponent file

...
console.log(MYVARIABLE)
...

result

ReferenceError: MYVARIABLE is not defined
....

I'm trying to pass some environment related variables into my React ponents using Webpack's DefinePlugin. Client side part works great, server side part returns 'MYVARIABLE is not defined'.

I'm using Webpack's Node.JS api. Important parts are below. Am I doing something wrong? Thanks

webpack.config.js

...
webpackConfig.plugins = [
  new webpack.DefinePlugin({
    MYVARIABLE: 'test-value'
  })
]
...

server.js

...
import webpack from 'webpack'
import webpackConfig from '../config/webpack.config'
...
var piler = webpack(webpackConfig)
...

ponent file

...
console.log(MYVARIABLE)
...

result

ReferenceError: MYVARIABLE is not defined
....

• javascript
• express
• reactjs
• webpack

1 Answer 1

You have to JSON.stringify('your-value').

According https://webpack.js/plugins/define-plugin/ :

because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with either alternate quotes, such as '"production"', or by using JSON.stringify('production').

so your webpack.config.js should be...

webpackConfig.plugins = [
 new webpack.DefinePlugin({
  MYVARIABLE: JSON.stringify('test-value')
 })
]