var webpack = require('webpack'); | |
var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
var path = require('path'); | |
var folders = { | |
APP: path.resolve(__dirname, '../app'), | |
BUILD: path.resolve(__dirname, '../build'), | |
BOWER: path.resolve(__dirname, '../bower_components'), | |
NPM: path.resolve(__dirname, '../node_modules') | |
}; | |
var config = { | |
entry: { | |
app: [ | |
'webpack/hot/dev-server', | |
"./js/app.js" | |
] | |
}, | |
debug: true, | |
resolve: { | |
extensions: ['', '.js', '.jsx', '.scss'], | |
alias: { | |
//'es6-promise': path.join(folders.NPM, 'es6-promise', 'es6-promise.js'), | |
//'fetch': path.join(folders.NPM, 'whatwg-fetch', 'fetch.js'), | |
} | |
}, | |
stats: { | |
colors: true, | |
reasons: true, | |
}, | |
output: { | |
path: __dirname + '/build', | |
publicPath: '/', | |
filename: '[name].[hash].js', | |
chunkFilename: '[id].[hash].js' | |
}, | |
module: { | |
loaders: [ | |
{ | |
test: /\.s?css$/, | |
exclude: /node_modules/, | |
loaders: [ | |
'style', | |
'css', | |
'autoprefixer?browsers=last 2 version', | |
'sass?' + ['outputStyle=nested'].join('&') | |
] | |
}, | |
{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, | |
{ test: /\.json$/, loader: 'json' }, | |
] | |
}, | |
plugins: [ | |
new webpack.HotModuleReplacementPlugin(), | |
new webpack.ProvidePlugin({ | |
'Promise': 'es6-promise', // Thanks Aaron (https://gist.github.com/Couto/b29676dd1ab8714a818f#gistcomment-1584602) | |
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' | |
}), | |
//new webpack.optimize.CommonsChunkPlugin('app', null, false), | |
new webpack.NoErrorsPlugin(), | |
new HtmlWebpackPlugin({ | |
template: path.resolve('./', 'index.html'), | |
webpackDevServer: '/webpack-dev-server.js' | |
}) | |
] | |
}; | |
module.exports = config; |
This comment has been minimized.
This comment has been minimized.
This is super awesome @Couto! If it's okay with you I'll write a quick blog post about including polyfills like fetch in webpack. |
This comment has been minimized.
This comment has been minimized.
Don't forget to install
|
This comment has been minimized.
This comment has been minimized.
The Since new webpack.ProvidePlugin({
'Promise': 'es6-promise',
'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
}), When I changed |
This comment has been minimized.
This comment has been minimized.
So I wanted to add the fetch polyfill so I added the dependencies (es6-promise, fetch, import-loader, export-loader) and these lines to my Webpack config file. But when running it in Safari 9 i get the following error from fetch. TypeError: Object is not a constructor (evaluating 'new Promise') Which seems to indicate Promise is not present when fetch is used. According to caniuse this version of Safari has support for Promises. So it might be es6-promise that is messing with Promise. Anyone else experiencing this? If I remove the line: Maybe this is a concern that should be raised over at es6-promise. Anyone know how I can solve this problem? |
This comment has been minimized.
This comment has been minimized.
@Andersos I've had some success on IE9 by using the following snippet: new webpack.ProvidePlugin({
Promise: 'imports?this=>global!exports?global.Promise!es6-promise',
fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch',
React: 'react'
}) So far this works because Also: import {polyfill} from 'es6-promise';
polyfill(); right at the top of your app's entry point. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@Nosherwan @Couto @Andersos I was having the same issues with new webpack.ProvidePlugin({
'Promise': 'exports?global.Promise!es6-promise',
'fetch': 'exports?self.fetch!whatwg-fetch'
}) This works in Chrome, Safari, and IE. The polyfills for both |
This comment has been minimized.
This comment has been minimized.
I case anyone runs into this in the future.. if you are calling window.fetch inside your code. Use 'window.fetch' your config. new webpack.ProvidePlugin({
'Promise': 'exports?global.Promise!es6-promise',
'window.fetch': 'exports?self.fetch!whatwg-fetch'
}) |
This comment has been minimized.
This comment has been minimized.
Why do we need to add this as a plugin to webpack? Can't we just do |
This comment has been minimized.
This comment has been minimized.
In my testing this increased the bundle filesize by about 3kb compared to just importing the polyfills in my entrypoint. No clue why, perhaps it's skipped over by Webpack's de-duping? |
This comment has been minimized.
This comment has been minimized.
Unfortunately this means even new browsers will use the Promise polyfill |
This comment has been minimized.
This comment has been minimized.
My mistake, that's intended: stefanpenner/es6-promise#148 |
This comment has been minimized.
This comment has been minimized.
@finbarmaginn I was wondering the same thing, but I think you have the benefit of deciding when to polyfill based on the environment. E.g. you probably don't want to polyfill promises when testing in Node.js because newer versions support them. |
This comment has been minimized.
This comment has been minimized.
Is this still the preferred method to polyfill |
This comment has been minimized.
This comment has been minimized.
I am curious just today I have learned that at least in babel 6 there is a 'babel-polyfill' (provides es6 env) that can be imported via the entry option in webpack.config.js like so: var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: [
'babel-polyfill',
'./src/main'
],
output: {
publicPath: '/',
filename: 'main.js'
},
devtool: 'source-map',
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ["es2015","react"],
}
}
]
},
debug: true
}; Would this not make es6-promise polyfill redundant, and maybe it is smart enough to use browser implementation if provided? |
This comment has been minimized.
This comment has been minimized.
Was wondering the same thing… |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
Wouldn't simply including it in entry be a better approach? There is actually a use case where the demonstrated method will fail, for example if you use Webpack server side with |
This comment has been minimized.
This comment has been minimized.
After double checking, this approach is actually incorrect and will not polyfill fetch properly, the correct approach is to configure module.exports = {
entry: ['whatwg-fetch', './app/js']
}; This will fix issues where using a 3rd party that expect I have opened a PR with |
This comment has been minimized.
This comment has been minimized.
@Nosherwan @silvenon you should not include a Promise polyfill if you use module.exports = {
entry: ['babel-polyfill', 'whatwg-fetch', './app/js']
}; |
This comment has been minimized.
This comment has been minimized.
Has anyone had success adding this when |
This comment has been minimized.
This comment has been minimized.
@simonsmith Does this not work for you? entry: {
demo: ['whatwg-fetch', './app']
}, |
This comment has been minimized.
This comment has been minimized.
@tarikjn |
This comment has been minimized.
This comment has been minimized.
@Couto ganda truta! |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
@tarikjn i am getting a Exception thrown and not caught in IE11 when i use babel-polyfill instead of es6 promise .
but this works perfect in IE11
|
This comment has been minimized.
This comment has been minimized.
Is there a way to have the polyfills loaded from a seperated chunk? I wish that when a browser is lacking a feature it loads the predeclared polyfill (which would be put in a chunk by webpack). So that the final bundle size does not contain all the polyfills. Is this possible somehow? |
This comment has been minimized.
This comment has been minimized.
@vikas5914, I'm getting the exact same. Did you solve this in the end, as I would rather keep using babel-polyfill |
This comment has been minimized.
This comment has been minimized.
Adding polyfills through |
This comment has been minimized.
This comment has been minimized.
if you use new webpack.ProvidePlugin({
fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch'
}) |
This comment has been minimized.
This comment has been minimized.
Can we use |
This comment has been minimized.
This comment has been minimized.
+1 |
This comment has been minimized.
This comment has been minimized.
|
This comment has been minimized.
This comment has been minimized.
In case someone has this error on firebase |
This comment has been minimized.
thanks, fetch works perfectly here :)
Can you explain how do you inject fetch as webpack plugin ?