babel / babel/babel-loader

Different transpilation/bundling behavior between ES6 and CJS modules

Open
#757 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
4.8k
Forks
456
Avg merge
9h 19m
Merged PRs (30d)
2

Description

[Note: unclear to me whether this issue comes from Webpack, Babel, or the combination of the two, @Timer suggested bringing this here]

**Webpack Version:**
4.19.1

**Babel Core Version**:
6.26.3

**Babel Loader Version**:
8.0.4

**Please tell us about your environment:**
OSX

**Current behavior:**

Importing a file with rest/spread syntax in it as an ES6 module is properly transpiled/bundled, but importing it as a CJS module causes an error. The error message given is either

```
Attempted import error: './cjs.js' does not contain a default export (imported as 'cjs').
```

or

```
TypeError: Cannot assign to read only property 'exports' of object '#'
```

depending on whether it's the first or subsequent build attempt.

**Expected/desired behavior:**

Both files should be properly imported and transpiled.

**Steps to reproduce**

Full repro: https://github.com/veltman/webpack-babel-bug-repro

1. Create a vanilla create-react-app app with react-scripts@2.1.2.

2. Create two files: src/es6.js and src/cjs.js.

```js
// es6.js
export default ({ foo, ...rest }) => true;

// cjs.js
module.exports = ({ foo, ...rest }) => true;
```

3. Run npm start or yarn start.

4. Import both of them into App.js, one at a time:

```js
import es6 from "./es6.js";
// then
import cjs from "./cjs.js";
```

This appears to be specific to the language features being used. If I replace the rest/spread with plain destructuring (`({ foo, bar }) => true`), both files work, they're transpiled and bundled without an error.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.