Clafou Clafou - 1 year ago 100
React JSX Question

Cannot import ES6 module inside React component

I have a config file named config.js that looks like this :

var config = {};
config.web = {};
config.web.param = 'oneParam';

module.exports = config;

I also use Webpack to give alias to my modules so I have this line in my webpack.config.js :

alias: {
configFile: 'app/config.js'

I then try to import my config file with this :

import config from 'configFile';

Inside a React Component.
However, when I try to access
variable, all I get is an undefined error.

My full

var webpack = require('webpack');

module.exports = {
entry: [
output: {
path: __dirname,
filename: './dist/bundle.js'
externals: {
'Config': JSON.stringify()
resolve: {
root: __dirname,
alias: {
configFile: 'app/config.js'
extensions: ['', '.js', '.jsx']
module: {
loaders: [
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/
{test: /\.scss?$/, exclude: /node_modules/, loader: "style-loader!css-loader!sass-loader!"},
{test: /\.css?$/, loader: "style-loader!css-loader!"},
{test: /\.(png|jpg)$/, loader: "file-loader?name=./dist/images/[name].[ext]"}
devtool: 'cheap-module-source-map'

What am I doing wrong here ?

Answer Source


 import * as config from 'configFile';

And try console.log the config variable and see if you get not defined. If it is still not defined, the problem lies in exporting the configFile.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download