Skip to content
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

ReferenceError: _objectSpread is not defined after update #10179

Closed
jenniferlynparsons opened this issue Jul 8, 2019 · 48 comments

Comments

Projects
None yet
@jenniferlynparsons
Copy link

commented Jul 8, 2019

Bug Report

Current Behavior
I've updated to 7.5 and have been following the developments with issues that should have been resolved with https://github.com/babel/babel/releases/tag/v7.5.1 however after stripping and reinstalling everything babel-related, I'm still getting this error.

Babel packages
@babel/cli: "^7.5.0"
@babel/core: "^7.5.0"
@babel/helpers: "^7.5.1"
@babel/plugin-proposal-object-rest-spread: "^7.5.1"
@babel/plugin-transform-runtime: "^7.5.0"
@babel/polyfill: "^7.4.4"
@babel/preset-env: "^7.5.0"
@babel/preset-react: "^7.0.0"
babel-eslint: "^10.0.2"
babel-jest: "^24.8.0"
babel-loader: "^8.0.6"
babel-plugin-dynamic-import-node: "^2.3.0"
babel-plugin-jsx-remove-data-test-id: "^2.0.0"
babel-plugin-transform-class-properties: "^6.24.1"
babel-plugin-transform-decorators-legacy: "^1.3.5"
babel-plugin-transform-export-extensions: "^6.22.0"
babel-plugin-transform-object-rest-spread: "^6.26.0"

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

{
  "env": {
    "test": {
      "plugins": [
        "transform-class-properties",
        "dynamic-import-node",
        "@babel/plugin-transform-runtime"
      ]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-class-properties"]
}

Environment

  • Babel version(s): 7.5.0
  • Node/npm version: 6.5.0
  • OS: Linux Mint Cinnamon
  • Monorepo: yes
@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Jul 8, 2019

Hey @jenniferlynparsons! 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.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

Can you post your webpack config?
Also, you are using a lot of different v6 plugins, which are very likely to cause problems when mixed with Babel 7. Please update them.

{
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-proposal-dynamic-import",
        "@babel/plugin-transform-runtime"
      ]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babe/plugin-transform-class-properties"]
}
@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

I installed the plugins from scratch without indicating version number, so I'll have to see if there are updated versions available somewhere or if 7 allows me to drop them entirely. Here's my webpack config:

/*
    ./webpack.config.js
*/
const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: "./client/src/index.html",
  filename: "index.html",
  inject: "body"
});

