无法在React组件中使用process.env,但可以将其导入webpack.config.js中

多伊兹

我的React应用不是使用'create-react-app'构建的。

我可以从webpack.config.js进行console.log的过程环境,该环境已经使用dotenv库从.env文件导入和解析。

但是,“ npm run build”失败。当我用URL字符串替换变量时,“ npm run build”通过。

webpack.config.js

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const dotenv = require('dotenv').config({path: 'config/docker/production/.env'});

// call dotenv and it will return an Object with a parsed key 
const env = dotenv.parsed;

// reduce it to a nice object, the same as before
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});

console.log(process.env.API_URL); -> prints out http://localhost:5000/api/something

const config = {
    entry:  __dirname + '/static/js/index.jsx',
    output: {
        path: __dirname + '/static/dist',
        filename: 'bundle.js',
    },
    resolve: {
        extensions: [".js", ".jsx", ".css"]
    },
    module: {
        rules: [
            {
                test: /\.jsx?/,
                exclude: /node_modules/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            path: __dirname + '/static/dist',
            filename: 'styles.css',
        }),
        new webpack.DefinePlugin(envKeys)
    ]
};

module.exports = config;

package.json

  "scripts": {
    "build": "webpack --mode production -p --progress --config webpack.config.js"
  }

config / docker / production / .env

API_URL=http://]ocalhost:5000/api/something

MyComp.jsx

import React,{ Component } from 'react';

class MyComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      races: []};
  }

  componentDidMount(){
    fetch({process.env.API_URL}) -> FAILS
    fetch('http://localhost:5000/api/something') -> PASSES
      .then(results => results.json()) 
      .then(data => this.setState({ races: data.data }));

  }

  render() {
      ...
  }
}

export default MyComp;
Moniruzzaman monir

从Webpack配置文件的第10行中删除“ process.env”

prev[`process.env.${next}`] = JSON.stringify(env[next]);

prev[`${next}`] = JSON.stringify(env[next]);

并直接使用'API_URL'变量而不使用process.env。

您可以在此处阅读DefinePlugin的Webpack文档

另一个问题可能是您如何使用“ process.env.API_URL”。它应该是:

fetch(`${process.env.API_URL}`)

看到刻度线和美元符号。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Python无法在我的脚本中“导入nltk”,但可以在解释器中使用

在webpack.config.babel.js中使用“导入”时出错

Nodemon:无法解析config webpack.config.js

当使用`{modules:false}`时,`webpack.config.babel.js`中的`意外令牌导入`

网站无法在IE8中使用,但可以在Google Chrome中使用

ES6可以在webpack.config.js中本地使用吗?

python无法导入时区,但可以导入datetime

JS setInterval无法立即启动,但可以正常运行

类模板继承无法在GCC中编译,但可以在Visual Studio中使用

我无法在构建中使用 ifstream 读取文件,但可以在 IDE 中读取它

在 webpack.config.js 中使用 Promise 的结果

无法通过Webpack捆绑React组件库,但可以通过Babel正常运行

推送通知无法在iOS7中使用,但可以在iOS6中使用

Jest无法使用js文件中的HOC,但可以与tsx文件中的HOC一起正常使用

Webpack 2无法解析webpack.config.js中的入口点

无法从react js访问httponly cookie,但可以在邮递员应用中访问!这怎么可能?

Google图表无法在IE11中使用,(但可以在chrome中使用)如何解决?

webpack.config.js中的json-loader无法正常工作

无法在router.post中获取主体,但可以使用app.post Node js / express

在Rails 4中导出Excel,无法在Microsoft Excel中打开,但可以在Libre Office中使用

IMG目录不能存储在db中,但可以从查询中使用的相同变量中查看

gcc 4.2.2中的编译错误。但可以在Xcode 6.4中使用

无法在cmd中导入某些包,但可以使用sublime text3导入

在vue组件中检索config和env变量

webpack.config.js在React项目中如何工作?

webpack.config.js无法识别ES6语法

在 webdriver 中找不到 ELEMENT,但可以在 IDE 中使用

在 xaml 中找不到命名空间,但可以在 C# 代码中使用

Highchart不在Heroku中显示,但可以在本地环境中使用