Creating an NPM Module: Importing your own package as a dependency

Question

Creating an NPM Module: Importing your own package as a dependency

Currently, I am in the process of developing a new NPM package. The repository includes an examples directory containing some JavaScript code that is compiled and served locally (or potentially through github.io).

The configuration is reminiscent of the setup in react-menu. If you examine any of the JavaScript files within the examples directory, you'll notice that they import the package as if it was just installed using npm install react-menu:

import Menu, { SubMenu, Item as MenuItem } from 'rc-menu';

Surprisingly, the package is not listed under dependencies in the package.json file.

I am aware that I can import my own module by specifying something like

import myThing from '../../../index.js'

, but I prefer not having to deal with multiple relative directories. I attempted to import my module using import myThing from 'my-thing', but the package was not found and the import failed.

How exactly is react-menu accomplishing this?

javascript npm

Answer 1

Answer №1

After digging a bit deeper into the webpack documentation, I found the solution.

In summary, the answer lies in adjusting the resolve configuration setup.

This is how my directory structure looks:

.
├── LICENSE.md
├── README.md
├── examples
│   ├── bundle.js
│   ├── index.html
│   ├── server.js
│   └── src
│       ├── components
│       │   ├── App.js
│       │   └── examples
│       │       └── ExampleOne.js
│       └── index.js
├── index.js
├── package-lock.json
├── package.json
├── src
│   └── index.js
├── test
├── webpack.config.js
└── webpack.examples.config.js

The simple addition of the resolve configuration in my webpack.config.examples.js file solved the issue. Here's the complete file for reference:

const webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './examples/src/index.js',
    ],

    output: {
        path: path.resolve(__dirname, 'examples'),
        publicPath: '/',
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.js.map',
    },

    resolve: {
        alias: {
            'my-package': path.resolve(__dirname, 'src'),
        },
    },

    devtool: 'eval-source-map',

    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
}

Now, whenever I'm working within the examples app, I can simply import modules like this:

import myThing from 'my-package'

Answer 2

After digging a bit deeper into the webpack documentation, I found the solution.

In summary, the answer lies in adjusting the resolve configuration setup.

This is how my directory structure looks:

.
├── LICENSE.md
├── README.md
├── examples
│   ├── bundle.js
│   ├── index.html
│   ├── server.js
│   └── src
│       ├── components
│       │   ├── App.js
│       │   └── examples
│       │       └── ExampleOne.js
│       └── index.js
├── index.js
├── package-lock.json
├── package.json
├── src
│   └── index.js
├── test
├── webpack.config.js
└── webpack.examples.config.js

The simple addition of the resolve configuration in my webpack.config.examples.js file solved the issue. Here's the complete file for reference:

const webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: [
        'react-hot-loader/patch',
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './examples/src/index.js',
    ],

    output: {
        path: path.resolve(__dirname, 'examples'),
        publicPath: '/',
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.js.map',
    },

    resolve: {
        alias: {
            'my-package': path.resolve(__dirname, 'src'),
        },
    },

    devtool: 'eval-source-map',

    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    },
}

Now, whenever I'm working within the examples app, I can simply import modules like this:

import myThing from 'my-package'

Creating an NPM Module: Importing your own package as a dependency

Answer №1

Similar questions

Tips for incorporating WinBox JS into Angular applications

Utilizing the scrollTop method to display the number of pixels scrolled on

Is javascript or ajax the best choice for updating a database in asp.net mvc?

Turn off base64 encoding for background URLs in the Minify package

Having trouble setting up gulp installation

Sign in to npm using various scopes

Exploring the nuances of npm configuration: global versus local settings

What is the process for triggering a sorted output from my MongoDB database by simply clicking a button?

How can I use an HTML button to activate a function that inserts text into a read-only text-box?

Transmit information from an HTML input field (not a form) to a Python CGI script through AJAX

pm2 is launching multiple instances of identical next.js applications

Incorporating a JavaScript workflow into Django

`Switching the selection in ng-selected`

Hold off on running the code until the image from the AJAX request is fully loaded and

Validating form field values in JavaScript prior to submission

Retrieve the value of a dropdown menu that contains multiple selections associated with a single model

Encountering an issue with authentication credentials while using NPM dependencies on Google Cloud AppEngine

Incorporate a JSON file into the Webpack output separately from the bundle.js file

TinyMCE generates HTML code with embedded tags

Searching to loop through JSON within a Sequelize / Postgres database query in order to identify a corresponding value