babel-loader: babel-loader doesn't transpile imported js from an outside directory
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?
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 58
- Comments: 42 (6 by maintainers)
Ran into a similar issue today. This was my folder structure:
Now,
entry.js
was importing../lib/dep.js
. Here’s the loader configuration (webpack2):The solution that helped me was to remove
.babelrc
file and move the options towebpack.config.js
as such:I suspect there’s a problem with package paths if you don’t resolve the path at build time.
@felixexter I also Ran into a similar issue. When I tried to find the reason, I add the console.log and it work. Maybe you can try it.
@felixexter Try to place
.babelrc
into theapp
folderHi 😃, 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:
And i create a .babelrc file with this lines inside:
and i think that’s all 😃
I had this same issue and tried a few fixes here that didn’t solve it.
My directory structure is: parent project-1 project-2
project-1 imported some modules from project-2 (temporarily!) and was erroring because the ‘babel-plugin-transform-object-rest-spread’ plugin was not working.
My parent/project-1/webpack.config.js used to be:
And parent/project-1/.babelrc
It started working by removing
babelrc:true
from the webpack config and putting the options in the webpack config instead:You also must have the babel plugins installed in both project-1/node_modules and project-2/node_modules.
I had the same issue here, I wanted to keep my
.babelrc
(for editor and clearness) so the config was:webpack.config.js
No config needed in external folder, and my
.babelrc
containsThis just started happening with me using a yarn monorepo.
Previously, the problem was resolved by adding the appropriate (linked) paths to the webpack
include
param for thebabel-loader
. But this no longer works (doesn’t seem to matter if they are linked or hard copied).E.g.,
The same issue going on, I have a utility that needs to import Class File from a package outside the folder ( Its model definition for a database) from a sister project,
I mean, it should just transpile the imported file as if it was same dir import, I can’t see why this does not work out of the box, to be honest.
Same issue here. This is my folder structure: | common/ |— core.js | project1/ |— webpack.conf.js |— index.js |—package.json
…
Webpack resolves filename normally, but for some reason babel-loader is trying to find all the plugins not at the project directory, but from the /common folder. So I get something like that:
But if copy node_modules from the project folder to the common, it’s starts working as is should be.
PS: Babel-loader 7.x.x, this bug is too years old:)
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.
The issue is that
.babelrc
files do not affect files in sibling folders. With Babel 6, you’d need to pass your config viababel-loader
’s options. For Babel 7, you can consider using a project-widebabel.config.js
Having the same problem here. I have two repos – a Vue component, and a demo/test site for said component. I want to have them pulled in sister folders and use the demo site to test live changes I’m making in the Vue components.
I ran into the same issue today! The example repo (https://github.com/mass85/no_transpilation_with_lerna) does a good job capturing the problem.
I did notice (along with @thedamon) that when I move
.babelrc
up into the monorepo root, things get closer, but it creates problems with other projects that end up keying off of that.babelrc
then =/One thing that seemed to have helped was explicitly setting the
options
& removing the.babelrc
entirely:I have the same issue with a monorepo, and my working solution is adapted from @ViBiOh’s above:
.babelrc:
My solution was a little different because one of my plugins has configuration options.
I should also note that this doesn’t use
require.resolve()
and it’s working fine. If I do use it, there’s an error loadingbabel-plugin-ramda
. I’m not sure if the issue lies with babel or the plugin.Is this problem solved ? I´m running the same issue as @felixexter
I resolved my issue and may have a solution for folks (Webpack 2). My webpack config above does in fact work for me (I had a gnarly bug where one of my JS files actually had a different file suffix – really hard to find).
If you’re in doubt install
echo-loader
and add that to the babel-loader config. When running webpack it will output each file that is visited. You should see whether the file is transpiled or not.I have a similar issue when imported module is linked. In order to isolate it I created a simple project: https://github.com/mass85/no_transpilation_with_lerna
Could anyone be so kind and have a look at this and try to fix it?
Remember to include the output file and not the input one.
this:
<script src='app/index.js'></script>
to:
<script src='bundle/bundle.js'></script>
Please rewrite below for
webpack.config.js
.How is it?