babel-loader doesn't transpile imported js from an outside directory

[felixexter]

Webpack Version: 1.13.2
Babel Core Version: 6.14.0
Babel Loader Version: 6.2.5
Environment: Windows 7

I'm trying to import a script from an outside app directory

// app/scripts/app.js
import test from '../../../test'

// ../test/index.js
import muliply from './multiply'
export default (a, b) => muliply(a, b)

It should be transpiled to es5, but i get an error in browser console:

Uncaught SyntaxError: Unexpected token import

Is it a bug or a feature and I need to config something else?

[ericclemmons]

Can you post up your config for babel-loader? Because this structure should be fine:

app/
test/
webpack.config.js

I've never a script import something outside of an entire project. (That's what node_modules is for)

[felixexter]

This structure

|- project
| |- app/
| |- node_modules/
| |- webpack.config.js
|- test/
  |- node_modules/
  |- index.js

.babelrc

{
    "ignore": [
        "node_modules/**/*"
    ],
    "presets": [
        "es2015",
        "stage-0"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

webpack.config.js

{
// ...
    module: {
        // ...
        loaders: {
            test: /\.js$/,
            loader: 'babel',
            exclude: /node_modules/
        }
        // ...
    }
// ...
}

[ericclemmons]

Hmm, maybe Babel isn't the one processing it. (This directory structure is unorthodox, since files are being referenced outside of process.cwd()).

Does it work if you run webpack --config project/webpack.config.js?

[hiroppy]

Please rewrite below for webpack.config.js.

{
// ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      }
    ]
  }
// ...
}

How is it?

[felixexter]

@abouthiroppy yes, it's same code, i just copied part of code, updated below
@ericclemmons no, it doesn't work, updated structure below, each directory have node_modules, i run webpack --config webpack.config.js in project & get the same error

[hiroppy]

@felixexter Are you writing modules in webpack.config.js ? (I think I look at your updated comment)

[felixexter]

@abouthiroppy fixed below, I write module :)

[hiroppy]

@felixexter Sorry for my late reply. Did you solve this problem?

[felixexter]

@abouthiroppy no

[kevincaradant]

Hi :), I think I get the same problem today. Just to know, for me, If I install the babel-loader (version 5.0.0) instead of 6.2.X, that works. Is it the same for you ? Thank you

OK i fix the problem but i don't know really how ...

This is my package.json libraries:

"babel-core": "6.14.0",
    "babel-loader": "6.2.5",
    "babel-plugin-transform-runtime": "6.15.0",
    "babel-polyfill": "6.13.0",
    "babel-preset-es2015": "6.14.0",
    "babel-runtime": "6.11.6",

And i create a .babelrc file with this lines inside:

{
  "presets": ["es2015"]
}

and i think that's all :)

[loganfsmyth]

@felixexter What folder is your .babelrc in? Your directory structure with tests and source split into two separate modules is rather unusual. A .babelrc applies to all files inside the directory is it in, so unless you've got the presets installed in both tests and app with a .babelrc in both directories, you'll definitely get the error you are seeing.

[eugene1g]

Sometimes it helps to add a .babelrc file into the 'external' folder which points to your main config like so {extends: '../../mainroot/.babelrc'}

[felixexter]

@kevincaradant No, it doesn't work for me.

[felixexter]

@loganfsmyth project folder has .babelrc, test foder has one file index.js only.

[garaboo]

@felixexter Try to place .babelrc into the app folder