New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

babel@7 does not work with latest env #6461

Closed
a-x- opened this Issue Oct 11, 2017 · 12 comments

Comments

Projects
None yet
7 participants
@a-x-

a-x- commented Oct 11, 2017

bug report

babel@7 does not work when object-rest-spread, destructuring, parameters, shorthand-properties es-features used with latest env (last 1 Chrome version) and "useBuiltIns": false,

Input Code

const fn1 = (a, ...rest) => {};
const { a, ...rest } = foo;
const fn2 = (a=0) => {};

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

.babelrc
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions", "last 1 Safari version"]
      },
      "useBuiltIns": false,
      "modules": false
    }],
    "stage-1",
    "react"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-react-jsx-source",
    "transform-react-jsx-self"
  ]
}

Expected Behavior

Current Behavior

Possible Solution

Context

Your Environment

software version(s)
Babel 6 (latest)
node 8 (latest)
npm 5 (latest)
Operating System macOS
@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Oct 11, 2017

Collaborator

Hey @a-x-! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

Collaborator

babel-bot commented Oct 11, 2017

Hey @a-x-! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

@existentialism

This comment has been minimized.

Show comment
Hide comment
@existentialism

existentialism Oct 11, 2017

Member

@a-x- what error are you getting?

And just to check, do all your versions match?

I just tried it (with success) using:

"babel-cli": "^7.0.0-beta.2",
"babel-preset-env": "^2.0.0-beta.2",
"babel-preset-react": "^7.0.0-beta.2",
"babel-preset-stage-1": "^7.0.0-beta.2"

Sidenote, babel-preset-react@7.x will enable transform-react-jsx-source and transform-react-js-self via the development option.

Member

existentialism commented Oct 11, 2017

@a-x- what error are you getting?

And just to check, do all your versions match?

I just tried it (with success) using:

"babel-cli": "^7.0.0-beta.2",
"babel-preset-env": "^2.0.0-beta.2",
"babel-preset-react": "^7.0.0-beta.2",
"babel-preset-stage-1": "^7.0.0-beta.2"

Sidenote, babel-preset-react@7.x will enable transform-react-jsx-source and transform-react-js-self via the development option.

@a-x-

This comment has been minimized.

Show comment
Hide comment
@a-x-

a-x- Oct 11, 2017

Thank you so much for development option!

I use exactly matched versions.

I have got right now, that babel works good, but webpack+babel don't.

a-x- commented Oct 11, 2017

Thank you so much for development option!

I use exactly matched versions.

I have got right now, that babel works good, but webpack+babel don't.

@a-x-

This comment has been minimized.

Show comment
Hide comment
@a-x-

a-x- Oct 11, 2017

e.g.:

