Babel: ReferenceError: _objectSpread is not defined after update

Created on 8 Jul 2019  ยท  50Comments  ยท  Source: babel/babel

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
bug outdated
Source
picture jenniferlynparsons
👍16

Most helpful comment

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.

picture kddeisz on 10 Jul 2019
👍5

All 50 comments

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.

babel-bot picture babel-bot on 8 Jul 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"]
}
nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 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 picture jenniferlynparsons on 8 Jul 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 picture jenniferlynparsons on 8 Jul 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.

jenniferlynparsons picture jenniferlynparsons on 8 Jul 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?

nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 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.

jenniferlynparsons picture jenniferlynparsons on 8 Jul 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.

mstruensee picture mstruensee on 8 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 2019

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

mstruensee picture mstruensee on 8 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 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.

jenniferlynparsons picture jenniferlynparsons on 8 Jul 2019
👍1

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

> [email protected] 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.

nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 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.

jenniferlynparsons picture jenniferlynparsons on 8 Jul 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"]
}
nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 2019

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

mstruensee picture mstruensee on 8 Jul 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 picture jenniferlynparsons on 8 Jul 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 picture jenniferlynparsons on 8 Jul 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.

jenniferlynparsons picture jenniferlynparsons on 8 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 8 Jul 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?

HsuTing picture HsuTing on 9 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019

After I tested, this work correctly when I downgrade to @babel/[email protected] and @babel/[email protected].

HsuTing picture HsuTing on 9 Jul 2019
👍1

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"

v-angolenko picture v-angolenko on 9 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019

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

I added minimal part of the project to simplify search of the issue
src/index.js -> lib/index.js

spread-issue-repo.zip

v-angolenko picture v-angolenko on 9 Jul 2019

Hi friends - here's a repo with the issue: https://github.com/CultureHQ/react-state-mutations/pull/123. It's a pretty minimal repo so hopefully should get you going. The .babelrc contains:

{
  "presets": ["@babel/preset-env"]
}

Here are the dependencies in package.json:

  "devDependencies": {
    "@babel/cli": "^7.5.0",
    "@babel/core": "^7.5.0",
    "@babel/preset-env": "^7.5.3",
    "@culturehq/scripts": "^2.1.0",
    "@testing-library/react-hooks": "^1.0.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-test-renderer": "^16.8.6"
  }
kddeisz picture kddeisz on 9 Jul 2019

Some further investigation: this PR https://github.com/babel/babel/pull/10170 is the last one to touch the spread plugin, and there is a mention in the discussion of various babel/core versions causing a problem. Looks like I have jest-config and @jest/transform in my yarn.lock file both requesting "@babel/core" "^7.1.0". Would that cause a problem? I'm on the latest for everything so likely something needs to change here but not sure what.

kddeisz picture kddeisz on 9 Jul 2019

@kddeisz In your repository, it is enough to delete @babel/core 7.4.5 and @babel/helpers 7.4.4 from the lockfile. I'm trying to understand why it is broken, but I can't reproduce it only with yarn prepublishOnly (I belive this is somehow caused by the Jest integration)

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019

Yeah I just got there as well. It looks like if you use the built distribution it will work. It's got to be something with @jest/transform

kddeisz picture kddeisz on 9 Jul 2019

If you delete those entries from yarn.lock and re-run yarn --frozen-lockfile, tests pass :thinking:

@v-angolenko I get this error:

โžœ npm test

> @deepvision/[email protected] test /home/nicolo/Documenti/dev/babel-bugs/spread-issue
> jest

sh: 1: jest: not found
npm ERR! Test failed.  See above for more details.
nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019

So this gist: https://gist.github.com/kddeisz/c37c9a32f1694aeaa7b7c1e00a234de3 is what the jest transform compiles out to. So it looks like it injects a _objectSpread2 helper, and calls it in a couple places, but then calls _objectSpread in others.

kddeisz picture kddeisz on 9 Jul 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 picture nicolo-ribaudo on 9 Jul 2019

Repl demo: https://babeljs.io/repl/version/7.4.4#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBCCuUAOiDC4BmBLA5jAvDAN4wB05CyiMAvgNwBQoksz2ehJ5pOApmLwBOAQwA26MO1p0gA&debug=false&forceAllTransforms=true&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=false&presets=&prettier=false&targets=&version=7.1.6&externalPlugins=%40babel%2Fplugin-proposal-object-rest-spread%407.5.3

It appears to be a problem when using an old version of @babel/core with a new version of @babel/plugin-proposal-object-rest-spread. As a workaround, you can update @babel/core to ^7.5.0.

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019
👍2

I have created https://github.com/babel/babel/issues/10187 which shows the root cause of this issue.

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 2019
👍2

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

kddeisz picture kddeisz on 9 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 9 Jul 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. ๐Ÿ‘

mstruensee picture mstruensee on 9 Jul 2019
🎉1

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.

kddeisz picture kddeisz on 10 Jul 2019
👍5

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

MizuBishi picture MizuBishi on 10 Jul 2019

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

nicolo-ribaudo picture nicolo-ribaudo on 10 Jul 2019

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

MizuBishi picture MizuBishi on 10 Jul 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)

pleunv picture pleunv on 10 Jul 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.

bscs-dev-team picture bscs-dev-team on 10 Jul 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.

edahlseng picture edahlseng on 10 Jul 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"]
}

bscs-dev-team picture bscs-dev-team on 11 Jul 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.

hubgit picture hubgit on 15 Jul 2019
👍1

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/[email protected]
โœจ  Done in 1.49s.

web-infrastructure on ๎‚  gatsby-update [โ‡ก$!] 
โžœ yarn list --pattern @babel/plugin-proposal-object-rest-spread
yarn list v1.15.2
โ””โ”€ @babel/[email protected]
โœจ  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.

joefiorini picture joefiorini on 15 Jul 2019

Just wanted to confirm for others struggling with this issue that @jenniferlynparsons recommendation fixed my issue.

Time to try restarting the machine.

Was fighting with our CI machine and followed many of the above suggestions, but a reboot finally fixed the issue.

FeXd picture FeXd on 25 Jul 2019

I had similar issue when I tried to upgrade babel to v7 and my unit test with jest failed with such error.

Eventually, I found I had to set BABEL_ENV=test in env vars.

And I don't have to add @babel/plugin-transform-runtime plugin.

thinkkevin picture thinkkevin on 2 Aug 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

wdalrymple picture wdalrymple  ยท  43Comments
KnisterPeter picture KnisterPeter  ยท  32Comments
ocombe picture ocombe  ยท  35Comments
acklj1 picture acklj1  ยท  35Comments
armpogart picture armpogart  ยท  34Comments