title: Webpack - Folder Access Outside Application Folder
body: <p>I have code base, the folder structure for which looks like this :</p>
  
  <pre><code>|- build\
  |- node_modules\
  |- apps\
  |--- app_no_1\
  |----- index.js
  |- src\
  |--- modules\
  |----- form-login\
  |------- Form.jsx
  |- package.json
  |- webpack.config.js
  ....
  </code></pre>
  
  <p>The <code>app_no_1\</code> folder holds the index file for its React app. However, the modules are sat within the <code>src\</code> folder. When I import the component from the <code>src</code> directory into the app, I get the error:</p>
  
  <pre><code>bundle.js:41448 Uncaught Error: Module parse failed: Unexpected token (15:18)
  You may need an appropriate loader to handle this file type.
  | // );
  </code></pre>
  
  <p>Is there some webpack configuration option I am missing which is required for access to files outside the app's folder? My <code>webpack.config.js</code> is this:</p>
  
  <pre><code>const path = require('path');
  const merge = require('merge');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  const PATHS = {
    app: path.join(__dirname, 'apps'),
    appAthenaTrader: path.join(__dirname, 'apps/athenaTrader'),
    appAthenaFinancier: path.join(__dirname, 'apps/athenaFinancier'),
    build: path.join(__dirname, 'build'),
    modules: path.join(__dirname, 'src/modules')
  };
  
  const common = {
    output: {
      path: PATHS.build,
      publicPath: '/',
      filename: 'bundle.js'
    },
    resolve: {
      alias: {
        modules: PATHS.modules
      },
      extensions: ['.js', '.jsx', '.json'],
      modules: [PATHS.modules, 'node_modules']
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          include: PATHS.app,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true
              }
            }
          ]
        },
        {
          test: /\.scss$/,
          include: PATHS.app,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader'
            },
            {
              loader: 'sass-loader'
            }
          ]
        },
        {
          test: /\.(jpg|png)$/,
          include: PATHS.app,
          use: {
            loader: 'file-loader?name=[name].[ext]'
          }
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title: 'Satoshi Ltd - Athena'
      })
    ]
  };
  
  const generateEntry = env =&gt; {
    const entryVariable = {
      entry: {
        app: ''
      }
    };
    if (env.app === 'athena-trader') {
      entryVariable.entry.app = PATHS.appAthenaTrader;
    } else if (env.app === 'athena-financier') {
      entryVariable.entry.app = PATHS.appAthenaFinancier;
      // } else ...
    }
    return entryVariable;
  };
  
  const devServer = {
    devServer: {
      stats: 'errors-only',
      host: process.env.HOST || 'localhost',
      port: process.env.PORT || 3000
    },
    devtool: 'inline-source-map'
  };
  
  const generateConfig = env =&gt; {
    const entry = generateEntry(env);
    if (env.profile === 'development') {
      return merge(common, entry, devServer);
    }
    return merge(common, entry);
  };
  
  module.exports = generateConfig(process.env);
  </code></pre>
  
  <p>I should note that when the folder is brought inside the <code>app_no_1</code>, the app functions fine, i.e. it is able to execute the component &amp; display it. However, the above folder structure is not being accepted for the apps.</p>