ERROR in ./components/material/misc/loader/loader.jsx
Module parse failed: /Users/mxtnr/rocket/sun/node_modules/babel-loader/lib/index.js??ref--0!/Users/mxtnr/rocket/sun/src/components/material/misc/loader/loader.jsx Unexpected token (17:57)
You may need an appropriate loader to handle this file type.
|
|   render() {
|     const { color, max, min, mode, size, value, classes, ...rest } = this.props;
|     const spinnerProps = { color, max, min, mode, size, value };
|
 @ ./components/material/misc/loader/index.js 1:0-35
 @ ./index.js

a-x- commented Oct 11, 2017

e.g.:

ERROR in ./components/material/misc/loader/loader.jsx
Module parse failed: /Users/mxtnr/rocket/sun/node_modules/babel-loader/lib/index.js??ref--0!/Users/mxtnr/rocket/sun/src/components/material/misc/loader/loader.jsx Unexpected token (17:57)
You may need an appropriate loader to handle this file type.
|
|   render() {
|     const { color, max, min, mode, size, value, classes, ...rest } = this.props;
|     const spinnerProps = { color, max, min, mode, size, value };
|
 @ ./components/material/misc/loader/index.js 1:0-35
 @ ./index.js
@existentialism

This comment has been minimized.

Show comment
Hide comment
@existentialism

existentialism Oct 11, 2017

Member

What's the test in your babel-loader config look like?

Member

existentialism commented Oct 11, 2017

What's the test in your babel-loader config look like?

@a-x-

This comment has been minimized.

Show comment
Hide comment
@a-x-

a-x- Oct 11, 2017

/\.jsx?$/

a-x- commented Oct 11, 2017

/\.jsx?$/

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Oct 23, 2017

Member

Can you post your full Webpack config or a sample reproduction example? This sounds like a likely configuration error.

Member

loganfsmyth commented Oct 23, 2017

Can you post your full Webpack config or a sample reproduction example? This sounds like a likely configuration error.

@a-x-

This comment has been minimized.

Show comment
Hide comment
@a-x-

a-x- Oct 25, 2017

webpack.config.js
// We do this shit because builder is a external black-box package 
// We should read `.baberc` from project root or default via configuration
const babelLoaderOptions = readJson(pathToBabelrc)
babelLoaderOptions.cacheDirectory = true
babelLoaderOptions.babelrc = false
{ entry: [ 'frontend/projects/admin/index' ],
  output:
   { path: 'public/webpack/admin',
     filename: '[chunkhash].js',
     publicPath: '/webpack/admin/' },
  plugins:
   [
// common
  new webpack.DefinePlugin({
    DEBUG: conf.isDevMode,
    'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) }
  }),

  // By default webpack includes all languages
  // https://github.com/moment/moment/issues/1435#issuecomment-33106268
  new webpack.ContextReplacementPlugin(/moment[\\\/]locale/, /^\.\/(ru)$/),

  // static manifest file for rails
new ManifestPlugin(),

// production
     UglifyJsPlugin { options: [Object] },
     LoaderOptionsPlugin { options: [Object] },
     WebpackChunkHash {
       algorithm: 'md5',
       digest: 'hex',
       additionalHashContent: [Function] },
     NamedModulesPlugin { options: {} } ],
  module:
   { rules:
      [ 
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          // include: [conf.paths.src, ...conf.paths.includes],
          use: [
            { loader: 'babel-loader', options: babelLoaderOptions },
          ],
      },
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  target: 'web',

  resolve: { modules, extensions: ['.js', '.jsx', '.json', '.coffee', '.cjsx'], },
  resolveLoader: { modules: [path.join(conf.paths.root, 'node_modules'), 'node_modules'] },

  devtool: 'source-map',
  externals: { react: 'React', 'react-dom': 'ReactDOM', jquery: 'jQuery' } }

a-x- commented Oct 25, 2017

webpack.config.js
// We do this shit because builder is a external black-box package 
// We should read `.baberc` from project root or default via configuration
const babelLoaderOptions = readJson(pathToBabelrc)
babelLoaderOptions.cacheDirectory = true
babelLoaderOptions.babelrc = false
{ entry: [ 'frontend/projects/admin/index' ],
  output:
   { path: 'public/webpack/admin',
     filename: '[chunkhash].js',
     publicPath: '/webpack/admin/' },
  plugins:
   [
// common
  new webpack.DefinePlugin({
    DEBUG: conf.isDevMode,
    'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV) }
  }),

  // By default webpack includes all languages
  // https://github.com/moment/moment/issues/1435#issuecomment-33106268
  new webpack.ContextReplacementPlugin(/moment[\\\/]locale/, /^\.\/(ru)$/),

  // static manifest file for rails
new ManifestPlugin(),

// production
     UglifyJsPlugin { options: [Object] },
     LoaderOptionsPlugin { options: [Object] },
     WebpackChunkHash {
       algorithm: 'md5',
       digest: 'hex',
       additionalHashContent: [Function] },
     NamedModulesPlugin { options: {} } ],
  module:
   { rules:
      [ 
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          // include: [conf.paths.src, ...conf.paths.includes],
          use: [
            { loader: 'babel-loader', options: babelLoaderOptions },
          ],
      },
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object],
        [Object] ] },
  target: 'web',

  resolve: { modules, extensions: ['.js', '.jsx', '.json', '.coffee', '.cjsx'], },
  resolveLoader: { modules: [path.join(conf.paths.root, 'node_modules'), 'node_modules'] },

  devtool: 'source-map',
  externals: { react: 'React', 'react-dom': 'ReactDOM', jquery: 'jQuery' } }
@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Oct 25, 2017

Member

I'm confused, this output looks like it was printed out by Node, since it has [Object] and UglifyJsPlugin { options: [Object] }, but you also have comments in there which aren't something Node would have logged. Is the

// include: [conf.paths.src, ...conf.paths.includes],

line actually commented out in your real config? If it isn't commented out, I'd guess that conf.paths.src doesn't include components/material/misc/loader/loader.jsx for some reason.

Member

loganfsmyth commented Oct 25, 2017

I'm confused, this output looks like it was printed out by Node, since it has [Object] and UglifyJsPlugin { options: [Object] }, but you also have comments in there which aren't something Node would have logged. Is the

// include: [conf.paths.src, ...conf.paths.includes],

line actually commented out in your real config? If it isn't commented out, I'd guess that conf.paths.src doesn't include components/material/misc/loader/loader.jsx for some reason.

@lasseborly

This comment has been minimized.

Show comment
Hide comment
@lasseborly

lasseborly Nov 5, 2017

I got the same problem.

Works when building directly via babel but babel+webpack fails.

error

ERROR in ./lib/index.js
Module parse failed: Unexpected token (5:13)
You may need an appropriate loader to handle this file type.
| const test = {1: 'test2', 2: 'Lol'}
| 
| console.log({...test})
| 

.babelrc

{
  "presets": ["env", "react"],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

webpack.config.js

const path = require('path')
module.exports = {
  entry: './lib/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {
                'targets': {
                  'node': 'current'
                }
              }],
              'react'
            ],
            plugins: [
              'transform-object-rest-spread'
            ]
          }
        }
      }
    ]
  },
  externals: {
    react: 'react'
  }
}

