Missing loaders in custom npm package

Question

I have the following problem:

I'm building a private npm package, which I'm loading from a local git server, to be used among a couple of react applications, but when it's loaded in the application it gives the following error:

Error: Module parse failed: Unexpected token (22:6)
You may need an appropriate loader to handle this file type.
   render() {
     return (
       <div className='row'>
         <div className='col-md-1'>
           {this.renderSwitch()}

The package has a demo version, which you can start by going to the package and yarn start , which fires a webpack-dev-server and everything is working as it should, no errors are displayed, but when you load the package inside some application, the described error appears. So what I'm missing here, because when I load some package from npmjs, everything is working as it should ?

It seems like the package is not reading the loaders from the application

webpack-dev.config.js

'use strict';

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    stats: {
        maxModules: 0
    },
    mode: 'development',
    entry: {
        demo: './demo/main.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, '../dist/demo')
    },
    devServer: {
        historyApiFallback: true,
        stats: {
            maxModules: 0
        }
    },
    plugins: [
        new HtmlPlugin({
            title: 'asml react search (DEMO)',
            template: './demo/index.html'
        })
    ]
};

package.json :

{
  "name": "asml_search",
  "version": "1.0.0",
  "description": "",
  "main": "src/javascript/main.js",
  "scripts": {
    "start": "webpack-dev-server --env dev",
    "dist": "del dist; webpack --env prod",
    "test": "karma start karma.conf.js"
  },
  "keywords": [],
  "author": "Author <author@example.com>",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "bootstrap": "^4.1.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-merge": "^4.1.3"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.4.1",
    "react-querybuilder": "^1.4.3",
    "react-select": "^1.2.1"
  }
}

.babelrc

{
    "presets": [
        "env",
        "react",
        "stage-1"
    ],
    "env": {
        "test": {
            "plugins": [
                [
                    "__coverage__",
                    {
                        "ignore": "*.test.*"
                    }
                ]
            ]
        }
    }
}

src/javascript/main.js

import AsmlSearch from './AsmlSearch';
export default AsmlSearch;

AsmlSearch.jsx

import React from 'react';
import { Button, Glyphicon } from 'react-bootstrap';

export default class AsmlSearch extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
        simple_search: true
    };
  }

  handleSwitch() {
    this.setState({
      simple_search: !this.state.simple_search
    });
  }

  render() {
    return (
      <div className='row'>
        <div className='col-md-1'>
          {this.renderSwitch()}
        </div>
      </div>
    );
  }

  renderSwitch() {
    return (
      <Button bsStyle='primary' bsSize="small" onClick={this.handleSwitch.bind(this)}>
        {this.state.simple_search ? '+' : '-'}
      </Button>
    );
  }
}

The application that I'm using is create-react-app project and those are it's settings:

The package in this case is sym linked, but the error is still there if I load it inside the package.json through git

package.json of the application

{
  "name": "search-npm",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

.babelrc from the application

{
    "presets": [
        "env",
        "react",
        "stage-1"
    ],
    "env": {
        "test": {
            "plugins": [
                [
                    "__coverage__",
                    {
                        "ignore": "*.test.*"
                    }
                ]
            ]
        }
    }
}

The webpack config for the application is the defaul of create-react-app

Answer 1

I had this problem recently and resolved it by updating my webpack config to check whether the package in question is symlinked locally

if (fs.lstatSync('./node_modules/package-in-question').isSymbolicLink()) { config.resolve.symlinks = false; }

Use the fs.realpathSync('./node_modules/package-in-question') any place you need to specify the path (aliases, include/excludes, etc). Without seeing your config file it's hard to say precisely what you need.

This issue on babel-loader github goes into it in detail, many have found solutions that are a variation of the above combination.