module.exports = {
  entry: "./client/src/index.js",
  output: {
    path: path.resolve("dist"),
    filename: "index_bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "babel-loader"
          },
          {
            loader: "react-svg-loader",
            options: {
              jsx: true // true outputs JSX tags
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  devServer: {
    historyApiFallback: true
  },
  plugins: [HtmlWebpackPluginConfig]
};
@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

A bit more investigation leads to Jest being part of the problem. That's where I'm getting that error, specifically. It requires things like babel-plugin-transform-class-properties: "^6.24.1". I'm going to see if there's any way to update that.

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

Further update: Earlier today I had rolled back to my previous branch and everything worked correctly. The only difference between the two branches is that I installed Yup (https://github.com/jquense/yup) for some error validation.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

Installing a new package might have changed other things in your lockfile.

Recent versions of Jest use Babel 7, which version are you using?

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

I'm on the most current version of Jest. The project I'm working on is fairly new (started in October/November) and I had just updated everything last week, so it's all current versions, or as close as possible.

The only difference, package-wise, between my previous branch and the current one where things are broken, is that I installed Yup.

@mstruensee

This comment has been minimized.

Copy link

commented Jul 8, 2019

I am getting this same issue ... downgrading fixed the issue (my previous version was 7.4.4).

My issue does not deal with Jest, it prevents my app from rendering locally.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

Can someone of you share a small repository which reproduces the issue?

@mstruensee

This comment has been minimized.

Copy link

commented Jul 8, 2019

I would have to make one, currently it is happening on internal private repositories.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

Hopefully you would only need the same config and a one-line sample file to transpile.

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

@nicolo-ribaudo here's my current branch where it's failing https://github.com/jenniferlynparsons/cuppa-webpack/tree/feature/login-form-validation

I've got it narrowed down at the moment to the AuthReducer.js file where I've added the "LOGIN_ERRORS" case. The case before that ("USER_LOADING") is the one that's failing in the AuthReducers.test.js file. Sorry I can't get it narrowed down any further than that.

I've also noticed that if I remove the "LOGIN_ERRORS" case, the tests pass. There's no reason that I can see why that would have any effect unless there's some edge case I'm hitting that I'm unaware of.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

I tried downloading that branch, updating Babel plugins to v7 and npm test worked.

cuppa-webpack on  feature/login-form-validation [!] is 📦 v1.0.0 via ⬢ v11.14.0 took 8s 
➜ npm test

> cuppa-webpack@1.0.0 test /home/nicolo/Documenti/dev/babel-bugs/cuppa-webpack
> jest

 PASS  client/src/reducers/__tests__/errorReducers.test.js
  error reducer
    ✓ returns default state when there is no action type (10ms)
    ✓ returns error state when action.payload is not empty (1ms)

 PASS  client/src/reducers/__tests__/typesReducers.test.js
  types reducer
    ✓ returns default state when there is no action type (7ms)

 PASS  client/src/reducers/__tests__/flashReducers.test.js
  flash reducer
    ✓ returns default state when there is no action type (6ms)
    ✓ returns 'on' state when action.payload is 'on' (1ms)

 PASS  client/src/components/FormComponents/InputField/__tests__/InputField.test.jsx
  InputField rendering
    ✓ index field renders without errors (56ms)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
        in input
        in div
        in Unknown

 PASS  client/src/reducers/__tests__/authReducers.test.js
  auth reducer
    ✓ returns default state when there is no action type (7ms)
    ✓ returns loading state true when the action type is 'USER_LOADING' (1ms)
    ✓ returns logged in user state when the action type is 'SET_CURRENT_USER' (1ms)

 PASS  client/src/reducers/__tests__/teaReducers.test.js
  tea reducer
    ✓ returns default state when there is no action type (7ms)
    ✓ returns default state when the action type is 'GET_TEAS' (2ms)
    ✓ returns a state with a new tea when the action type is 'ADD_TEA' (1ms)
    ✓ returns a state with an updated tea when the action type is 'EDIT_TEA' (1ms)
    ✓ returns a state with an updated teaIDs array when the action type is 'DELETE_TEA' (1ms)

 PASS  client/src/components/Landing/__tests__/Landing.test.jsx
  Landing rendering
    ✓ Landing renders without error (71ms)

 PASS  client/src/components/Template/Footer/__tests__/Footer.test.js
  footer rendering
    ✓ footer renders without error (25ms)

 PASS  client/src/actions/__tests__/flashActions.test.js
  editTeaFlash
    ✓ returns an object (2ms)
    ✓ it returns the EDIT_TEA_FLASH action type and payload (2ms)

 PASS  client/src/components/Dashboard/__tests__/Dashboard.test.jsx
  Dashboard rendering
    ✓ dashboard renders without error when logged in (33ms)
  Dashboard interaction
    ✓ dashboard logout click logs out user (15ms)

 PASS  client/src/components/Template/NavBar/__tests__/NavBar.test.jsx
  NavBar rendering
    ✓ renders without error when logged out (39ms)
    ✓ renders without error when logged in (18ms)
  NavBar interactions
    ✓ user click logout button triggers logout function (16ms)

 PASS  client/src/actions/__tests__/authActions.test.js
  loginAction
    ✓ returns a function (2ms)
    dispatching the returned function
      ✓ it calls 'post' on the API with the correct path and the user data (3ms)
      when the POST call is successful
        ✓ it sets the JWT token to the response from the POST (2ms)
        ✓ it decodes the token with jwt_decode (1ms)
        ✓ it sets the current user action (2ms)
  registerUser
    ✓ returns a function (1ms)
    dispatching the returned function
      ✓ it calls 'post' on the API with the correct path and the user data (1ms)
      when the POST call is successful
        ✓ it sets the JWT token to the response from the POST (1ms)
        ✓ it decodes the token with jwt_decode (1ms)
        ✓ it sets the current user action (1ms)
  logoutUser
    ✓ returns a function
    ✓ it resets the authToken (1ms)
  setCurrentUser
    ✓ returns an object (1ms)
    ✓ it returns the SET_CURRENT_USER action type and decoded payload (1ms)

 PASS  client/src/components/Auth/Register/__tests__/Register.test.jsx
  Register rendering
    ✓ Register renders without error (54ms)
  Register form updates
    ✓ onSubmit submits the form with valid data (41ms)

 PASS  client/src/components/Tea/TeaDetails/__tests__/TeaDetailsContainer.test.jsx
  TeaDetailsContainer rendering
    ✓ renders the component with redux without errors (51ms)
  TeaDetailsContainer flash
    ✓ tea detail renders with flash message after update (8ms)
    ✓ user clicks on delete flash fires click handler (23ms)
  teaDetails interactions
    ✓ user clicks edit to update tea (12ms)

 PASS  client/src/actions/__tests__/teaActions.test.js
  addTea
    ✓ returns a function (1ms)
    ✓ it calls 'post' on the API with the correct path and the tea data (2ms)
    ✓ it returns the ADD_TEA action type and payload (2ms)
  editTea
    ✓ returns a function
    ✓ it calls 'put' on the API with the correct path and the tea data
    ✓ it returns the EDIT_TEA action type and payload (1ms)
  deleteTea
    ✓ returns a function
    ✓ it calls 'post' on the API with the correct path and the tea data
    ✓ it returns the DELETE_TEA action type and payload (1ms)
  getTeas
    ✓ returns a function
    ✓ it calls 'post' on the API with the correct path and the tea data
    ✓ it returns the GET_TEAS action type and payload (1ms)

 PASS  client/src/components/Auth/Login/__tests__/Login.test.jsx
  Login rendering
    ✓ login renders without error (39ms)
  Login form success
    ✓ onSubmit submits the form with valid data (43ms)
  Login form failure
    onSubmit returns an error message if data is invalid
      ✓ invalid email address (4ms)
      ✓ mismatched email or password (6ms)

 PASS  client/src/components/Tea/TeaEditor/__tests__/TeaEditorContainer.test.jsx
  TeaEditorContainer rendering
    ✓ renders the component with redux without errors (39ms)
  teaEditor form submit
    ✓ editor form submit succesfully adds tea (36ms)
    ✓ editor form succesfully updates tea (15ms)

 PASS  client/src/components/App/__tests__/App.test.jsx
  App loading
    ✓ renders without crashing (34ms)

  console.error node_modules/prop-types/checkPropTypes.js:20
    Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
        in select (created by TeaCollectionTable)
        in span (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in form (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in div (created by TeaCollectionTable)
        in TeaCollectionTable (created by TeaCollectionTableContainer)
        in TeaCollectionTableContainer (created by ConnectFunction)
        in ConnectFunction
        in Router

 PASS  client/src/components/Tea/TeaCollectionTable/__tests__/TeaCollectionTableContainer.test.jsx
  TeaCollectionTableContainer rendering
    ✓ renders the component with redux without errors (75ms)
  TeaCollectionTableContainerClass interactions
    individual tea interactions
      ✓ user clicks delete removes the tea from list (21ms)
      ✓ user clicks name link redirects to detail page (19ms)
      ✓ user clicks edit link redirects to tea editor (19ms)
    sorting
      ✓ user clicks sort arrow sorts by that category (22ms)
      ✓ user clicks sort arrow a second time reverses sort order (22ms)
      ✓ user clicks a different arrow on sorted table re-sorts to new sort order (24ms)
    filtering
      ✓ user can filter by alpha character criteria (36ms)
      ✓ user can filter by number criteria (27ms)
      ✓ user can clear filter (30ms)
      ✓ if user does not choose filter category, filter does not work (17ms)
      ✓ if user does not enter filter criteria, filter does not work (14ms)

Test Suites: 19 passed, 19 total
Tests:       75 passed, 75 total
Snapshots:   0 total
Time:        4.398s
Ran all test suites.
@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

Well, that's encouraging! @nicolo-ribaudo can you clarify which plugins should be updated? And is it enough to run npm update pluginX for each of them?

I ask because when i run npm outdated nothing related to babel or plugins shows up in the list.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

Oh yeah, sorry for not being clear. We renamed the packages in Babel 7:

package.json

  "devDependencies": {
    "@babel/cli": "^7.4.3",
    "@babel/core": "^7.4.3",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.5.2",
    "@babel/preset-react": "^7.0.0",
    "@testing-library/react": "^8.0.1",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.7.1",
    "babel-loader": "^8.0.5",
    "babel-plugin-jsx-remove-data-test-id": "^2.0.0",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
    "html-webpack-plugin": "^3.2.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.8.0",
    "jest-dom": "^3.5.0",
    "jsdoc": "^3.6.2",
    "lodash": "^4.17.11",
    "moxios": "^0.4.0",
    "nodemon": "^1.18.11",
    "prettier": "^1.16.4",
    "react-svg-loader": "^2.1.0",
    "react-test-renderer": "^16.8.6",
    "redux-devtools-extension": "^2.13.8",
    "redux-mock-store": "^1.5.3",
    "sass": "^1.18.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.3.1"
  },

.babelrc

{
  "env": {
    "test": {
      "plugins": ["@babel/transform-runtime"]
    },
    "production": {
      "plugins": ["babel-plugin-jsx-remove-data-test-id"]
    }
  },
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/proposal-class-properties"]
}
@mstruensee

This comment has been minimized.

Copy link

commented Jul 8, 2019

@jenniferlynparsons where is @babel/plugin-proposal-object-rest-spread in your .babelrc?

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

Thanks for the clarification @nicolo-ribaudo ! Looks like I'm still having issues, but I can move forward with more confidence that it's not a babel issue. Time to try restarting the machine. :D

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

@mstruensee I didn't have it in mine. Just tried adding it and wow that made everything so much worse. lol.

Now I'm not just getting the error on the one test, but on most of them.

@jenniferlynparsons

This comment has been minimized.

Copy link
Author

commented Jul 8, 2019

Okay, I think (fingers crossed) I have it fixed. For me, it took uninstalling jest and jest-cli globally and reinstalling them. That seems to have finally resolved the issue.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 8, 2019

I suggest never I stalling packages globally, always use the local copy.

@HsuTing

This comment has been minimized.

Copy link

commented Jul 9, 2019

I had the same problem. I use this with next.js.
The source code like this:

In:

export const handlePages = (pages, removeIcon = false) =>
  (pages || []).map(
    ({ pages: subPages, newWindow, params, icon, ...page }) => ({
      ...page,
      newWindow: !!newWindow,
      params: params || {},
      pages: handlePages(subPages),
      icon:
        removeIcon && !icon?.use
          ? null
          : {
              direction: icon?.direction || 'right',
              font: icon?.font || null,
              image: icon?.image || null,
            },
    }),
  );

export default ({ design, pages, ...menu }) => ({
  ...menu,
  pages: handlePages(pages),
  design: {
    ...design,
    showLogo: design?.showLogo || false,
    ...
});

Out:

var handlePages = function handlePages(pages) {
  var removeIcon = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  return (pages || []).map(function (_ref) {
    var subPages = _ref.pages,
        newWindow = _ref.newWindow,
        params = _ref.params,
        icon = _ref.icon,
        page = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref, ["pages", "newWindow", "params", "icon"]);

    return _babel_runtime_helpers_objectSpread__WEBPACK_IMPORTED_MODULE_0___default()({}, page, {
      newWindow: !!newWindow,
      params: params || {},
      pages: handlePages(subPages),
      icon: removeIcon && !(icon === null || icon === void 0 ? void 0 : icon.use) ? null : {
        direction: (icon === null || icon === void 0 ? void 0 : icon.direction) || 'right',
        font: (icon === null || icon === void 0 ? void 0 : icon.font) || null,
        image: (icon === null || icon === void 0 ? void 0 : icon.image) || null
      }
    });
  });
};
/* harmony default export */ __webpack_exports__["a"] = (function (_ref2) {
  var design = _ref2.design,
      pages = _ref2.pages,
      menu = _babel_runtime_helpers_objectWithoutProperties__WEBPACK_IMPORTED_MODULE_1___default()(_ref2, ["design", "pages"]);

  return _objectSpread({}, menu, {
    pages: handlePages(pages),
    design: _objectSpread({}, design, {
     ...

Some _objectSpread had changed to _babel_runtime_helpers_objectSpread__WEBPACK_IMPORTED_MODULE_0___default, but others did not change.

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/env',
      {
        useBuiltIns: 'usage',
        corejs: '2.6.9',
      },
    ],
    '@babel/react',
    '@babel/preset-typescript',
  ],
  plugins: [
    '@babel/transform-runtime',
    '@babel/proposal-optional-chaining',
    '@babel/proposal-export-default-from',
    [
      '@babel/proposal-decorators',
      {
        legacy: true, // TODO: remove, typescript not support
      },
    ],
    '@babel/proposal-class-properties',
    [
      'transform-imports',
      {
        /* eslint-disable no-template-curly-in-string */
        antd: {
          transform: 'antd/lib/${member}',
          kebabCase: true,
        },
        lodash: {
          transform: 'lodash/${member}',
        },
        fbjs: {
          transform: 'fbjs/lib/${member}',
        },
        validator: {
          transform: 'validator/lib/${member}',
        },
        'react-icons/fa': {
          transform: 'react-icons/lib/fa/${member}',
          kebabCase: true,
        },
        'react-icons/md': {
          transform: 'react-icons/lib/md/${member}',
          kebabCase: true,
        },
        /* eslint-enable no-template-curly-in-string */
      },
    ],
    'idx',
    [
      'module-resolver',
      {
        root: ['./src'],
        cwd: 'packagejson',
      },
    ],
    'css-modules-transform',
  ],
};

@nicolo-ribaudo do you have any idea?

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

This seems like a problem with webpack, which only transpiles some usages of the imported helper and not all of them.

@HsuTing

This comment has been minimized.

Copy link

commented Jul 9, 2019

After I tested, this work correctly when I downgrade to @babel/plugin-proposal-object-rest-spread@7.4.4 and @babel/helpers@7.5.1.

@v-angolenko

This comment has been minimized.

Copy link

commented Jul 9, 2019

i have similar problem, but my config has only 2 plugins

['@babel/plugin-transform-modules-commonjs'],
['@babel/plugin-proposal-object-rest-spread'],

babel generate function _objectSpread2 but tries to use _objectSpread2 and _objectSpread, and it causes error "_objectSpread is not defined"

@nicolo-ribaudo nicolo-ribaudo reopened this Jul 9, 2019

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

@v-angolenko @HsuTing Can you provide a repository which shows the issue?

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

Thanks, it appears to be the same problem as in @v-angolenko's package. I'm trying to understand what it is caused by.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

I have created #10187 which shows the root cause of this issue.

@kddeisz

This comment has been minimized.

Copy link

commented Jul 9, 2019

Nice work @nicolo-ribaudo! Thanks for the quick research!

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 9, 2019

Btw, the fix for that bug will go in the next @babel/core version, so you'll have to update it anyway.

@mstruensee

This comment has been minimized.

Copy link

commented Jul 9, 2019

@nicolo-ribaudo @babel/core was mentioned in this thread, so I happened to look at my package.json and I am shocked to see that it was not in there ... I added the latest and then upgraded "@babel/plugin-proposal-object-rest-spread": "7.5.4" and my error is gone. 👍

facebook-github-bot added a commit to facebook/react-native that referenced this issue Jul 10, 2019

Use babel-core 7.5+ in new RN Apps
Summary:
We are running into some problems with the spread operator. The solution is to ask for a newer minimum babel version.

See babel/babel#10179

Note: this doesn't actually change behavior. When creating a new app a new babel version will already be used. This simply ensures that the minimum version fulfills the requirements.

Reviewed By: axe-fb

Differential Revision: D16181111

fbshipit-source-id: f5207318b3a7bd9f092c0e64a8065d0f713012da
@kddeisz

This comment has been minimized.

Copy link

commented Jul 10, 2019

When using jest, it's going to request babel 7.1.0, which still causes problems with the spread operator because of #10187. But you can get around it by adding a resolution to your package.json, as in:

"resolutions": {
    "@babel/core": "^7.5.4"
  }

which will force jest into using the newer babel. This seems to fix the problem with jest at least.

@MizuBishi

This comment has been minimized.

Copy link

commented Jul 10, 2019

I have the same error and I am using it with gatsby.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Jul 10, 2019

Yeah, please update @babel/core until this is fixed.

@MizuBishi

This comment has been minimized.

Copy link

commented Jul 10, 2019

Yes I updated "@babel/core": "^7.5.4" but I still get ReferenceError: _objectSpread is not defined.

@pleunv

This comment has been minimized.

Copy link

commented Jul 10, 2019

@MizuBishi You might want to remove your node_modules and reinstall, I had a similar issue.

(+ make sure you added "@babel/core": "^7.5.4" to your resolutions in addition to your devDependencies)

@bscs-dev-team

This comment has been minimized.

Copy link

commented Jul 10, 2019

I have the same error and I am using it with gatsby.

We are also having this issue in Gatsby. Our site suddenly won't build on Netlify.

@edahlseng

This comment has been minimized.

Copy link

commented Jul 10, 2019

I'm also encountering the same issue. npm ls @babel/core confirms that I'm using version 7.5.4, and I can similarly confirm that I'm using version 7.5.0 of @babel/node and version 7.5.4 of @babel/plugin-proposal-object-rest-spread.

@bscs-dev-team

This comment has been minimized.

Copy link

commented Jul 10, 2019

We have this resolved for Gatsby on Netlify by adding plugin-proposal-object-rest-spread to Gatsby.

package.json:
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-proposal-object-rest-spread": "^7.5.4",
"babel-preset-gatsby": "^0.2.1"
},
"resolutions": {
"@babel/core": "^7.5.4"
}

.babelrc in root:
{
"presets": ["babel-preset-gatsby"],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

@hubgit

This comment has been minimized.

Copy link

commented Jul 15, 2019

I was having this issue when running tests in Jest, after upgrading babel + plugins.

I found that running yarn-deduplicate && yarn was enough to fix it.

@joefiorini

This comment has been minimized.

Copy link

commented Jul 15, 2019

I've tried everything in this list in our yarn workspaces monorepo. I've added the resolutions field for @babel/core and am now on 7.5.4 for both:

web-infrastructure on  gatsby-update [⇡$!] 
➜ yarn list --pattern @babel/core
yarn list v1.15.2
└─ @babel/core@7.5.4
✨  Done in 1.49s.

web-infrastructure on  gatsby-update [⇡$!] 
➜ yarn list --pattern @babel/plugin-proposal-object-rest-spread
yarn list v1.15.2
└─ @babel/plugin-proposal-object-rest-spread@7.5.4
✨  Done in 1.69s.

I've run yarn-deduplicate (at least on @babel/runtime and @babel/preset-env. I still have a few other @babel dependencies that are considered duplicates, could any of those be related to this issue?

With every attempt to fix this issue I've run rm -rf node_modules **/node_modules to remove from all folders in my workspace. Every time running jest still results in the same error:

ReferenceError: _objectSpread is not defined

Anyone manage to work around this without one of the already-mentioned solutions?

UPDATE (SOLVED): Worked with a fresh checkout. Must have missed a node_modules directory somewhere in my glob.

nicolo-ribaudo added a commit that referenced this issue Jul 15, 2019

itaylor added a commit to itaylor/thunk-centric-redux that referenced this issue Jul 16, 2019

AdamRamberg added a commit to AdamRamberg/babel that referenced this issue Jul 17, 2019

@nicolo-ribaudo nicolo-ribaudo unpinned this issue Jul 17, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.