Issue 1:
I tried to add jest to my nextjs app. To do this, I simply added a babelrc file to my project root (see content below). The tests run now but my app won't start anymore.

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

Expected Behavior

npm run dev should start the app

npm test should start jest testing

Current Behavior

When the following babelrc file is added to project root...

{
"env" : {
"test": {
"presets": ["env", "react", "stage-2"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
}

... npm test runs fine but npm run dev fails giving this error:

ERROR Failed to compile with 1 errors 12:28:08

error in ./pages/_document.js?entry

Syntax Error: Unexpected token (29:6)

27 | render() {
28 | return (
> 29 | <html lang={this.props.local.lang_short_value}>
| ^
30 | <Head />
31 | <body>
32 | <Main />

@ multi ./pages/_document.js?entry

{ Error: Cannot find module /web/.next/dist/pages/_document
at _callee$ (/web/node_modules/next/dist/server/resolve.js:220:19)
at tryCatch (/web/node_modules/regenerator-runtime/runtime.js:62:40)
at Generator.invoke [as _invoke] (/web/node_modules/regenerator-runtime/runtime.js:296:22)
at Generator.prototype.(anonymous function) [as next] (/web/node_modules/regenerator-runtime/runtime.js:114:21)
at step (/web/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
at /web/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13
at <anonymous> code: 'ENOENT' }

Reading the docs, I found out that the babelrc file needs "presets": ["next/babel", "env"]. So I changed the babelrc file to this:

{
"env" : {
"dev": {
"presets": ["next/babel", "env"]
},
"test": {
"presets": ["env", "react", "stage-2"],
"plugins": ["transform-export-extensions"],
"only": [
"./**/*.js",
"node_modules/jest-runtime"
]
}
}
}

But this still doesn't work. Did I miss something?

Steps to Reproduce (for bugs)

Use the babelrc and package.json provided

run npm run dev

Context

package.json

{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"test": "jest"
},
"jest": {
"transform": {
"^.+\\.js?$": "babel-jest"
},
"transformIgnorePatterns": [
"!node_modules/react-runtime"
]
},
"devDependencies": {
"babel-jest": "^22.1.0",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.17.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.5.1",
"jest": "^22.1.4",
"react-test-renderer": "^16.2.0"
},
"dependencies": {
"apollo-cache-inmemory": "^1.1.7",
"apollo-client": "^2.2.3",
"apollo-client-preset": "^1.0.8",
"apollo-link": "^1.1.0",
"apollo-link-error": "^1.0.5",
"apollo-link-http": "^1.3.3",
"bcryptjs": "^2.4.3",
"graphql": "^0.12.3",
"graphql-tag": "^2.7.3",
"moment": "^2.20.1",
"next": "^4.2.3",
"node-fetch": "^1.7.3",
"prop-types": "^15.6.0",
"radium": "^0.19.6",
"react": "^16.2.0",
"react-apollo": "^2.0.4",
"react-autosuggest": "^9.3.3",
"react-dom": "^16.2.0",
"react-id-swiper": "^1.5.8",
"react-touch-events": "^2.1.0",
"styled-jsx": "^2.2.4"
}
}

Your Environment

Tech
Version

next
^4.2.3

node
9.3.0

OS
macOS 10.13.3

browser
Chrome

etc
See package.json

What's wrong? :-(

Issue 2:
Note: React-components outside of

will not be initialised by the browser. If you need shared components in all your pages (like a menu or a toolbar), do not add application logic here, but take a look at this example. https://github.com/zeit/next.js/tree/master/examples/layout-component

OK. But it very useful.

The layout inside the component is created every time a page is moved to a new page. But the layout should not be created every time you go to a new page.

Also, the layout should have an asynchronous initialization method.

Ideally, it would be possible to create several layouts and set the current layout in the component page.