terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity
next.js/examples/with-custom-babel-config
History
HaNdTriX 06b02e2c62 Update with-custom-babel-config example (#4923) 
## Issue

Running [examples/with-custom-babel-config](https://github.com/zeit/next.js/tree/canary/examples/with-custom-babel-config) will result in the following error message:

```
./pages/index.js
Module build failed (from /some_path/next.js/dist/build/webpack/loaders/next-babel-loader.js):
Error: [BABEL] /some_path/next.js/examples/with-custom-babel-config/pages/index.js: 
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
  long run to explicitly add which proposals to use.

...
```

## Explanation

Babel removed Babel's Stage presets on July 27, 2018.

More info: https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

## Solution

I've updated the example so ist just uses the babel plugin it actually needs.

## Related 

Closes: #4772
2018-08-08 09:02:46 -07:00
..
pages Fix linting errors in standard 9.0 (#1333) 2017-03-02 16:17:41 -08:00
.babelrc Update with-custom-babel-config example (#4923) 2018-08-08 09:02:46 -07:00
package.json Update with-custom-babel-config example (#4923) 2018-08-08 09:02:46 -07:00
README.md #4751 - Explicitly mention install when cloning examples (#4758) 2018-07-11 23:56:15 +02:00

README.md

Deploy to now

Using a custom Babel config

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-custom-babel-config with-custom-babel-config-app
# or
yarn create next-app --example with-custom-babel-config with-custom-babel-config-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-custom-babel-config
cd with-custom-babel-config

Install it and run:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download)

now

The idea behind the example

This example features:

  • An app using proposed do expressions.
  • It uses babel-preset-stage-0, which allows us to use above JavaScript feature.
  • It uses '.babelrc' file in the app directory to add above preset.

Most of the time, when writing a custom .babelrc file, you need to add next/babel as a preset.