CODEWITHSUNDEEP
javascriptnode.jsajaxreactjswebpack
merilstack
merilstack

Reputation: 878

Load url constants for different environments via webpack

I have webpack.config.js file:

'use strict';

var webpack = require('webpack')

var env = process.env.NODE_ENV

var API_URL_1 = {
    production: JSON.stringify('http://xyz:8000/api/v1/var'),
    development: JSON.stringify('http://192.168.99.102/api/v1/var')
};

var API_URL_2 = {
    production: JSON.stringify('http://xyz:8000/api/v1/ui'),
    development: JSON.stringify('http://192.168.99.102/api/v1/ui"')
};

var API_URL_3 = {
    production: JSON.stringify('http://xyz:8000/api/v1/data'),
    development: JSON.stringify('http://192.168.99.102/api/v1/data')
};

var API_URL_4 = {
    production: JSON.stringify('http://xyz:8000/api/v1/calculated'),
    development: JSON.stringify('http://192.168.99.102/api/v1/calculated')
};

var config = {
  module: {
    loaders: [
      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
      { test: /\.scss$/, loaders: ['style', 'css?sourceMap', 'sass?sourceMap']}
    ]
  },
  output: {
    library: 'Redux',
    libraryTarget: 'umd'
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env),
      'API_URL_1': API_URL_1[env],
      'API_URL_2': API_URL_2[env],
      'API_URL_3': API_URL_3[env],
      'API_URL_4': API_URL_4[env]
    })
  ]
};


module.exports = config

I want to access API_URL_1, API_URL_2, API_URL_3 and API_URL_4 dynamically depending on the environment that I am running into ReactDOM.render function in app.js which looks something like this:

ReactDOM.render(
  <ParameterForm url_schema={ajax(API_URL_1)} url_uischema={ajax(API_URL_2)} url_data={ajax(API_URL_3)} url_submit={ajax(API_URL_4)}/>,
  document.getElementById('form')
);

But when I run my app.js I keep getting this error i.e

Failed to compile.

Error in ./src/containers/App.js

/home/node/src/containers/App.js 120:30 error 'ajax' is not defined no-undef 120:35 error 'API_URL_1' is not defined no-undef 120:61 error 'ajax' is not defined no-undef 120:66 error 'API_URL_2' is not defined no-undef 120:88 error 'ajax' is not defined no-undef 120:93 error 'API_URL_3' is not defined no-undef 120:117 error 'ajax' is not defined no-undef 120:122 error 'API_URL_4' is not defined no-undef

✖ 8 problems (8 errors, 0 warnings)

Since the webpack.config.js is a file that is accessed in my app.js why is this error popping up? Is there a solution to avoid this error?

Upvotes: 1

Views: 198

Answers (1)

Vladislav Ihost
Vladislav Ihost

Reputation: 2187

Since the webpack.config.js is a file that is accessed in my app.js why is this error popping up?

File with React component should not perform direct access to webpack.config.js - it's used on compile time, when all string entities will be substituted with replace invariants as-is, so one additional quotation level is needed.
Also keep in mind, that substitution will not work for dependent node_modules by default, since they are not preprocessed and had been took from dist directories.

About ajax function - check chat you had linked appropriate library, which provides that function. You can provide custom import on runtime via extrernals function-like resolver.

Upvotes: 1

Related Questions