-
Notifications
You must be signed in to change notification settings - Fork 26.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Example of using babel-polyfill #2060
Comments
We use this automatically as you use features which needs a polyfill. You don't need to use it manually. |
Well, the version I was on v2.4.0 doesn't work (on IE 11, etc) if I didn't include the script I wrote above. I got errors for null calling on "includes" methods etc. |
@pencilcheck I assume this is related to a module in your app. It doesn't come with a polyfill. In that case you need to use it. May be you can add the exact polyfill you need. Use core-js |
Things have come a long way. // next.config.js
module.exports = {
webpack: (config) => {
// Unshift polyfills in main entrypoint.
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry();
if (entries['main.js']) {
entries['main.js'].unshift('./polyfills.js');
}
return entries;
};
return config;
}
} // polyfills.js
import 'babel-polyfill'; Babel 6// .babelrc
{
"presets": [
[
"next/babel",
{
"preset-env": {
"targets": {
"browsers": "defaults"
},
"useBuiltIns": true
}
}
]
]
} Babel 7// .babelrc (Babel 7)
{
"presets": [
[
"next/babel",
{
"preset-env": {
"useBuiltIns": "usage"
}
}
]
]
}
You still need a separate Would be good to consider this as default in Next though. |
I just want to leave a note here that after upgrading to Next 6, after every navigation that required a server build, HMR informed me that "The following modules couldn't be hot updated: (Full reload needed)" because I noticed that multiple I removed the |
@joaovieira a couple of comments on that:
also there seems to be no need to hack the webpack entries, you can use the
with the same content in polyfills.js as in your example. |
|
To add IE11 If I just removed the polyfill part from the config it works as expected and doesn't reloads at every page navigation. I don't get it yet how to fix it. Following some code example: next.config.js
src/polyfill,js
|
Facing the same issue, for now I conditionally only add my polyfills for production webpack: function(cfg, { dev }) {
if (!dev) {
const originalEntry = cfg.entry;
cfg.entry = async() => {
// ... |
Thanks to @joaovieira for your example. It solved my issue for supporting IE11. If you are on Babel 7 (Next 6.x and beyond), a small change in the preset is required. Here is the updated code (including an example of transpiling a node module that used an arrow function: This assumes you have a file called
|
Are the imports in |
Does this solution works only for the client side code ? I keep on getting regeneratorRuntime is not defined if I use async/await on server side code. |
With babel 7 and nextjs 7, just add module.exports = {
presets: [
[
"next/babel",
{
"preset-env": {
targets: {
browsers: [">0.03%"]
},
useBuiltIns: "usage"
}
}
]
]
}; Source : https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack |
Note that this will NOT polyfill anything that node_module dependencies depend on, since it only inserts polyfills for stuff that is babel transformed, and by default node_modules are not babel transpiled when building the client project (which is a good thing). |
@joaogranado Using your solution with babel 7 gives this error (warning?) on build:
I changed |
@rap2hpoutre for whatever reason, this solution isn't working for us - still getting |
After installing
babel-polyfill
, innext.config.js
The text was updated successfully, but these errors were encountered: