Unable to use .babelrc when symlinking to a directory above

[EvHaus]

My project's folder structure is like this:

parent-js/
    root.js
inner/
    js/
        inner.js
    symlinked-js/
        root.js
    node_modules/
        babel-core/
        ...
    .babelrc
    index.html

Where symlinked-js is a symlink to the parent-js directory up a level.

This directory structure is not compatible with babel-loader with babel 6 but was compatible with babel 5. With this structure, when babel 6 tries to load ./../js/root.js I get the following failure:

WARNING in ../parent-js/root.js
Module parse failed: /path/to/my/app/inner/node_modules/babel-loader/index.js!/path/to/my/app/inner/js/inner.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import Something from 'something';

So basically, the webpack loader for that file is missing.

I can get around this if I stop using .babelrc and set a query with all my configurations right on the loader config in Webpack. And additionally, I need to install all the same modules again in the root folder. So I end up with this:

parent-js/
    root.js
inner/
    js/
        inner.js
    symlinked-js/
        root.js
    node_modules/
        babel-core/
        ...
    .babelrc
    index.html
node_modules/
    babel-core/
    ...

Note the double node_modules it requires me to have in the root.

Is this change done by design in Babel 6? It makes our life more complicated.

[skipjack]

Having the same issue when using symlinks while other loaders (e.g. style, css, sass) all work fine. Similar to #166 as well.

[rybon]

For what it's worth, I managed to solve the issue of loading a parent directory by splitting my Webpack config for files in the current directory and files in the parent directory:

    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel', // this makes use of a .babelrc file in the current directory
                include: path.resolve(__dirname, 'src') // only compile project files, no need to compile node_modules
            },
            {
                test: /\.(es)$/, // using a different file extension, we can register a different loader
                loader: require.resolve('babel-loader'), // load babel in a way that resolves in the parent directory
                include: path.resolve(__dirname, '../my_parent_directory_modules'), // the parent directory we want to load
                babelrc: false, // disable the default .babelrc file in the current directory, although it works as well without this flag
                query: { // load the same presets as in the .babelrc file, but in a way that resolves in the parent directory
                    presets: [require.resolve('babel-preset-es2015'), require.resolve('babel-preset-react')]
                }
            }
        ]
    },
    resolve: {
        root: [
            path.resolve(__dirname, 'src'), // so we can avoid ../../../ syntax
            path.resolve(__dirname, 'node_modules'),
            path.resolve(__dirname, '../my_parent_directory_modules') // so we can import { someModule } from 'my_parent_directory_modules';
        ],
        extensions: ['', '.js', '.es', '.jsx']
    }

Tested with the following dependencies:

"devDependencies": {
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^1.12.9",
    "webpack-dev-middleware": "^1.4.0"
}

Relevant: http://discuss.babeljs.io/t/solved-how-do-we-make-babel-ignore-babelrc-when-used-in-webpack/147

Make sure you have npm installed the required Babel presets.

[seantimm]

This hack worked for me:

const babelSettings = {
  extends: path.join(__dirname, '/.babelrc')
}

...

loader: 'babel?' + JSON.stringify(babelSettings)

[kornfleks]

I use a custom .babelrc file like that:
loader: 'babel-loader?babelrc=false&extends=' + require('path').join(__dirname, '/.babelrc_web')

With babelrc=false you ask to do not use .babelrc
then with extends you ask to use your second .babelrc

[imerkle]

@rybon 's solution worked for me
also since node_modules wasnt in parent directory i added 'npmmod': path.resolve(__dirname,'node_modules'), to resolve.alias

and imported modules like

import React from 'npmmod/react'

[loganfsmyth]

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.