Different transpilation/bundling behavior between ES6 and CJS modules
- 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
Assessment
This issue has not been assessed yet.