Uncaught Error: Cannot find module 'rbush'

[julie-ramadanoski]

On a new reactjs project https://github.com/keyanyang/react-leaflet-webpack-boilerplate npm install --save leaflet-linestring-select

I just add this lines in App.js

import { Map, TileLayer } from 'react-leaflet';
import Select from 'leaflet-linestring-select'

or

import { Map, TileLayer } from 'react-leaflet';
var Select = require('leaflet-linestring-select');

Uncaught Error: Cannot find module 'rbush'
    o http://localhost:8080/main.js?c2066d2489971b870df7:1666
    ./node_modules/leaflet-linestring-select/dist/L.Control.LineStringSelect.no-rbush.js/</</<[5]</<

On line : var Rbush = global.Rbush || require('rbush');

What I'm doing wrong ?

[w8r]

Hi Julie, You need to add rbush as a dependency. Which is rather weird, cause it's explicitly a dependency in this repository.

[julie-ramadanoski]

Thank you for your reply. Here is my package.json configuration

"dependencies": {
   "leaflet": "^1.7.1",
   "leaflet-linestring-select": "^1.1.0",
   "rbush": "^3.0.1",
   "react": "^16.7.0",
   "react-dom": "^16.7.0",
   "react-leaflet": "^2.1.4"
 }

Do you think there may be a problem with webpack? Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: ['./src/index'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js'
    },
    devtool: 'none',
    devServer: {
        port: 8080
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader']
            },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=10000' }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css'
        }),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        })
    ]
};

Thank you in advance for your answers

Update

in node_modules/leaflet-linestring-select/package.json

if I replace "main": "dist/L.Control.LineStringSelect.no-rbush.js", by "main": "dist/L.Control.LineStringSelect.js",

This module works fine !