### move all access to built pages into worker pool
to allow parallelizing and avoid loading the bundles in the main thread
This improves performance of the static check step a bit and helps reducing memory load in main thread
### enable splitChunks for server build in webpack 5
This improves performance for static generation by loading less code due to reduced duplication
This regex is no longer needed since it no longer matches with the strip-ansi version that is bundled with Next.js
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This improves long term caching by avoiding hash changes
workaround fix#25013
The real problem is fixed by #24573
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
This fixes ie11 compatibility that broke in https://github.com/vercel/next.js/pull/24656 from the polyfills not being loaded first, our existing ie11 test caught this but was failing, this ensures the test is passing again. This also updates the `hrefValue` optional chaining in the eslint plugin as these files aren't transpiled and related tests were failing in azure
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
* fix check in externals that validate if the require is resolve-able for the server
* performance improvements
Fixes#23130
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
* update webpack to 5.36.2
* use dependOn to optimize chunks
* disable vendor splitting for main and _app chunks
=> decreases bundle size in general, gets rid of the 2 extra vendor chunks shared by all pages.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This is the image component implementation of the blurry placeholder as described in #24004. The matching server side implementation is currently planned.
## Feature
- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issue #18858
- [x] Integration tests added
(Documentation and telemetry to follow after server side is implemented)
* Try enabling Babel turbo mode
* Pass config file explicitly to babel turbo loader.
* Update NextBabelLoaderOptions to use `configFile` instead of `babelrc`.
* Re-add support for options passed to next/babel preset with new babel loader.
* Load babel config files depending on their file extension.
* Include `next/babel` if no Babel config is provided.
* Minor cleanup.
* Avoid duplicate `next/babel` entries.
* No need to pass configFile anymore.
* Fix multiple small issues in merging loader opts with cached config.
* Remove redundant logging (that also breaks a test).
* Include file extension CharacteristicsGermaneToCaching.
* bump
* Disable turboMode now that tests pass
Co-authored-by: Dale Bustad <dale@divmain.com>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This expands on https://github.com/vercel/next.js/issues/24070 and ensures we show the dev overlay for additional cases like where `_app` or `_document` have syntax errors causing compilation to not be able to complete. This achieves showing the dev overlay even when compilation fails from a syntax error by doing a third minimal compilation in development with the needed client-side assets to render the dev overlay.
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
x-ref: https://github.com/vercel/next.js/issues/24070
This PR addresses the potential for memory leakage with the previous caching scheme; it should also be more efficient, resulting in fewer instances where a fresh Babel config must be generated. Documentation has been added, and `overrides` have been removed in favor of conditional plugins for consistency.
This approach is easier to break, in that `CharacteristicsGermaneToCaching` must be correct for all cases. However, it means that <= 8 configs will need to be generated within the context of a single thread, and the config-caching is about as fast as we can get it.
* import next-server logic during the time the configuration is loaded
* load minimizer plugins only when used
* load ReactDevOverlay only when used
* load only meta information of tsconfig for validation
* make worker for configuration loading lighter
* only load runTypeCheck when used
* load postcss config only when used
@timneutkens it'd be great to get your input.
These changes introduce a new Babel loader that eliminates much of the existing overhead, resulting in better HMR speeds.
Multithreading is still in flight, and may be omitted if speed improvements end up being negligible. For now, the new loader is hidden behind an `experimental` flag.
Items to be completed before this PR is ready to merge:
- [x] reconfigure `ncc` to precompile the parts of `@babel/core` and `@babel/traverse` that we're accessing directly
- [x] change `@babel/core/...` imports to `ncc`ed version
- [x] ~~measure multithreading (not currently pushed) functionality, and include the functionality depending on the results~~ I'll open a separate PR for this
- [x] ensure TypeScript is happy with all imports as final step (`--no-verify` was used to bypass)
There will be two follow-up PRs:
- loader support for projects with custom `.babelrc`
- multithreaded loader (should the change we warranted after measurement)
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Fixes: #23716
This adds support for returning an object from `rewrites` in `next.config.js` with `beforeFiles`, `afterFiles`, and `fallback` to allow specifying rewrites at different stages of routing. The existing support for returning an array for rewrites is still supported and behaves the same way. The documentation has been updated to include information on these new stages that can be rewritten and removes the outdated note of rewrites not being able to override pages.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
Brings back the remaining Node.js module polyfills to not break existing apps upgrading from webpack 4 to webpack 5.
Fixes#23169
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
## Documentation / Examples
- [ ] Make sure the linting passes
This PR attempts to provide an option to allow importing TS/TSX from outside of the current Next.js project root directory. Although this goes against the design decision that no source code should be imported from outside of root and [might bring tons of issues](https://github.com/vercel/next.js/issues/19928#issuecomment-741596557), it will still be helpful in some monorepo use cases.
This PR assumes that the external files are following the same language syntax rules and under the same tooling versions as the source code inside your project root. And it's also not allowed to enable the `baseUrl` feature in the external directory (as the project should only have 1 import base URL).
X-ref: #9474, #15569, #19928, #20374.
This allows to use `__NEXT_WEBPACK_LOGGING` to enable verbose webpack logging output to investigate into performance and cache problems.
`__NEXT_WEBPACK_LOGGING=1` enables some basic logging
`__NEXT_WEBPACK_LOGGING=infrastructure` enables only infrastructure logging
`__NEXT_WEBPACK_LOGGING=profile-client` enables deep profile output of the client build
`__NEXT_WEBPACK_LOGGING=profile-server` same for the server
`__NEXT_WEBPACK_LOGGING=profile-client,infrastructure` combines multiple things
* this will fix problems with serverless target which doesn't use a runtime chunk
* It also omit env vars from contributing to cache version as webpack will handle that now
* It moves the webpack-runtime chunk from ./chunks back to ./
This updates to output server chunks to a nested folder to prevent bundling the entire folder when tracing. This also fixes the webpack 5 tests not actually using webpack 5 since https://github.com/vercel/next.js/pull/22583 since the webpack 5 enabling check didn't account for the test environment variable used to enable webpack 5. This also clears up some deprecation warnings from webpack 5 in the mini-css-extract-plugin.
Fixes: https://github.com/vercel/next.js/issues/21297
This pull request ensures the webpack hook is installed before an attempt is made to load the configuration.
This pull request is tested by the PnP tests, which should now be passing as a result of this change.
---
Fixes#21679
This implements the compatibility require hook as per https://github.com/vercel/next.js/issues/21789.
The hook is applied at the point of webpack initialization. In addition the separate packages are exposed for the various webpack subrequires.
The test then ensures instance equality for the basic require hook from the next.js config file.
I suspect this might have bad interactions with Yarn Pnp support, but maybe we will be lucky.
This pull request adds `future.strictPostcssConfiguration`, allowing users to opt-into the more strict PostCSS configuration loading.
This stricter PostCSS configuration loading ensures that CSS can be cached across builds.
This PR fixes a bug where `next/babel` would accidentally enable development transforms for a production build (`next build`).
This is tested by the two updated unit tests (which removed a workaround for this bug, and one now properly enables dev transforms).
---
Fixes#18929Fixes#19001
x-ref #19046
x-ref #17032
Fixes: https://github.com/vercel/next.js/issues/15278
> Bug report
> When using next dev with emacs, as you develop, emacs creates symbolic link files starting with .# as lock files. Next.js seems to attempt to load these but fails, spewing out errors constantly.
Prevents dev server from crashing when emacs creates lockfiles
tested with:
- GNU Emacs 27.1
- OSX 11.1
- Node v15.4.0
This removes `import type` usage from our core files since `import type` requires a higher TypeScript version than currently expected.
Fixes: https://github.com/vercel/next.js/issues/19300
There's currently two bugs with the font optimization, but we'd really like to ship a stable version.
To unblock the stable release, we're **temporarily** reflagging this. It'll be unflagged on canary again!
Nitpicky change, but the version string contained a double `|`, implying that there might be an empty value between `process.env.__NEXT_VERSION` and the environment variables.
* make the error message more clear if webpack config comes back undefined
* Update check and add test
* bump
* Update build-output test
Co-authored-by: JJ Kasper <jj@jjsweb.site>
This PR removes the modern mode experiment because:
- It does not yield meaningful bundle size wins when compared to other initiatives we've taken
- It's not compatible with webpack 5 (which we're upgrading to)
- It's currently broken and causes most apps to malfunction
- There's no champion currently owning the experiment
We can re-introduce this in the future when we'd like to make it a default for all Next.js apps.
Note: **Next.js still supports Differential Loading (`nomodule`) and does it by default.** This PR strictly removes the experimental modern _syntax_, and does not disable our existing modern/legacy polyfilling.
---
Fixes#19200Fixes#18960Fixes#14707Fixes#14465
This upgrades to ncc@0.25.0 and fixes the previous bugs including:
* ncc not referenced correctly in build
* Babel type errors
* node-fetch, etag, chalk and raw-body dependencies not building with ncc - these have been "un-ncc'd" for now. As they are relatively small dependencies, this doesn't seem too much of an issue and we can follow up in the tracking ncc issue at https://github.com/vercel/ncc/issues/612.
* `yarn dev` issues
Took a lot of bisecting, but the overall diff isn't too bad here in the end.
This adds inlining for Babel and the Babel plugins used in next.
This is based to the PR at https://github.com/vercel/next.js/pull/18823.
The approach is to make one large bundle and then separate out the individual packages from that in order to avoid duplications.
In the first attempt the Babel bundle size was 10MB... using "resolutions" in the Yarn workspace to reduce the duplicated packages this was brought down to a 2.8MB bundle for Babel and all the used plugins which is exactly the expected file size here.
This will thus add a 2.8MB download size to the next package, but save downloading any babel dependencies separately, removing a large number of package dependencies from the overall install.
This does two things:
- Rename `iconSizes` to `imageSizes`.
- Give priority to `imageSizes` regardless of `deviceSizes` as a means to opt-out of the srcset behavior.
This separates the `next.config.js` property `images.sizes` into to properties: `images.deviceSizes` and `images.iconSizes`.
The purpose is for images that are not intended to take up the majority of the viewport.
Related to #18122
This makes sure that we detect the correct default locale for domain specific locales since a domain can have a different default locale residing at the root and we need to check this on the client for prerendered/auto-static pages. This also makes sure we disable the built-in redirect handling when on Vercel since it's handled already.
Tests for this are tricky since we need to load the browser with a custom domain which requires editing the host file. Existing tests should ensure this doesn't break non-domain specific locale behavior though. This was also tested manually while testing https://github.com/vercel/vercel/pull/5298
x-ref: https://github.com/vercel/next.js/pull/17370
This adds the initial changes outlined in the [i18n routing RFC](https://github.com/vercel/next.js/discussions/17078). This currently treats the locale prefix on routes similar to how the basePath is treated in that the config doesn't require any changes to your pages directory and is automatically stripped/added based on the detected locale that should be used.
Currently redirecting occurs on the `/` route if a locale is detected regardless of if an optional catch-all route would match the `/` route or not we may want to investigate whether we want to disable this redirection automatically if an `/index.js` file isn't present at root of the pages directory.
TODO:
- [x] ensure locale detection/populating works in serverless mode correctly
- [x] add tests for locale handling in different modes, fallback/getStaticProps/getServerSideProps
To be continued in fall-up PRs
- [ ] add tests for revalidate, auto-export, basePath + i18n
- [ ] add mapping of domains with locales
- [ ] investigate detecting locale against non-index routes and populating the locale in a cookie
x-ref: https://github.com/vercel/next.js/issues/17110
On the latest beta of webpack 5 resolving fails with the below error and according to https://github.com/webpack/webpack/issues/11467 is due to the imports in this module not being fully specified. This adds the config mentioned in the thread to correct the resolving for this module.
```sh
Failed to compile.
--
16:33:50.046 | ModuleNotFoundError: Module not found: Error: Can't resolve './assertThisInitialized' in '/vercel/f03cc85/node_modules/@babel/runtime/helpers/esm'
16:33:50.046 | > Build error occurred
16:33:50.047 | Error: > Build failed because of webpack errors
16:33:50.047 | at build (/vercel/f03cc85/node_modules/next/dist/build/index.js:15:918)
16:33:50.099 | error Command failed with exit code 1.
```
Earlier today #17038 was merged which I opened to fix a problem when using `webpack@5.0.0-beta.30` with Next.js using the new Webpack 5 support. In that PR, the only change was the renaming of a configuration key. I later discovered that the change on the Webpack side was different than I initially thought, and this meant that the fix I submittted to Next.js didn't work.
This PR intends to fix the remaining problems. Webpack 5 now accepts a `environment` key that can be used to configure the target output. Previously, this was known as `ecmaVersion` and accepted a number. Now, `environment` accepts a configuration object with individual options. I've configured this in such a way where it resembles an ES5 environment:
```js
environment: {
arrowFunction: false,
bigIntLiteral: false,
const: false,
destructuring: false,
dynamicImport: false,
forOf: false,
module: false,
}
```
This PR fixes#17035. As described in the issue, there was a breaking change in `webpack@5.0.0-beta.30`: `output.ecmaVersion` was replaced by `output.environment`. This meant Next.js apps using this `webpack` version would break. This PR updates the relevant Webpack config.
I think this will break any apps that are still using `webpack@5.0.0-beta.29`, but I don't know whether that is a problem as this is a beta feature. If it is, I'd love it if someone could let me know how to detect beta versions in the code so I can make it backwards-compatible.
Handles:
- Next.js version
- next.config.js `env` key
- `NEXT_PUBLIC_` prefixed environment variables
- next.config.js keys that affect performance
Ideally we don't invalidate the whole cache when `NEXT_PUBLIC_` / `env` key variables change, but this is just to initially make the caching reliable, this behavior is similar to the current webpack 4 behavior, so it can only be improved 👍
Don't use this yet as it's still being developed. This is a first iteration that enables the webpack cache. There's still more to do here, for example if css modules are used there's currently a bug where webpack does not save the cache for browser compilation (impacting build performance). @sokra is going to look into that issue.
This adds the following Node.js core polyfills only when the import is used:
- `path`
- `stream`
- `vm`
- `crypto`
- `buffer`
Fixes#15948
We'll have a separate issue about adding warnings for the usage of these modules in the browser, some polyfills like crypto are quite heavy and generally not needed for most applications (included accidentally through node_modules).
This PR adds a second experimental post-processing step for the framework introduced by @prateekbh in #14746. The image post-processing step scans the rendered document for the first few images and uses a simple heuristic to determine if the images should be automatically preloaded.
Analysis of quite a few production Next apps has shown that a lot of sites are taking a substantial hit to their [LCP](https://web.dev/lcp/) score because an image that's part of the "hero" element on the page is not preloaded and is getting downloaded with lower priority than the JavaScript bundles. This post-processor should automatically fix that for a lot of sites, without causing any real performance effects in cases where it fails to identify the hero image.
This feature is behind an experimental flag, and will be subject to quite a bit of experimentation and tweaking before it's ready to be made a default setting.
Next.js plugins like `@next/mdx` inject additional webpack loaders to compile files, but they omit the necessary loader for Fast Refresh to work.
Instead of making these files deopt out of Fast Refresh, we can automatically detect and inject the loader in these cases.
Fixes#13574
In terms of url rewriting, `trailingSlash` supports everything `exportTrailingSlash` does. We can just share all other code paths and deprecate `exportTrailingSlash`.
This PR shows a deprecation warning when `exportTrailingSlash` is used.
Also fixes https://github.com/vercel/next.js/issues/15774
We can update the tests now or later. (I kept them the same to prove it's non-breaking)
To do:
- [x] Do we want to keep this? => nope 841d4efc51/packages/next/next-server/lib/router/router.ts (L329)
- [x] I kept `exportTrailingSlash` here. Do we want to rename that as well? => nope 2d9d649d49/packages/next/build/index.ts (L959)
- Use latest terser version (still 1 warning in the stable version which is an open PR)
- Add emitOnErrors instead of noEmitOnErrors
- Added trace-deprecations for Next.js core development
- Using `namedChunks` where possible, this will also allow for faster access to the chunks as we no longer have to look them up like we did before using `find`
- Using the new asset hooks introduced in the latest webpack beta
- Using the new externals function signature
I think this is necessary for IE11.
via [Webpack docs](https://webpack.js.org/migrate/5/#turn-off-es2015-syntax-in-runtime-code-if-necessary)
> By default, webpack's runtime code uses ES2015 syntax to build smaller bundles. If your build targets environments that don't support this syntax (like IE11), you'll need to set output.ecmaVersion: 5 to revert to ES5 syntax.
Thank you
Found while working on figuring out this bug: https://twitter.com/timneutkens/status/1282129714627448832
I noticed that the node_modules got passed by the ignore still because when chokidar identifies a ignore pattern is a glob it treats the glob as-is instead of appending `/**` to the glob
Removed Option to enable `ReactProductionProfiling` from configuration and added a CLI switch for the same.
Users can now do `next build --profile` to enable react production profiling.
Also added a warning to notify users about the performance impact
Fixes: #14688
This updates the scroll position saving to occur as the scroll position changes instead of trying to do it when the navigation is changing since the `popState` event doesn't allow us to update the leaving history state once the `popState` has occurred.
The order of events that was previously attempted to save scroll position on a `popState` event (back/forward navigation)
1. history.state is already updated with state from `popState`
2. we replace state with the currently rendered page adding scroll info
3. we replace state again with the `popState` event state overriding scroll info
Using this approach the above event order is no longer in conflict since we don't attempt to populate the state with scroll position while it's leaving the state and instead do it while it is still the active state in history
This approach resembles existing solutions:
https://www.npmjs.com/package/scroll-behaviorhttps://twitter.com/ryanflorence/status/1029121580855488512
Fixes: https://github.com/vercel/next.js/issues/13990Fixes: #12530
x-ref: https://github.com/vercel/next.js/pull/14075
Closes [13709](https://github.com/vercel/next.js/issues/13709).
The solution works, **(tested and confirmed with true and false flags with the latest next version)** though I am quite sure this is not the most elegant and proper way to implement it. I have spent the good part of yesterday and today's morning in order to make it more generic but since it's my first time working with anything related to webpack I have struggled miserably. Last, but not least I'm unsure if this is the most proper naming for the flag.
Please, let me know what you want me to change and I'll get it done asap.
Warn users and revert their `devtool` when they manually change the `devtool` in development mode. For this addition, I check to ensure the `devtool` is custom (i.e. different than what is set by Next) and has a value (`false` is fine as a custom `devtool`!).
As described in [this issue (13963)](https://github.com/vercel/next.js/issues/13963), changing the `devtool` in development mode can cause issues with performance.
Fixes#13963
Not sure if it's still there for a reason, but from the types for `NoEmitOnErrorsPlugin`
```js
/* @deprecated use config.optimization.noEmitOnErrors */
```
Initial PR to make `next build` work with webpack 5, still needs more work to make sure runtimeChunk and such are shared between pages.
- No longer needs the custom ChunkNamesPlugin as the default behavior was changed
- Dropping AMP First client page bundles is now compatible
Updates the way filenames are generated for browser compilation.
Notably:
- All entry bundles now have hashes in production, this includes pages (previously pages used a buildId in the path)
- The AmpFiles no longer depends on hardcoded bundle names, it uses the buildManifest instead (internals)
- All cases where we match the page name from the chunk/entrypoint name now use the same function `getRouteFromEntrypoint` (internals)
- In development we no longer include the "faked" `buildId` set to `development` for page files, instead we just use the `/_next/static/pages` path (was `/_next/static/development/pages`). This was changed as it caused unneeded complexity and makes generating the bundles easier (internals)
- Updated tons of tests to be more resilient to these changes by relying on the buildManifest instead of hardcoded paths (internals)
Follow up of these PRs:
https://github.com/vercel/next.js/pull/13759https://github.com/vercel/next.js/pull/13870https://github.com/vercel/next.js/pull/13937https://github.com/vercel/next.js/pull/14130https://github.com/vercel/next.js/pull/14176https://github.com/vercel/next.js/pull/14268Fixes#6303Fixes#12087Fixes#1948Fixes#4368Fixes#4255Fixes#2548
This removes remaining references to `granularChunks` in configs, error messages, and comments.
Also removed the `process.env.__NEXT_GRANULAR_CHUNKS` value.
---
Follow up to: https://github.com/vercel/next.js/pull/13663
Was going through _document and noticed some variable shadowing going on. Added a rule for it to our eslint configuration and went through all warnings with @Timer.
This removes `fork-ts-checker-webpack-plugin` and instead directly calls the TypeScript API.
This is approximately 10x faster.
Base build: 7s (no TypeScript features enabled)
- `fork-ts-checker-webpack-plugin@3.1.1`: 90s, computer sounds like an airplane
- `fork-ts-checker-webpack-plugin@4.1.6`: 84s, computer did **not** sound like an airplane
- `fork-ts-checker-webpack-plugin@5.0.0-alpha.14`: 90s, regressed
- `npx tsc -p tsconfig.json --noEmit`: 12s (time: `18.57s user 0.97s system 169% cpu 11.525 total`)
- **This PR**: 22s, expected to get better when we run this as a side-car
All of these tests were run 3 times and repeat-accurate within +/- 0.5s.
The experimental modern mode runs the type checking plugin twice, which **occasionally** suffers from a race condition that hangs the build.
This PR fixes type checking to only be run once.
While this test cannot 100% reproduce/capture the race condition, I don't feel strongly about the test case:
- We're planning on eliminating this type checking plugin ASAP (for a faster alternative)
- Modern mode implementation as-is will probably go away with webpack 5
Adding a conformance plugin the make sure users don't undo the benefits of the granularChunks config.
The plugin makes sure that minSize, maxInitialRequests values aren't overridden. Also ensures the cacheGroups - vendors, framework, libs, common, shared are maintained.
The warning and error messages do not break the build with this change. They only display a message.
cc - @prateekbh, @atcastle
* Disable PnP plugin in webpack 5
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Use full hashes for hot update names
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Disable autodll in webpack 5
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Disable HashedModuleIdsPlugin in webpack 5
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Use regexes for ignoreplugin as it only supports regexes in webpack 5
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* webpack 4 supports resourceRegExp and contextRegExp
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Remove webpack 4 specific properties from the webpack 5 config
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Add library option for webpack 5 support
Co-Authored-By: Zack Jackson <zackary.l.jackson@gmail.com>
* Fix TypeScript Errors
Co-authored-by: Zack Jackson <zackary.l.jackson@gmail.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* Add initial process.env stubbing for new env support
* Fix server process.env being stubbed in production
* bump
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* Add basePath in link component and add/remove it consistently
* Update to not use regex for delBasePath
* Expose addBasePath as router method
* Revert "Expose addBasePath as router method"
This reverts commit 40fed596195c6affabf837e42d472452768e13a3.
* Expose basePath as router field
* Apply suggestion
* Expose basePath as router field
* remove un-used vars
* Update externals
* Apply lint fix
* Update size-limit test
* Update prefetch
* Add initial support for new env config file
* Fix serverless processEnv call when no env is provided
* Add missing await for test method
* Update env config to .env.json and add dotenv loading
* ncc dotenv package
* Update type
* Update with new discussed behavior removing .env.json
* Update hot-reloader createEntrypoints
* Make sure .env is loaded before next.config.js
* Add tests for all separate .env files
* Remove comments
* Add override tests
* Add test for overriding env vars based on local environment
* Add support for .env.test
* Apply suggestions from code review
Co-Authored-By: Joe Haddad <joe.haddad@zeit.co>
* Use chalk for env loaded message
* Remove constant as it’s not needed
* Update test
* Update errsh, taskr, and CNA template ignores
* Make sure to only consider undefined missing
* Remove old .env ignore
* Update to not populate process.env with loaded env
* Add experimental flag and add loading of global env values
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* Add support for tsconfig/json `paths` option
* Add tests for paths in tsconfig.json
* Don't apply aliases when paths is empty
* Clean up unused methods and link to TypeScript license
* Add tests for jsconfig
* Put feature under an experimental flag
* Enable to see if tests pass
* Update types
* Add feature under an experimental flag
* Add support for SCSS includePaths
* Support sassOptions instead of just includePaths
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* Adding native-url package
* Bumping native-url version
* Upgrading native-url
* Logging stats object for debugging
* Logging stats object for debugging
* Adding try catch to the error lines
* Experimenting with regex
* Experimenting with regex
* Experimenting with regex
* Testing regex changes
* Fixing defer-script test case to not include polyfill.js
* Meging changes with existing polyfill work
* Bumping version
* adjust webpack config
* Reduce size in size test
* Remove 1kb from legacy
* Bumping native-url version, includes fix for IE11
* Update lock file
* Updating native-url, fixes issue on IE11
* Fix sourcemap being added in document
* Adding Router as an app level dep. Fixes Router not being added as a dep to pages without Link when granularChunks is enabled
* Fix typescript error
* Fix modern + granularChunks hydration failing
* Fix TS error
* Update native-url version
* Adding native-url with safari fix
* Update url-polyfill in polyfill-nomodule package
* Remove url-polyfill from next package.json
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Adding native-url package
* Bumping native-url version
* Upgrading native-url
* Logging stats object for debugging
* Logging stats object for debugging
* Adding try catch to the error lines
* Experimenting with regex
* Experimenting with regex
* Experimenting with regex
* Testing regex changes
* Fixing defer-script test case to not include polyfill.js
* Meging changes with existing polyfill work
* Bumping version
* adjust webpack config
* Reduce size in size test
* Remove 1kb from legacy
* Bumping native-url version, includes fix for IE11
* Update lock file
* Updating native-url, fixes issue on IE11
* Fix sourcemap being added in document
* Adding Router as an app level dep. Fixes Router not being added as a dep to pages without Link when granularChunks is enabled
* Fix typescript error
* Fix modern + granularChunks hydration failing
* Fix TS error
* Update native-url version
* Adding native-url with safari fix
Co-authored-by: Tim Neutkens <tim@timneutkens.nl>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Remove ts-ignore where possible
And replace by typecasts
* More accurate types
* bend cliententries in a correct shape earlier on
* comment becomes unnecessary
* add webpack overload to allow for the next.js use case
* Avoid changing public interface
Co-authored-by: Joe Haddad <timer150@gmail.com>
* Optimize Prefetching
* fix css client nav test
* fix preload viewport test
* fix production test
* patch tests more
* Make page loader wait on prefetch
* no unhandled rejection
* Save some bytes
* WIP
* Move data experiment
* Do not throw away rules
* Remove test code
* Correct next data behavior
* Add support for async composing
* Remove unnecessary workaround
* Rename Field
* Adding native-url package
* Bumping native-url version
* Upgrading native-url
* Logging stats object for debugging
* Logging stats object for debugging
* Adding try catch to the error lines
* Experimenting with regex
* Experimenting with regex
* Experimenting with regex
* Testing regex changes
* Fixing defer-script test case to not include polyfill.js
* Meging changes with existing polyfill work
* Bumping version
* adjust webpack config
* Reduce size in size test
* Remove 1kb from legacy
* Polyfilling fetch and object-assign
* Polyfilling corejs object-assign
* Adding object-assign in polyfills.js. IE11 does not support Object.assign
* Fixing failing test
* Updating object.assign polyfill to fix aliasing
* Updating test case value to match new build stats
* Increasing the size of default build to 225kb
* Fixing defer-script test case to not include polyfill.js
* Revert README.md
* Re-design the polyfill approach based on PR feedback
* Adding comment and fixing test case
* Rename polyfills chunk
* Extract aliases into helper
* Remove extra new line
* Fix TypeScript typings
* Adding _internal_fetch alias
* Adjust build manifest plugin
* Build manifest plugin changes - adding a separate entry for polyfills
* Rename polyfills entry in build-manifest.json
* Remove old comment
* Fix TS
* Set key
* Polyfills already added
* Filtring polyfill.module.js
* Fix test
* Add __internal_fetch to alias rule
* Adjust name
* bump size
* ignore polyfills
* sigh
* Aliasing Object.assign
* Mergin latest changes
* Integration test for polyfilling fetch
* Remove comment
* Fix prettier error
* Fix review comments
* Fix review comments
* Update fetch.js
* Fix tests
* Polyfilling fetch and object-assign
* Polyfilling corejs object-assign
* Adding object-assign in polyfills.js. IE11 does not support Object.assign
* Fixing failing test
* Updating object.assign polyfill to fix aliasing
* Updating test case value to match new build stats
* Increasing the size of default build to 225kb
* Fixing defer-script test case to not include polyfill.js
* Revert README.md
* Re-design the polyfill approach based on PR feedback
* Adding comment and fixing test case
* Rename polyfills chunk
* Extract aliases into helper
* Remove extra new line
* Fix TypeScript typings
* Adding _internal_fetch alias
* Adjust build manifest plugin
* Build manifest plugin changes - adding a separate entry for polyfills
* Rename polyfills entry in build-manifest.json
* Remove old comment
* Fix TS
* Set key
* Polyfills already added
* Filtring polyfill.module.js
* Fix test
* Add __internal_fetch to alias rule
* Adjust name
* bump size
* ignore polyfills
* sigh
* Add initial bit for plugins
* Add checks for needed metadata values
* Add test
* Initial plugins changes
* Add handling for _app middleware
* Add loading of _document middleware and
handling of multiple default export syntaxes
* Fix insert order for middleware member expression
* Remove early return from middleware plugin from testing
* Add tests for current plugin middlewares
* Update test plugin package.json
* Update handling for class default export
* Update to use webpack loader instead of babel
plugin, remove redundant middleware naming, and add field for required env for plugins
* Add middleware to support material-ui use case
and example material-ui plugin
* Update tests and remove tests stuff from google analytics plugin
* Remove old plugin suite
* Add init-server middleware
* Exit hard without stack trace when error in collecting plugins
* Add on-error-client and on-error-server and update
to run init-server with next-start in serverless mode
* Update init-client for google analytics plugin
* Add example Sentry plugin and update with-sentry-simple
* Remove middleware field/folder and use src dir for plugins
* Add post-hydration middleware and update
material-ui plugin
* Put plugins code behind flag
* Update chromedriver
* Revert "Update chromedriver"
This reverts commit 1461e978e677f7da05e29e0415ec614a04bf65f9.
* Update lock file
* Remove un-needed _app for sentry example
* Add auto loading of scoped packages, add plugins
config for manually listing plugins, and update
to only collect plugins once
* Update example plugins
* Expose plugins' config
* Rename plugin lifecycles and add babel-preset-build
* Rename other methods with unstable
* Update log when plugin config overrides auto-detecting
* Improve serverless build performance
Next's serverless build uses a custom resolver, injected the via Webpack's `externals` option that delegates out to `resolve-request` to more aggressively pull node modules into the serverless bundles.
When profiling a large Next.js application, I noticed an excessive number of filesystem calls near the end of the build. I narrowed this down to the serverless compiler pass, and eventually the custom resolver function that is the subject of this PR. As it turns out, around half of the calls to the `externals` custom resolver function are for a `request` path that is a relative import. Next doesn't have any specific logic to apply to relative imports - it only needs to special-case bare module resolution.
Adding a simple bypass for relative module resolution reduces the number of blocking filesystem-bound `resolveRequest()` calls by 50% on a certain well-known Next.js website. This also results in a 30% reduction in production build times for incremental builds.
* Explain more in the comment
* Enable granular chunks config for all chunk types
Adding comment
Bug fix
* Update index.test.js
* Update index.test.js
* Fix test cases. Adding next/link to not trigger a different bug
* Removing obsolete comment
* Pass config.experimental.cpus to export during build
Currently, there is no way of specifying the number of worker threads of
`next export` when run as part of `next build`.
I suggest a sane default should be to just use the same amount of
workers that were used during the build process which currently seems to
be configured through `config.experimental.cpus`.
This setting is already respected in the two other places where
jest-workers are in use: The TerserPlugin and the staticCheckWorkers in
`next build`.
* Only enable worker threads if there is more than 1 worker
Multiple worker threads can cause problems when certain dependencies are
being used, see e.g. https://github.com/zeit/next.js/issues/7894
This patch allows disabling of worker threads by setting
`config.experimental.cpus = 1`.
The benefit of spawning 1 worker thread, if there is any at all, should
very limited anyways, so the workload can just as well be processed in
the main thread.
* Disable parallel build for firebase authentication example
* Add integration test to cover #7894
* Rename test suite and add worker_threads config
* Disable worker_threads by default
* Update index.test.js
* Use workerThreads config for TerserPlugin
* Update to use workerThreads config in
TerserPlugin for consistency
* Disable node 12 specific test
* Add a configuration flag to disable integrated type checker
* Add tests for typescript-transpileonly
* Restore removed argument
* Make output more coherent
* Split transpileOnly into ignoreDevErrors and ignoreBuildErrors
* Minor stylistic change
* allow NextScript to optionally defer javascript
* move defer options to experimental feature
* combine defer flags into a single option
* Update deferScripts to work with serverless target
* Add test for defer and async property
* Read the async property
* Check versions of chrome and chromedriver
* Update to chromedriver 76
* Fix test
* Informative Error for Invalid Global CSS
This adds a helpful error message with a (basic) err.sh link for invalid Global CSS usage.
We'll want to expand on this topic more and offer alternatives when CSS Modules support lands.
* Update expected error message
* Monkey patch `next-sass` and `next-less`
These two Next.js plugins use poor webpack practices: they define plugins without resolving themselves.
As a result, the resolution root is unknown by webpack and you get into package hoisting bugs.
To fix this, we emulate the logic these packages should've performed themselves on a best-effort basis.
* Add comments explaining the monkey patch
* Fix comment
* Update packages/next/build/webpack-config.ts
Co-Authored-By: Tim Neutkens <tim@timneutkens.nl>
* Show content as soon as <style> tags are added
* Add fallback removal
* Add test for when unused
* Ensure the function is ES5 compatible
* IE support
* Test it works on broken pages
Source maps should be enabled in development so that original styles can be inspected.
This is in-line with other Next.js behavior (source maps in dev).
* Fix CSS Ordering
This fixes CSS ordering between development and production.
Before this change, globally imported CSS would come _after_ `<style jsx global>` in development, but _before_ in production.
After this change, it'll always be applied before.
* Move to correct element
* Add tests
* Fix obnoxious indents
* Update test/integration/css/fixtures/with-styled-jsx/pages/index.js
Co-Authored-By: JJ Kasper <jj@jjsweb.site>
* Global CSS Support
* Fix webpack configuration
* oneOf rule isn't necessary yet
* Adjust CSS chunk naming
* Begin testing CSS behavior
* Add another test TODO
* Replace null-loader with ignore-loader
* Turn on chunks for new CSS feature
* Fix multi test suite
* Test CSS import order
* Test style HMR
* Test CSS compilation
* Test compilation and prefixing together
* Verify CSS styling works for Development and Production
* Add missing TODO
* Remove unnecessary test
* Adjust TODO message
* Hide page until React hydrates
* Revert "Hide page until React hydrates"
This reverts commit 898d4e0ee547b003d5790e2b11476740d645b907.
* Hide FOUC during development
* Test CSS imports
* Update tests TODO
* Add fixture for url() test
* Test `file-loader` support in CSS files
* Use a simple variant of cssnano
* Self-import
* Undo bundling
* Implement suggestion
* Add link to docs for prerender indicator and allow disabling
* Fix lint error from example
* Disable by default when electron is detected
* Add button to dismiss indicator for session
* Update disabling indicator in electron
* Ensure requests are resolved as directories
`resolveRequest` will strip down to baseDir if there's no trailing slash as it assumes you passed a file.
* Disable telemetry for PR Stats
This fully annotates our externals code to explain how it should be functioning. This will be useful as tests cases are made to ensure this is working correctly.
* Uses the PnP API when available
* Moves the resolution into an helper
* Update packages/next/lib/resolve-request.ts
Co-Authored-By: Joe Haddad <joe.haddad@zeit.co>
* Apply Prettier
* Adjust lib chunk naming algorithm and prevent duplicate react-dom
* Remove alias for react-dom and update separator replacement logic
* Add comment to webpack-config
* Add integration test for react-dom duplication
* Switch to using hash for lib chunk names
* remove extra file from PR
* Remove another extraneous change
* Remove test based on lib chunk name
* Update index.test.js
* Tweak typescript test suite
* Revert "Tweak typescript test suite"
This reverts commit 9e0108da7c70e7ae45b412b60c07162383de65f3.
* Make sure HMR connection isn't being closed
while testing
* Update to not re-use NODE_ENV
* Break up/rework TypeScript test suite
* bump
* Adjust lib chunk naming algorithm and prevent duplicate react-dom
* Remove alias for react-dom and update separator replacement logic
* Add comment to webpack-config
* Add experimental optimizeLibraries flag, currently prunes Moment.js locales
* expose moment for use in assertion
* try with the same setup as the production integration test
* Apply optimiztaions in dev and on server so they're consistent.
* fix build (oh dear)
* Update index.test.js
* Rename flag to future.excludeDefaultMomentLocales
* Adjust impl
* Add custom profiler / tracer
This captures both client/production builds and everything before and after is cpu profiled, which makes sure that the whole process instead of just webpack is included in the final report.
* Update tests
* Update profiling-plugin.js
* Rename profiling-plugin.js to profiling-plugin.ts
* Update profiling-plugin.ts
* Update and rename profiling-plugin.ts to profiling-plugin.js
* Update webpack-config.ts
* Update profiling-plugin.js
* Add types
* Add missing type
* Add back TypeScript linting
* Remove tracing-js
* Remove accidental support for invalid JavaScript
Next.js inadvertently supported users mixing ES Modules and CommonJS due to a Babel bug that was fixed in v7.
This removes the hack in favor of the new Babel `sourceType` feature.
**This will result in broken code for users who relied on this non-standard conforming behavior.**
* Fix comment
* Toggle feature behind modern flag
* Refactor SplitChunksPlugin configs and add experimental chunking strategy
* Use typeDefs for SplitChunksConfig
* Modify build manifest plugin to create runtime build manifest
* Add support for granular chunks to page-loader
* Ensure normal behavior if experimental granularChunks flag is false
* Update client build manifest to remove iife & implicit global
* Factor out '/_next/' prepending into getDependencies
* Update packages/next/build/webpack-config.ts filepath regex
Co-Authored-By: Jason Miller <developit@users.noreply.github.com>
* Simplify dependency load ordering in page-loader.js
* Use SHA1 hash to shorten filenames for dependency modules
* Add scheduler to framework cacheGroup in webpack-config
* Update page loader to not duplicate script tags with query parameters
* Ensure no slashes end up in the file hashes
* Add prop-types to framework chunk
* Fix issue with mis-attributed events
* Increase modern build size budget--possibly decrement after consulting with @janicklasralph
* Use module.rawRequest for lib chunks
Co-Authored-By: Daniel Stockman <daniel.stockman@gmail.com>
* Dasherize lib chunk names
Co-Authored-By: Daniel Stockman <daniel.stockman@gmail.com>
* Fix typescript errors, reorganize lib name logic
* Dasherize rawRequest, short circuit name logic when rawRequest found
* Add `scheduler` package to test regex
* Fix a nit
* Adjust build manifest plugin
* Shorten key name
* Extract createPreloadLink helper
* Extract getDependencies helper
* Move method
* Minimize diff
* Minimize diff x2
* Fix Array.from polyfill
* Simplify page loader code
* Remove async=false for script tags
* Code golf `getDependencies` implementation
* Require lib chunks be in node_modules
* Update packages/next/build/webpack-config.ts
Co-Authored-By: Joe Haddad <timer150@gmail.com>
* Replace remaining missed windows compat regex
* Trim client manifest
* Prevent duplicate link preload tags
* Revert size test changes
* Squash manifest size even further
* Add comment for clarity
* Code golfing 🏌️♂️
* Correctly select modern dependencies
* Ship separate modern client manifest when module/module enabled
* Update packages/next/build/webpack/plugins/build-manifest-plugin.ts
Co-Authored-By: Joe Haddad <timer150@gmail.com>
* Remove unneccessary filter from page-loader
* Add lookbehind to file extension regex in page-loader
* v9.0.3
* Update examples for Apollo with AppTree (#8180)
* Update examples for Apollo with AppTree
* Fix apolloClient being overwritten when rendering AppTree
* Golf page-loader (#8190)
* Remove lookbehind for module replacement
* Wait for build manifest promise before page load or prefetch
* Updating modern-only chunks inside the right entry point
* Fixing ts errors
* Rename variable
* Revert "Wait for build manifest promise before page load or prefetch"
This reverts commit c370528c6888ba7fa71162a0854534ed280224ef.
* Use proper typedef for webpack chunk
* Re-enable promisified client build manifest
* Fix bug in getDependencies map
* Insert check for granularChunks in page-loader
* Increase size limit temporarily for granular chunks
* Add 50ms delay to flaky test
* Set env.__NEXT_GRANULAR_CHUNKS in webpack config
* Reset size limit to 187
* Set process.env.__NEXT_GRANULAR_CHUNKS to false if selectivePageBuilding
* Update test/integration/production/test/index.test.js
Co-Authored-By: Joe Haddad <timer150@gmail.com>
* Do not create promise if not using chunking PR
* Experimental: Serverless Trace target
The Serverless Trace target produces Serverless-handler wrapped entrypoints, but does not bundle all of `node_modules`.
This behavior increases bundling performance to be more akin to `target: 'server'`.
This mode is expected to be used with smart platforms (like [ZEIT Now](https://zeit.co/now) that can trace a program to its minimum dependencies.
* Use more generic variables
* Add asset relocator for production mode of serverless trace
* Verify Firebase compatiblity
* Revert "Add asset relocator for production mode of serverless trace"
This reverts commit 8404f1dcf28b60edab41a56c94b38dcd3fddec20.
* Add serverless trace tests
* Add _isLikeServerless helper
* Make constants
* Fix export
* Update packages/next-server/server/config.ts
Co-Authored-By: JJ Kasper <jj@jjsweb.site>
* Use a global helper for is like serverless
* Update import for isTargetLikeServerless
* Update packages/next/build/index.ts
Co-Authored-By: JJ Kasper <jj@jjsweb.site>