Since we are now using webpacks `mode` flag we can get rid of:
* `webpack.optimize.ModuleConcatenationPlugin`
* `webpack.DefinePlugin` (`process.env.NODE_ENV`)
https://webpack.js.org/concepts/mode/
* Add test for /_next/development route
* Make sure useFileSystemPublicRoute: false only disables filesystem routing
* Bring back comment
* Add useFileSystemPublicRoutes tests
Fixes#5125
I'm not sure if this is a bug in babel-loader / babel-core or not. But this will at least temporary fix it till I hear back from @loganfsmyth 🙏
you folks should really use semver ranges, but since greenkeeper
is no longer running for this branch things have fallen behind
in particular, there seems to be an incompatibility with multiple
v2.x versions of this package in the same bundle as displayed here:
styled-components/styled-components#1972
When I force resolution to a particular h-n-r-s version, the issue
goes away. This is true for both next 6 and next 7 canary.
Probably an oversight but currently env preset's `modules` option always evaluates to 'auto'. We probably want it to be set to false, especially in prod, to have Webpack handle modules natively.
Though it sounds like some folks do run getDataFromTree() on the client in order to avoid loading states, it's non-standard usage and potentially confusing. Also it's inconsistent with the other with-apollo examples.
The `with-flow` sample has some obsolete definitions which are unused by the sample code. Removing the un-imported declarations is the easiest approach.
Hi
In the current version of the example __custom-server-typescript__, types are never checked.
For instance, change the following line :
```
const dev = process.env.NODE_ENV !== 'production'
```
by :
```
const dev: number = process.env.NODE_ENV !== 'production'
```
then run `npm run dev`. The application launches perfectly, no error is thrown.
In dev environnement, it is preferable to check types all the time, to get immediate feedback. This PR activates type checking. Only when using nodemon, so no impact on production.
Now the above code will (rightfully) refuse to compile :
```
TSError: ⨯ Unable to compile TypeScript
server/index.ts (6,7): Type 'boolean' is not assignable to type 'number'
```
@timneutkens
This simple change seems to work for me:
```
const ignored = [
'**/.*',
'node_modules'
]
```
I believe the regex is used here to try and work on windows as well. So, I wasted a bunch of time trying to figure out how to use a regex and/or the `path` module to ignore the parent directories until I noticed the following:
> glob patterns are not filepaths. They are a type of regular language that is converted to a JavaScript regular expression. Thus, when forward slashes are defined in a glob pattern, the resulting regular expression will match windows or POSIX path separators just fine.
this is from the [anymatch](https://github.com/micromatch/anymatch) documentation which is what webpack uses accoring to this:
https://webpack.js.org/configuration/watch/#watchoptions-ignored
I've verified this glob pattern solves the problem in my environment, can someone test and verify that this works on windows?
👍
I simplified the example by removing `.eslintrc.js` and related packages, as well as `nodemon`.
I also added a description in the README to address the question by @kachkaev in the original pull request (#4163).
I think I accidentally deleted the branch my prior PR was based on before you had a chance to merge or decide whether to merge. In case I borked things with that delete, I'm resubmitting the PR and figuring you can close one or the other or both as desired.
Original notes:
Based on with-mobx-state-tree, but typescript instead of javascript
Aside from a few bits of typing and renaming .js files to .ts and .tsx, most of the the edits are to avoid warnings and errors when running the code through tslint (which can be done via the `npm run tslint` command in the example if desired).
To keep this example simple, the `<styled>` component (which is used by the javascript-based with-redux and with-mobx-state-tree examples for the clock component) is not used in this example. The `<styled>` library can of course be used with typescript but (I think) it requires a more complicated set of typescript and babel .configs than is needed for most other components and libraries, so I'm just directly styling the one formerly `<styled>` div to keep things simple and broadly applicable.
Related #4659
Adds the possibility for users to copy files inside of `exportPathMap`. This allows for adding `robots.txt` `sitemap.xml` etc. another use case is for https://github.com/hanford/next-offline, currently it's manually reading the buildId in `exportPathMap`.
To allow users to do this we'll introduce a new parameter holding an object with the following keys:
- `dev` - `true` when `exportPathMap` is being called in development. `false` when running `next export`. In development `exportPathMap` is used to define routes and behavior like copying files is not required.
- `dir` - Absolute path to the project directory
- `outDir` - Absolute path to the `out` directory (configurable with `-o` or `--outdir`). When `dev` is `true` the value of `outDir` will be `null`.
- `distDir` - Absolute path to the `.next` directory (configurable using the `distDir` config key)
- `buildId` - The buildId the export is running for
Example usage:
```js
// next.config.js
const fs = require('fs')
const {join} = require('path')
const {promisify} = require('util')
const copyFile = promisify(fs.copyFile)
module.exports = {
exportPathMap: async function (defaultPathMap, {dev, dir, outDir, distDir, buildId}) {
if(dev) {
return defaultPathMap
}
// This will copy robots.txt from your project root into the out directory
await copyFile(join(dir, 'robots.txt'), join(outDir, 'robots.txt'))
return defaultPathMap
}
}
```
> Workspaces are a new way to setup your package architecture that’s available by default starting from Yarn 1.0. It allows you to setup multiple packages in such a way that you only need to run yarn install once to install all of them in a single pass.
- [x] Tested in development mode
- [x] Tested in production mode
- [x] Tested with deployment https://with-yarn-workspaces-hwzubdlkul.now.sh/
- [x] Added transpile module example
Closes#3638
Pulling out a few core points from the readme...
This example builds from /src into /dist, managing the different expectations of express.js (es5, commonjs) and next.js (es6) by using a pair of tsconfig.json files, both of which are run by `npm run build-ts` or any of the other npm targets.
Hot module reloading is largely but not completely wired up (nodemon is watching /dist but tsc isn't set up to watch /src and transpile changes in /src to /dist automatically (that's mainly because I wasn't sure how to start both nodemon and a pair of tsc watchers and be confident all would get shut down when the user killed dev mode). The readme suggests running `npm run build-ts` manually in another window to push changes from /src into /dev and on into the browser.
tslint is also wired up via `npm run tslint`
## Minor changes
When `NODE_ENV=test` is used we'll now apply the `'auto'` configuration for modules transformation. Which causes Babel to check if the current environment needs to be transformed or not. In practice this means that the following `.babelrc` is not needed anymore:
**OLD**:
```json
{
"env": {
"development": {
"presets": ["next/babel"]
},
"production": {
"presets": ["next/babel"]
},
"test": {
"presets": [["next/babel", { "preset-env": { "modules": "commonjs" } }]]
}
}
}
```
**NEW**:
```
{
"presets": ["next/babel"]
}
```
## Patches
`@babel/preset-react` has a `development` option that automatically applies a development-time plugin we manually applied before (`@babel/plugin-transform-react-jsx-source`). It also adds another development-time plugin that is said to make debugging/errors clearer: `@babel/plugin-transform-react-jsx-self` which we didn't apply before. Overall this means we can take advantage of preset-react to provide these plugins.
