Cannot import ES6 module inside React component

Question

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 configvariable, all I get is an undefined error.

My full `webpack.config.js`

var webpack = require('webpack');

module.exports = {
  entry: [
    './app/app.jsx'
  ],
  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 ?

slopeofhope · Accepted Answer · 2016-09-02 12:27:16Z

1

Try

 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.

answered Sep 2, 2016 at 12:27

slopeofhope

7762 gold badges6 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Clafouti Over a year ago

Ok this seems to do trick, so thank you ! Here's where I am at the moment (I'll edit the question to reflect the actual status of my problem). I went back to module.exports = config: in my config.js When I use @slopeofhope suggestion, I can effectively log the config variable. But why ? I'm clueless...

Clafouti Over a year ago

I accepted your answer as correct because it worked. Could you tell me (or redirect me somewhere) why this works and not my initial import ? (import config from 'configFile';). I only have one object inside my config.js, so I thought it was sufficient to "declare" it without "*".

slopeofhope Over a year ago

clearly your reasoning is correct. I would like to think of this as more of compatibility issue. like you are importing using es6 syntax now also try to export using es6 syntax. let me know if it does not work out.

Clafouti Over a year ago

I tried multiple combination of import/export and... now it even works with the exact same configuration I posted on my question (so, module.exports = config; and `import config from 'configFile';). I'm lost to be honest, I'm almost certain I didn't change anything else (nothing in the webpack.config) so I don't know... I'm still glad I could use your answer to gain knowledge on the subject so thank you.

slopeofhope Over a year ago

so a lot of times any interpreter will try to build a cached file after you run the first time to make it run faster so in this case, it's prolly using a cached file. now if you delete the cached file..you will again get the exception.

Everettss · Accepted Answer · 2016-09-02 11:57:46Z

0

Your path 'app/config.js' will the most probably point to node_modules/app/config.js.

The simplest solution will be changing your path in alias to absolute (or more proper in your scenario):

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

answered Sep 2, 2016 at 11:57

Everettss

16.2k9 gold badges78 silver badges106 bronze badges

4 Comments

Clafouti Over a year ago

That doesn't seem to do the trick. It seems the name resolution works fine with 'app/config.js' because I don't have any error using webpack (if I use'/app/config.js'I got Module not found: Error: Cannot resolve 'file' or 'directory' ...

Mani Shooshtari Over a year ago

have you tried exporting in es6 syntax ? export default config

Clafouti Over a year ago

Here is the webpack.config : jsfiddle.net/yc1se7nL Note: I removed all my components aliases for clarity.

Clafouti Over a year ago

@MehdiJorJor : I tried with export default config instead of module.exports = config; Same issue.

madox2 · Accepted Answer · 2016-09-02 12:17:02Z

0

You should define relative path to root:

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

or relative to contentBase

answered Sep 2, 2016 at 12:17

madox2

52.3k21 gold badges106 silver badges101 bronze badges

2 Comments

Clafouti Over a year ago

When I do that, I have an error using webpack (Module not found: Error: Cannot resolve 'file' or 'directory' ./app/config.js). What I can do however is specify the path like this '../config.js',but I still got the issue.

madox2 Over a year ago

@Clafou I would try it without root and extensions properties.

Collectives™ on Stack Overflow

Cannot import ES6 module inside React component

My full `webpack.config.js`

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My full webpack.config.js

3 Answers 3

5 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

My full `webpack.config.js`