1

I have tried with adding webpack.defineplugin in my code and I am not able to get data from process.env object i.e object is empty then next I try with adding node:{process:false} in module.export but my project is not able to render app.js file

When I run the npm script and start the local browser I am not able to figure out why process.env is empty all the time

Then I try with adding node:{process:false} so that we can touch global process.env by using webpack.defineplugin but then i am not able to see my react.dom element or Login page , my react code in not getting executed

webpack.config.js file

module.exports = (env) => {
  // Get the root path (assuming your webpack config is in the root of your project!)
  const currentPath = path.join(__dirname);
  console.log(__dirname);
  // Create the fallback path (the production .env)
  const basePath = currentPath + '/.env';

  // We're concatenating the environment name to our filename to specify the correct env file!
  const envPath = basePath + '.' + env.ENVIRONMENT;

  // Check if the file exists, otherwise fall back to the production .env
  const finalPath = fs.existsSync(envPath) ? envPath : basePath;
  console.log("final path" + finalPath);
  // Set the path parameter in the dotenv config
  const fileEnv = dotenv.config({ path: finalPath }).parsed;


  const envKeys = Object.keys(fileEnv).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(fileEnv[next]);
    return prev;
  }, {});
  console.log("env keys ", envKeys);
  return {
    node: {
      process: true
    },
    entry: [
      // POLYFILL: Set up an ES6-ish environment
      // 'babel-polyfill',  // The entire babel-polyfill
      // Or pick es6 features needed (included into babel-polyfill)
      'core-js/fn/promise',
      'core-js/es6/object',
      'core-js/es6/array',

      './src/index.jsx', // your app's entry point
    ],
    devtool: process.env.WEBPACK_DEVTOOL || 'eval-source-map',

    output: {
      path: path.join(__dirname, 'public'),
      filename: "bundle.js",
      publicPath: '/'
    },
    module: {
      rules: loadersConf
    },
    resolve: {
      extensions: ['.js', '.jsx'],
      modules: [
        path.join(__dirname, "src"),
        path.join(__dirname, "node_modules"), // the old 'fallback' option (needed for npm link-ed packages)
      ],
      alias: {
        "styles": path.resolve(__dirname, 'styles/'),
      }
    },
    devServer: {
      contentBase: "./public",
      // do not print bundle build stats
      noInfo: true,
      // enable HMR
      hot: true,
      // embed the webpack-dev-server runtime into the bundle
      inline: true,
      // serve index.html in place of 404 responses to allow HTML5 history
      historyApiFallback: true,
      port: PORT,
      host: HOST,
    },
    plugins: [
      new webpack.DefinePlugin(envKeys),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.NamedModulesPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new ExtractTextPlugin({
        filename: 'style.css',
        allChunks: true
      }),
      new DashboardPlugin(),
      new HtmlWebpackPlugin({
        template: './src/index.html',
        files: {
          css: ['style.css'],
          js: ["bundle.js"],
        }
      }),
    ]
  }
};

0 Answers0