JSX is not transform by babel loader from node_modules/my_module
ssylvia opened this issue · 10 comments
I'm submitting a feature request
Webpack Version:
2.2.1
Babel Core Version:
6.22.1
Babel Loader Version:
6.2.10
Please tell us about your environment:
OSX 10.12.3
Current behavior:
I'm using a separate github repo to store all react components that get used in multiple apps we create. When I try to import a JSX file with Webpack, I get the following You may need an appropriate loader to handle this file type.
whenever the file contains JSX. Other es6 content seems to compile correctly. And JSX content in my normal app/src folder compile correctly
Expected/desired behavior:
Compile are JSX content from all "include" folders
- If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem along with a gist/jsbin of your webpack configuration.
Project Directory
|
|--node_modules
| |--shared-components
| | |--src
| | | |--test.jsx
|--src
| |--app.jsx
.babelrc
.webpack.config.js
package.json
webpack.config.js
module: {
rules: [
{
include: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, './node_modules/shared-components/src'),
],
test: /\.(js|jsx)$/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
],
},
.babelrc
{
"plugins": ["dynamic-import-webpack"],
"presets": [
"latest",
"react",
"stage-3"
],
"env": {
"test": {
"plugins": ["istanbul"]
}
}
}
src/app.jsx
compiles correctly. However when src/app.jsx
imports node_modules/shared-components/src/test.jsx
, webpack throws
Module parse failed: /.../shared-components/src/test.jsx Unexpected token (5:4)
You may need an appropriate loader to handle this file type.```
Not sure about #149, but the last version does not compile jsx
at all, had to decrease it.
@ssylvia Is the folder inside node_modules a symlink?
@AlexanderTserkovniy This has been fixed in 6.3.2
@danez Yes, that one node_modules/shared-components/src/test.jsx
file was referenced with npm link
so it should be a symlink. Seems to work when not using npm link
Same issue here with npm link
and these versions:
- babel-loader: 6.3.2
- babel-core: 6.23.1
- webpack: 2.2.1
And this loaders config:
{
test: /\.(js|jsx)$/,
include: [].concat(
this.includedPackages,
[this.srcPathAbsolute, path.resolve(__dirname, './node_modules/shared-components/src')]
),
use: ['react-hot-loader', 'babel-loader']
}
It only seems to happen with JSX though.
Solved the issue by replacing
path.resolve(__dirname, './node_modules/shared-components/src')
with
fs.realpathSync(path.resolve(npmBase, './shared-components/src'))
@danez thanks, that's right, my issue is solved in ^6.3.2
.
I'm having the same problem, except that the symlink was created with the command:
$ npm install --save ../my_shared_code
Any plans to solve that in the near future?
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.
Symlinks behave poorly in Babel 6 because .babelrc
files in the parent project will not apply to the symlinked files. In Babel 6 you'd have to include the config in your Webpack config.
In Babel 7, you should consider using a project-wide config if symlinks and node_module compilation is important. http://babeljs.io/docs/en/config-files#project-wide-configuration