I am in need of a package that is required as both a devDependency and a regular

Question

I am in need of a package that is required as both a devDependency and a regular

Encountered an issue where I needed the same package to be included as both a dependency and a devDependency.

The specific packages in question are @babel/core and @babel/preset-env.

Reason?

Because my package is designed to facilitate transpilation of another part of the project in the future:

Original source code is transpiled using babel (as a dev dependency).
Transpiled code is then published on NPM.
Later, the transpiled source from NPM will be processed through webpack (which relies on babel-loader and therefore requires @babel/core). This step will be performed by end users using webpack.

I aim to include all necessary dev-assets (excluding webpack) within the package so that end users do not need to separately install babel-loader, @babel/core, etc.

Initially, I considered adding them as dependencies, but found this approach somewhat messy.

This could potentially be categorized as an X/Y problem?

The solution that seems to work involves:

Creating a separate package named xxx-dev-dependencies.
Incorporating the dependencies required for webpack transpilation into that subsequent package.
Requiring the package and passing the modules to webpack.

HOWEVER ... I consistently receive a warning when installing the dev dependency package:

[email protected] necessitates a peer version of webpack@>=2 which is currently missing. It is necessary to manually install peer dependencies.

Even though I have added webpack to peerDependencies as illustrated below:

  "name": "xxx-dev-dependencies",
  "dependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "babel-loader": "^8.1.0"
  },
  "peerDependencies": {
    "webpack": "4.x"
  }

javascript npm

Answer 1

Answer №1

After some experimentation, I came up with a workaround that seems to do the trick:

My Solution
- Development Dependencies
  - @babel/core
  - @babel/preset-env
  - my-project-dev-deps
my-project-dev-deps
- Dependencies
  - @babel/core
  - @babel/preset-env
  - babel-loader
  - webpack (added to address peer dependency warning)
- Peer dependencies
  - webpack (included to ensure end user has webpack installed)

The `my-project-dev-deps` module essentially exports the dependencies in this format:

var path = require("path")

module.exports = {
    babel: {
        loader: path.resolve(__dirname, "node_modules", "babel-loader"),
        presets: [
            path.resolve(__dirname, "node_modules", "@babel", "preset-env")
        ]
    }
}

`my-project` then imports `my-project-dev-deps` and uses it as follows:

var dep = require("my-project-dev-deps")
// ..
module: {
    rules: [{
        test: /\.js$/,
        use: {
            loader: dep.babel.loader,
            options: {
                presets: dep.babel.presets
            }
        }
    }]
}

I have personally tested that webpack does indeed utilize the `@babel/core` version packaged within `my-project-dev-deps`.

Answer 2

After some experimentation, I came up with a workaround that seems to do the trick:

My Solution
- Development Dependencies
  - @babel/core
  - @babel/preset-env
  - my-project-dev-deps
my-project-dev-deps
- Dependencies
  - @babel/core
  - @babel/preset-env
  - babel-loader
  - webpack (added to address peer dependency warning)
- Peer dependencies
  - webpack (included to ensure end user has webpack installed)

The `my-project-dev-deps` module essentially exports the dependencies in this format:

var path = require("path")

module.exports = {
    babel: {
        loader: path.resolve(__dirname, "node_modules", "babel-loader"),
        presets: [
            path.resolve(__dirname, "node_modules", "@babel", "preset-env")
        ]
    }
}

`my-project` then imports `my-project-dev-deps` and uses it as follows:

var dep = require("my-project-dev-deps")
// ..
module: {
    rules: [{
        test: /\.js$/,
        use: {
            loader: dep.babel.loader,
            options: {
                presets: dep.babel.presets
            }
        }
    }]
}

I have personally tested that webpack does indeed utilize the `@babel/core` version packaged within `my-project-dev-deps`.

I am in need of a package that is required as both a devDependency and a regular

Answer №1

Similar questions

Combining arrays in JavaScript to form object values with lodash

Looping in REACT with state updates can cause the values to be overwritten

The MVC execution sequence: Controller initialization happening after Ajax call

Ways to showcase JSON data with jQuery

Include the JS file after finishing the control processing

Flow the child process output as it streams

CASL user update has been refreshed

Transferring MongoDB information to a Jade template in an ExpressJS application

Error encountered when referencing iscrollview and iscroll js

What could be causing the error when trying to use a PUT request with fetch in Vue?

Using Node-Forge for importing in an Angular 2 service

The AJAX comments triggered an Uncaught SyntaxError due to an unexpected identifier

Utilize GetXmlHttpObject for an AJAX request to interact with a PHP script

Issue with preventDefault not functioning correctly within a Bootstrap popover when trying to submit a

Issue with Material UI dropdown not selecting value on Enter key press

Ways to divide a string into pairs of two using jQuery

Activate Bootstrap - navigate to a specific tab and scroll to a designated anchor upon link click

Error alert: The $ symbol is not defined

Working with Garber-Irish in Rails: Streamlining Administration and Keeping Code DRY

Discovering the minimum and maximum within an array containing objects