Closed OnurGumus closed 5 years ago
Closed by mistake so reopened.
Hmm, in one of my projects, I'm basically using the webpack-config-template and it's working in IE11. We did have a problem with the polyfills but it was fixed with @babel/polyfill. Can you share your webpack.config.js? The screenshot suggests that's a development build somehow (shouldn't be using eval
).
@alfonsogarciacaro you are right. By mistake I was using development build. However running production build doesn't fix it either. I simply applied your config template to fable2 minimal sample. And now I am getting syntax error on IE11 and works for other browsers. I will appreciate if you can modify the fable2-minimal sample to work on IE11 as a working sample as PoC
In case necessary I used your webpack config minus css as below and copied index.html to src:
// Template for webpack.config.js in Fable projects
// Find latest version in https://github.com/fable-compiler/webpack-config-template
// In most cases, you'll only need to edit the CONFIG object
// See below if you need better fine-tuning of Webpack options
var CONFIG = {
indexHtmlTemplate: "./src/index.html",
fsharpEntry: "./src/App.fsproj",
outputDir: "./deploy",
assetsDir: "./public",
devServerPort: 8080,
// When using webpack-dev-server, you may need to redirect some calls
// to a external API server. See https://webpack.js.org/configuration/dev-server/#devserver-proxy
devServerProxy: undefined,
// Use babel-preset-env to generate JS compatible with most-used browsers.
// More info at https://babeljs.io/docs/en/next/babel-preset-env.html
babel: {
presets: [
["@babel/preset-env", {
"targets": {
"ie": "11"
}
}]
],
}
}
// If we're running the webpack-dev-server, assume we're in development mode
var isProduction = !process.argv.find(v => v.indexOf('webpack-dev-server') !== -1);
console.log("Bundling for " + (isProduction ? "production" : "development") + "...");
var path = require("path");
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
// The HtmlWebpackPlugin allows us to use a template for the index.html page
// and automatically injects <script> or <link> tags for generated bundles.
var commonPlugins = [
new HtmlWebpackPlugin({
filename: 'index.html',
template: CONFIG.indexHtmlTemplate
})
];
module.exports = {
// In development, bundle styles together with the code so they can also
// trigger hot reloads. In production, put them in a separate CSS file.
// @babel/polyfill adds code for compatibility with old browser.
// If you only need to support modern browsers, you can remove it.
entry: isProduction ? {
app: ["@babel/polyfill", CONFIG.fsharpEntry]
} : {
app: ["@babel/polyfill", CONFIG.fsharpEntry],
style: [CONFIG.cssEntry]
},
// Add a hash to the output file name in production
// to prevent browser caching if code changes
output: {
path: path.join(__dirname, CONFIG.outputDir),
filename: '[name].js'
},
mode: isProduction ? "production" : "development",
optimization: {
// Split the code coming from npm packages into a different file.
// 3rd party dependencies change less often, let the browser cache them.
splitChunks: {
cacheGroups: {
commons: {
test: /node_modules/,
name: "vendors",
chunks: "all"
}
}
},
},
// Besides the HtmlPlugin, we use the following plugins:
// PRODUCTION
// - MiniCssExtractPlugin: Extracts CSS from bundle to a different file
// - CopyWebpackPlugin: Copies static assets to output directory
// DEVELOPMENT
// - HotModuleReplacementPlugin: Enables hot reloading when code changes without refreshing
plugins: isProduction ?
commonPlugins.concat([
new CopyWebpackPlugin([{ from: CONFIG.assetsDir }]),
])
: commonPlugins.concat([
new webpack.HotModuleReplacementPlugin(),
]),
resolve: {
// See https://github.com/fable-compiler/Fable/issues/1490
symlinks: false
},
// Configuration for webpack-dev-server
devServer: {
publicPath: "/",
contentBase: CONFIG.assetsDir,
port: CONFIG.devServerPort,
proxy: CONFIG.devServerProxy,
hot: true,
inline: true
},
// - fable-loader: transforms F# into JS
// - babel-loader: transforms JS to old syntax (compatible with old browsers)
// - sass-loaders: transforms SASS/SCSS into JS
// - file-loader: Moves files referenced in the code (fonts, images) into output folder
module: {
rules: [
{
test: /\.fs(x|proj)?$/,
use: "fable-loader"
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: CONFIG.babel
},
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*)?$/,
use: ["file-loader"]
}
]
}
};
after disabling minifcation I found the error as below:
function Common$$$lazyViewWith(equal, view, state) {
return Object(react["createElement"])(common_Components$002ELazyView$00601, new LazyProps$00601(state, function render() {
return view(state);
}, equal), ...[]);
}
It is strange babel still emits three dots despite I specifically configured it for ie11. Probably I am doing something wrong.
Ok I found the issue. You need to define fable options for fable-loader too otherwise they don't apply. Such as:
rules: [
{
test: /\.fs(x|proj)?$/,
use: {
loader: "fable-loader",
options: {
define: isProduction ? [] : ["DEBUG"],
babel:babelOptions
}
}
},
…
Glad to hear you solved the problem and thanks for sharing! Hmm, I thought that files translated by Fable would still go through babel-loader, that's why we are not adding the Babel options to fable-loader in the webpack config template, but I might be wrong. I'll check, we may need to change the template. Thanks again for pointing it out!
I am pretty sure as of now it doesn't go through babel-loader by default. I have tried it many times myself.
You're right, I've fixed the template. Thanks again and sorry for the trouble!
I have tried several examples and despite configuring fable with babel under IE 11 I am getting below errors:
I am fully aware this issue is not directly related to Fable but I would appreciate a working sample for IE11 if supported or else document IE11 is not supported.