Question

我正在本地开发一个带有webpack的React应用，在开发服务器模式下运行它没有任何问题。我还成功地在本地构建了该应用程序，并在没有问题的本地服务器上运行了该应用程序。所有内部功能都运行良好。

但是，在部署到heroku上时，该构建似乎无法找到firebase配置。这是通过dotenv文件完成的，以区分测试和开发变量。我似乎找不到原因，因为我试图在开发服务器模式和本地版本中打印出这些变量，并且它们都打印出了正确的值。

package.json

    {
  "name": "direct-compete",
  "version": "1.0.0",
  "main": "index.js",
  "engines": {
    "node": "9.4.0"
  },
  "author": "Malik badaruddin",
  "license": "MIT",
  "scripts": {
    "build:dev": "webpack",
    "build:prod": "webpack -p --env production",
    "dev-server": "webpack-dev-server",
    "dev": "parcel watch public/index.html ",
    "parcel:build": "parcel build public/index.html --out-dir dist",
    "test": "cross-env NODE_ENV=test jest --config=jest.config.json",
    "start": "node server/server.js"
  },
  "dependencies": {
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-cli": "6.24.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-polyfill": "^6.26.0",
    "css-loader": "0.28.4",
    "express": "^4.16.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "firebase": "4.2.0",
    "formik": "^1.3.1",
    "history": "^4.7.2",
    "mini-css-extract-plugin": "^0.4.4",
    "moment": "^2.22.2",
    "node-sass": "^4.9.4",
    "normalize.css": "^8.0.0",
    "numeral": "^2.0.6",
    "punycode": "^2.1.1",
    "raf": "3.3.2",
    "react": "^16.5.2",
    "react-addons-shallow-compare": "^15.6.2",
    "react-dates": "^18.1.1",
    "react-dom": "^16.5.2",
    "react-modal": "2.2.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "4.2.2",
    "react-with-direction": "^1.3.0",
    "redux": "3.7.2",
    "redux-mock-store": "^1.5.3",
    "redux-thunk": "^2.3.0",
    "regenerator-runtime": "^0.12.1",
    "sass-loader": "^7.1.0",
    "style-loader": "0.18.2",
    "uuid": "^3.3.2",
    "validator": "8.0.0",
    "webpack": "^4.22.0",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "dotenv": "^6.1.0",
    "enzyme": "3.0.0",
    "enzyme-adapter-react-16": "1.0.0",
    "enzyme-to-json": "3.0.1",
    "jest": "^23.6.0",
    "parcel-bundler": "^1.10.3",
    "react-test-renderer": "16.0.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-merge": "^4.1.4"
  }
}

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

if (process.env.NODE_ENV === 'test '){
    require('dotenv').config({path:'.env.test'});
} else if (process.env.NODE_ENV === 'development'){
    require('dotenv').config({path:'.env.development'});
}
module.exports = (env) => {
    const isProduction = env === 'production';
    const CSSExtract = new MiniCssExtractPlugin({
        filename: "styles.css"
    });


    return {
        entry: ['@babel/polyfill','./src/app.js'],
        output: {
            path: path.join(__dirname, 'public','dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }, {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]

            }]
        },
        plugins: [
            CSSExtract,
            new webpack.DefinePlugin({
                'process.env.FIREBASE_API_KEY' : JSON.stringify(process.env.FIREBASE_API_KEY),
                'process.env.FIREBASE_AUTH_DOMAIN' : JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
                'process.env.FIREBASE_DATABASE_URL' : JSON.stringify(process.env.FIREBASE_DATABASE_URL),
                'process.env.FIREBASE_PROJECT_ID' : JSON.stringify(process.env.FIREBASE_PROJECT_ID),
                'process.env.FIREBASE_PROJECT_BUCKET' : JSON.stringify(process.env.FIREBASE_PROJECT_BUCKET),
                'process.env.FIREBASE_MESSAGING_SENDER_ID' :JSON.stringify(process.env.FIREBASE_MESSAGING_SENDER_ID)
            })
        ],
        devtool: isProduction ? 'source-map' :'inline-source-map',
        devServer: {
            contentBase: path.join(__dirname, 'public'),
            historyApiFallback: true,
            publicPath :'/dist/'
        }
    }
}

Answer 1

如果您需要在Heroku中设置变量，请查看using-the-heroku-dashboard上的官方文档。

转到项目的设置
点击显示配置变量

添加您的配置变量键和值，然后单击添加

React应用程序在Heroku上构建失败，但可在本地运行

1 个答案: