Babel plugins errors from node_modules

digitaltopo commented 6 years ago

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

{
    "name": "parcel-react-simple",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
        "start": "parcel src/index.html"
    },
    "dependencies": {
        "material-ui": "^0.20.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0"
    },
    "devDependencies": {
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.24.1"
    }
}

.babelrc:

{
    "presets": ["env", "react"]
}

also tried with:

{
    "presets": [
        [
            "env",
            {
                "targets": {
                    "browsers": ["last 2 versions"]
                }
            }
        ],
        "react"
    ]
}

Command:

yarn start (parcel src/index.html)

🤔 Expected Behavior

Should be able to load the appropriate dependecies

I've setup a simple react app to demonstrate this issue. I am trying to use a button component from the material-ui repository.

import React from "react";
import { render } from "react-dom";
import Button from "material-ui/Button";

function App() {
return (<Button>Hello World</Button>);
}

render(<App />, document.querySelector("#root"));

😯 Current Behavior

Parcel gives the following error in terminal when run:

🚨 /path/to/project/node_modules/jss-global/lib/index.js: Unknown plugin "transform-es3-member-expression-literals" specified in "/path/to/project/node_modules/jss-global/.babelrc" at 0, attempted to resolve relative to "/path/to/project/node_modules/jss-global"

Full error output:

yarn start
yarn run v1.3.2
$ parcel src/index.html

🚨 /path/to/project/node_modules/jss-global/lib/index.js: Unknown plugin "transform-es3-member-expression-literals" specified in "/path/to/project/node_modules/jss-global/.babelrc" at 0, attempted to resolve relative to "/path/to/project/node_modules/jss-global" at /home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17 at Array.map (native) at Function.normalisePlugins (/home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20) at OptionManager.mergeOptions (/home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36) at OptionManager.init (/home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12) at File.initOptions (/home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:212:65) at new File (/home/user/.config/yarn/global/node_modules/babel-core/lib/transformation/file/index.js:135:24) at /home/user/.config/yarn/global/node_modules/parcel-bundler/lib/assets/JSAsset.js:61:22 at Generator.next () at step (/home/user/.config/yarn/global/node_modules/parcel-bundler/lib/assets/JSAsset.js:3:191)


I have experienced this with both NPM and Yarn, and with various Node versions.

### 💁 Possible Solution

Don't transpile node_modules with babel?

### 🔦 Context

Using a component library inside a simple react app built with parcel. 

### 💻 Code Sample

Repository with a sample react project demonstrating issue: [parceljs-react](https://github.com/digitaltopo/parceljs-react)

### 🌍 Your Environment

| Software         | Version(s) |
| ---------------- | ---------- |
| Parcel           | 1.4.1
| Node             | 9.3.0
| npm/Yarn         | Yarn 1.3.2, Npm 5.5.1
| Operating System | Ubuntu 16.04

et commented 6 years ago

I'm having the same issue. I was looking at what is a JSAsset according to the babel transform:

JSAsset {
  id: 1,
  name: '/Users/et/code/crypto/tpt/seedom-web3/node_modules/redux-devtools-themes/src/index.js',
  basename: 'index.js',
  package:
   { name: 'redux-devtools-themes',
     version: '1.0.0',
     description: 'Color themes for Redux DevTools monitors',
     main: 'src/index.js',
     'jsnext:main': 'src/index.js',
     scripts:
      { clean: 'rimraf lib',
        build: 'babel src --out-dir lib',
        lint: 'eslint src',
        prepublish: 'npm run lint && npm run clean && npm run build' },
     repository:
      { type: 'git',
        url: 'https://github.com/gaearon/redux-devtools-themes.git' },
     keywords: [ 'base16', 'color schemes' ],
     author: 'Dan Abramov <dan.abramov@me.com> (http://github.com/gaearon)',
     license: 'MIT',
     bugs: { url: 'https://github.com/gaearon/redux-devtools-themes/issues' },
     homepage: 'https://github.com/gaearon/redux-devtools-themes',
     devDependencies:
      { babel: '^5.5.8',
        'babel-core': '^5.6.18',
        'babel-eslint': '^3.1.15',
        eslint: '^0.23',
        'eslint-config-airbnb': '0.0.6',
        'eslint-plugin-react': '^2.3.0',
        rimraf: '^2.4.3' },
     dependencies: { base16: '^1.0.0' },
     pkgfile: '/Users/et/code/crypto/tpt/seedom-web3/node_modules/redux-devtools-themes/package.json' },
  options:
   { outDir: '/Users/et/code/crypto/tpt/seedom-web3/dist',
     publicURL: '/dist',
     watch: true,
     cache: true,
     cacheDir: '/Users/et/code/crypto/tpt/seedom-web3/.cache',
     killWorkers: true,
     minify: false,
     hmr: true,
     logLevel: 3,
     mainFile: '/Users/et/code/crypto/tpt/seedom-web3/app/index.html',
     extensions:
      { '.js': './assets/JSAsset',
        '.jsx': './assets/JSAsset',
        '.es6': './assets/JSAsset',
        '.jsm': './assets/JSAsset',
        '.mjs': './assets/JSAsset',
        '.ml': './assets/ReasonAsset',
        '.re': './assets/ReasonAsset',
        '.ts': './assets/TypeScriptAsset',
        '.tsx': './assets/TypeScriptAsset',
        '.coffee': './assets/CoffeeScriptAsset',
        '.json': './assets/JSONAsset',
        '.yaml': './assets/YAMLAsset',
        '.yml': './assets/YAMLAsset',
        '.gql': './assets/GraphqlAsset',
        '.graphql': './assets/GraphqlAsset',
        '.css': './assets/CSSAsset',
        '.pcss': './assets/CSSAsset',
        '.styl': './assets/StylusAsset',
        '.less': './assets/LESSAsset',
        '.sass': './assets/SASSAsset',
        '.scss': './assets/SASSAsset',
        '.html': './assets/HTMLAsset' },
     hmrPort: 60461,
     parser: Parser { extensions: [Object] } },
  encoding: 'utf8',
  type: 'js',
  processed: false,
  contents: 'export * from \'base16\';\nexport { default as nicinabox } from \'./nicinabox\';\n',
  ast: null,
  generated: null,
  hash: null,
  parentDeps: Set {},
  dependencies: Map {},
  depAssets: Map {},
  parentBundle: null,
  bundles: Set {},
  globals: Map {},
  isAstDirty: false,
  isES6Module: false
}

Is there something we can query off of to detect that this is a dependency and you probably don't need to compile it?

pbrengard commented 6 years ago

I fixed that by adding missing dependencies


 "dependencies": {
    "async": "^2.6.0",
    "babel-core": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "express": "^4.16.2",
    "material-ui": "^1.0.0-beta.27",
    "material-ui-icons": "^1.0.0-beta.17",
    "parcel-bundler": "^1.4.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "request": "^2.83.0",
    "typeface-roboto": "0.0.50"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
    "babel-plugin-transform-es3-property-literals": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }

But then, when running the app, I get an error in the console: Error: Cannot find module 'babel-runtime/helpers/typeof'

Is babel-runtime correctly packaged ? Or is it something else ?

et commented 6 years ago

@pbrengard - one shouldn't have to add a babel dependency for a dev dependency.

devongovett commented 6 years ago

duplicate of https://github.com/parcel-bundler/parcel/issues/13

parcel-bundler / parcel