lasseborly commented Nov 5, 2017

I got the same problem.

Works when building directly via babel but babel+webpack fails.

error

ERROR in ./lib/index.js
Module parse failed: Unexpected token (5:13)
You may need an appropriate loader to handle this file type.
| const test = {1: 'test2', 2: 'Lol'}
| 
| console.log({...test})
| 

.babelrc

{
  "presets": ["env", "react"],
  "plugins": [
    "transform-object-rest-spread"
  ]
}

webpack.config.js

const path = require('path')
module.exports = {
  entry: './lib/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['env', {
                'targets': {
                  'node': 'current'
                }
              }],
              'react'
            ],
            plugins: [
              'transform-object-rest-spread'
            ]
          }
        }
      }
    ]
  },
  externals: {
    react: 'react'
  }
}
@nicolo-ribaudo

This comment has been minimized.

Show comment
Hide comment
@nicolo-ribaudo

nicolo-ribaudo Nov 5, 2017

Member

@lasseborly You are only transpiling the src directory path.resolve(__dirname, 'src'), but index.js is in lib.

Member

nicolo-ribaudo commented Nov 5, 2017

@lasseborly You are only transpiling the src directory path.resolve(__dirname, 'src'), but index.js is in lib.

@lasseborly

This comment has been minimized.

Show comment
Hide comment
@lasseborly

lasseborly Nov 5, 2017

@nicolo-ribaudo thanks a ton! Restructuring a project is not always the smart thing to do late at night...

lasseborly commented Nov 5, 2017

@nicolo-ribaudo thanks a ton! Restructuring a project is not always the smart thing to do late at night...

@a-x- a-x- closed this Nov 6, 2017

@lock lock bot added the outdated label May 4, 2018

@lock lock bot locked as resolved and limited conversation to collaborators May 4, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.