Adding Kinto to create-react-app breaks yarn build

[peterbe]

Steps to reproduce:

▶ cd /tmp
▶ create-react-app my-kinto-app
▶ cd my-kinto-app
▶ yarn add kinto

Then edit src/App.js to something like this:

...
import Kinto from "kinto";

class App extends Component {
   componentDidMount() {
     this.db = new Kinto()
   }
...

(not sure if this is necessary because I don't know if CRA's treeshaking would remove the dependency when building)

▶ yarn build
yarn run v1.9.4
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve '@babel/runtime/helpers/interopRequireDefault' in '/private/tmp/my-kinto-app/node_modules/kinto/lib'


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[peterbe]

By the way, this works but is not a solution:

▶ yarn add [email protected]
▶ yarn build
...
Compiled successfully.
...

[peterbe]

Actually, this works too:

▶ yarn add [email protected]
▶ yarn build
...
Compiled successfully.
...

So the regression is in 12.0.0...12.0.1.

[peterbe]

I don't really know what I'm looking for but the diff between the node_modules/kinto/lib is very different:

▶ tree node_modules/kinto/lib
node_modules/kinto/lib
├── KintoBase.js
├── adapters
│   ├── IDB.js
│   ├── LocalStorage.js
│   └── base.js
├── api.js
├── collection.js
├── errors.js
├── http.js
├── index.js
├── kinto.js
├── kinto.min.js
├── kinto.noshim.js
├── moz-kinto-offline-client.js
└── utils.js

1 directory, 14 files

/tmp/my-kinto-app
▶ tree /tmp/node_modules_12.0.0/kinto/lib
/tmp/node_modules_12.0.0/kinto/lib
├── KintoBase.js
├── adapters
│   ├── IDB.js
│   ├── LocalStorage.js
│   └── base.js
├── api.js
├── collection.js
├── errors.js
├── http.js
├── index.js
└── utils.js

1 directory, 10 files

I.e. in kinto 12.0.1 there are these for additional files:

├── kinto.js
├── kinto.min.js
├── kinto.noshim.js
├── moz-kinto-offline-client.js

[peterbe]

More of a solution is to run npm add @babel/runtime which resolves it for me. Now I can build my create-react-app again.

[peterbe]

At this point I don't know if the resolution is to make a loud "BREAKING CHANGES" warning in the changelog or if there's something we need to do within this repo to avoid this.

[glasserc]

Yeah, like I said in our standup this morning, this is probably my fault because I'm the one who updated babel to the new version, and 12.0.1 is the first version that includes those changes. It wasn't really clear to me (both with the old babel-runtime or with the new one) which packages were meant to be included in the kinto.js library and which were meant to be included by dependent projects. See e.g. #650. My current reading of the babel-plugin-transform-runtime docs suggests that babel-runtime is a dependency of kinto.js, so I guess we have to add it to package.json.

[peterbe]

Oh that old issue. I would dare to have opinions if it wasn't for the fact that so much has changed with babel in recent months.

Also, there are two separate discussions going on. Whether the kinto.min.js shipped to unkpg should have all the polyfills baked in or whether users are expected to polyfill that themselves.

Then, there's the whole ES5 vs ES6 discussion. If you treeshake or webpack or parcel bundle kinto.js into your project you probably don't want any of the "kinto.js dist" code at all or any of the polyfills. Having said that, where does that leave projects like create-react-app that can only really bundle ES5 packaged modules.

[glasserc]

Per discussion on IRC, we believe that our approach is indeed the correct one and that this is fixed now.