browserify / watchify

watch mode for browserify builds
Other
1.79k stars 203 forks source link

browserify fails while reading node_modules folder #385

Closed EspinolaAbel closed 2 years ago

EspinolaAbel commented 2 years ago

If I run this command in CLI everything works ok:

npx browserify src/index.js -o public/js/bundle.js -t [
    babelify --global --presets [ @babel/preset-env ] --plugins [ @babel/plugin-proposal-class-properties ] \
]

My bundle is created correctly. The --global flag of babelify is the key here. It converts all es6 files in node_modules before adding them to the bundle.js.

When I run watchlify npx watchify src/index.js -o public/js/bundle.js fails with the following error

/home/me/AFolder/node_modules/@amcharts/amcharts5/index.js:1
export { Root } from "./.internal/core/Root";
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

My package.json:

{
  "name": "amcharts_demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "browserify": {
    "debug": true,
    "transform": [
      [
        "babelify",
        {
          "global": true,
          "presets": [
            "@babel/preset-env"
          ],
          "plugins": [
            "@babel/plugin-proposal-class-properties"
          ]
        }
      ]
    ]
  },
  "scripts": {
    "start": "watchify src/index.js -o public/js/bundle.js -dv & serve public",
    "build": "browserify --debug src/index.js -o public/js/bundle.js -g [ babelify --presets [ @babel/preset-env ] --plugins [ @babel/plugin-proposal-class-properties ] ]"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@amcharts/amcharts5": "^5.0.7",
    "@amcharts/amcharts5-fonts": "^5.0.1",
    "@amcharts/amcharts5-geodata": "^5.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/core": "^7.16.0",
    "@babel/plugin-proposal-class-properties": "^7.16.0",
    "@babel/preset-env": "^7.16.4",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^17.0.0",
    "es2015": "*",
    "serve": "^13.0.2",
    "watchify": "^4.0.0"
  }
}

The important thing in the package.json is the "browserify" object. Note that I declared the "global": true flag, although I know it has no effect. If I see the node_modules/babelify/index.js file I noticed that the "global" property is being removed.

How can I tell watchify to pass the global property to browserify/babelify? Thanks