"Couldn't find preset "@babel/preset-env" relative to directory" when importing my packaged NPM project into my web project

[codecomp]

I've created a ES6 module that I want to stick up onto NPM and use in my web projects. So I set it up with babel to convert it into commonjs and this does seem to work fine. but under some circumstances I'm having problems with it.

I'm exporting the NPM project with the following package.json

{
  ....
  "scripts": {
    "test": "nyc mocha --require @babel/register --require ./test/helpers/dom.js",
    "watch": "npm run build -- --source-maps -watch",
    "build": "node_modules/.bin/rimraf lib && babel src --out-dir lib --presets=@babel/preset-env",
    "lint": "node_modules/.bin/eslint . --ext .js --ignore-pattern \"/lib/*\"",
    "prepare": "npm run build",
    "prepublishOnly": "npm test && npm run lint",
    "preversion": "npm run lint"
  },
  ....
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.12.10",
    "babel-eslint": "^10.1.0",
    "chai": "^4.2.0",
    "eslint": "^7.17.0",
    "eslint-plugin-mocha": "^8.0.0",
    "jsdom": "^16.4.0",
    "mocha": "^8.2.1",
    "nyc": "^15.1.0",
    "rimraf": "^3.0.2",
    "sinon": "^9.2.3"
  },
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": "commonjs"
        }
      ]
    ]
  },
  "dependencies": {
    "lodash": "^4.17.20"
  }
}

This appears to work correctly as when I import into my web project it does run fine. However one of the older projects running on babel v6 required babelify to be set to global true, and this is now throwing up the error. can't work out why it would happen as I'm loading in a NPM package that has been compiled to commonjs so why it's flagging that the project is missing preset-env is a mystery to me.

I tried setting babelify to ignore everything but the offending package but that doesn't seem to have any effect, it still acts like I want to global true everything in node_modules.

.transform(babelify, {
   global: true,
    ignore: /\/node_modules\/(?!@pageclip\/valid-form\/)/
})

At this point I'm so confused after going through about 80 tabs on Chrome as to if this is an issue with my NPM package or an issue with my website project. so if anyone can even point me in the right direction I'd be thankful.

[JLHwung]

@babel/preset-env supports Babel 7+ so it will throw for Babel 6. If you have old projects running on Babel 6, please upgrade to Babel 7: https://babel.dev/docs/en/v7-migration

[codecomp]

I know, but I don't get why it's even trying to run anything with babel7. The code is both compiled into commonjs and should be ignored by babelify's global. The packages entry point is set to "main": "lib/index.js", so even if it was going through the global it should be loading in the CJS version no?

This isn't a issue I've ever had with any other package on NPM and some of those will have had to have gone through babel 7 so why only the basic test one I've made flags an issue is making no sense.

I'm also not able to update the project to babel 7 as this was attempted in the past and after 5 days of trying it just wasn't worth it when the framework may as well just be migrated off gulp. I just don't get why I should need to update bael on my website to consume a package that's already been converted. I have been that solution posted in other locations and it just makes no sense.

[JLHwung]

You can try remove package.json#babel from the compiled package, babelify may pick up Babel 7 configs in package.json.

[nicolo-ribaudo]

You can use babel.config.json instead, which isn't read by Babel 6.

[codecomp]

It seems to not cause the error if i use .babelrc and make sure that the package does not include .babelrc by specifying the files. but I'm still confused as to WHY. Why is it trying to run babel again?