babel/babel-loader

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.```

Seems to be the same issue as #149

Not sure about #149, but the last version does not compile jsx at all, had to decrease it.

danez commented

@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