Next.js: Adding .babelrc requires including "env" ?

Created on 3 Sep 2017 · 7Comments · Source: vercel/next.js

[x] I have searched the issues of this repository and believe that this is not a duplicate.

These seem related maybe?

Expected Behavior

I should be able to add a .babelrc with a custom plugin and the next/babel preset and everything should work without having to include the env preset.

Current Behavior

When doing this I'm getting the following error when running tests (with Jest):

~/Developer/glamorous-with-next (pr/fix-config)
😇  $ npm run test --silent
 FAIL  components/__tests__/toggle-button.js
  ● Test suite failed to run

    /Users/kdodds/Developer/glamorous-with-next/components/__tests__/toggle-button.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){var _jsxFileName = '/Users/kdodds/Developer/glamorous-with-next/components/__tests__/toggle-button.js';import React from 'react';
                                                                                                                                                                                                    ^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
          at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:188:7)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.908s
Ran all test suites.

Steps to Reproduce (for bugs)

Run the following script (from a directory of your choosing):

mkdir next-preset-issue
cd next-preset-issue
npm init -y
npm install next react react-dom jest babel-preset-env --save
echo "{\"presets\": [\"next/babel\"]}" > .babelrc
echo "import fs from 'fs';test('works', () => {});" > index.test.js
./node_modules/.bin/jest
echo "{\"presets\": [\"next/babel\", \"env\"]}" > .babelrc
./node_modules/.bin/jest

You'll notice that the first invocation of jest will fail with the error above, but the second (after adding the env preset has been added) will succeed.

Context

I'm making a course for glamorous and I want to show how to do server rendering and testing. Next.js is the obvious choice, but I want to make sure I'm doing things properly and no more than necessary. If it's necessary to add the env preset that's fine, but I want to make sure that I understand why it's necessary.

Your Environment

| Tech | Version |
|---------|---------|
| next | v3.2.1 |
| node | v8.3.0 |
| OS | macOS |
| browser | N/A |

Thanks!

Source

kentcdodds

Most helpful comment

Here's the PR: https://github.com/zeit/next.js/pull/2911

kentcdodds on 5 Sep 2017

👍2

All 7 comments

Oh, by the way, here's a PR that removes the env plugin from my demo repo and reveals the issue in my specific use case: https://github.com/kentcdodds/glamorous-with-next/pull/1

kentcdodds on 3 Sep 2017

Do you try this?

"env": {
    "production": {
      // somting babel
    }
  }

thinnakrit on 3 Sep 2017

I did not, but I don't think that I should have to...

kentcdodds on 3 Sep 2017

If that is necessary, I'd love to know why...

kentcdodds on 3 Sep 2017

@kentcdodds Hey :wave: the reason for this is that we use webpack to handle imports/exports so that webpack can do three shaking. So we've disabled the modules bit of preset-env to make sure it doesn't get handled by Babel. Maybe the reason it's like that should be documented in the with-jest example https://github.com/zeit/next.js/blob/master/examples/with-jest