Как использовать переменные среды, которые были определены в Webpack?

Question

В настоящее время я пытаюсь добавить Google oauth в создаваемое мной приложение React. Однако я сталкиваюсь с проблемой. Я определил некоторые переменные в своем веб-пакете, но когда я добавляю их в свой код реакции, они появляются как неопределенные.

Код реагирующего компонента

let googleLoginBaseUrl = 'https://www.google.com/o/oauth2/v2/auth'
    let googleLoginQuery = stringify({
        client_id: __GOOGLE_CLIENT_ID__,
        response_type: 'code',
        redirect_uri: `${__API_URL__}/oauth/google/code`,
        scope: 'openid profile email',
        prompt: __DEBUG__ ? 'consent' : undefined,
    })

    let googleLoginUrl = `${googleLoginBaseUrl}?${googleLoginQuery}`

Код Webpack.config.js

let plugins = [
  new EnvironmentPlugin(['NODE_ENV']),
  new ExtractPlugin('bundle-[hash].css'),
  new HTMLPlugin({template: `${__dirname}/src/index.html`}),
  new DefinePlugin({
    __DEBUG__: JSON.stringify(!production),
    __API_URL__: JSON.stringify(process.env.API_URL),
    __GOOGLE_CLIENT_ID__: JSON.stringify(process.env.GOOGLE_CLIENT_ID),
  }),
]

if (production)
  plugins = plugins.concat([ new CleanPlugin(), new UglifyPlugin() ])

module.exports = {
  plugins,

Ошибка компиляции

Failed to compile.

./src/components/Login/login.js
  Line 10:24:  '__GOOGLE_CLIENT_ID__' is not defined  no-undef
  Line 12:30:  '__API_URL__' is not defined           no-undef
  Line 14:21:  '__DEBUG__' is not defined             no-undef

Search for the keywords to learn more about each error.

Answer 1

Похоже, что нет ошибки компиляции javascript, а только ESLint сообщил об ошибке. Возможно, вы настроили процесс сборки таким образом, что какая-то ошибка eslint останавливает процесс сборки.

Я могу подтвердить, что использование переменных, определенных с помощью DefinePlugin в приложении, ESLint сообщает как ошибка no-undef.

Попробуйте отключить это правило ESLint, поместите /* eslint-disable no-undef */ в первую строку вашего ./src/components/Login/login.js.

Или вы можете добавить свои определенные переменные в раздел globals в вашем файле конфигурации eslint,см. этот ответ: ESLint no-undef и плагин webpack