Comments (8)
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
}
}
},
…
from fable-react.
I am pretty sure as of now it doesn't go through babel-loader by default. I have tried it many times myself.
from fable-react.
Closed by mistake so reopened.
from fable-react.
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
).
from fable-react.
@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"]
}
]
}
};
from fable-react.
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.
from fable-react.
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!
from fable-react.
You're right, I've fixed the template. Thanks again and sorry for the trouble!
from fable-react.
Related Issues (20)
- React Server Components integration HOT 2
- Can't figure out how to wrap my view with a Higher Order Component HOT 4
- JsInterop helper for wrapping a higher order component HOT 2
- Can't reference React in Fable HOT 2
- Fable.ReactServer.cssProp very slow HOT 4
- Add Custom DU to DOMAttr HOT 1
- FunctionComponent.Lazy and SSR HOT 1
- Update samples to Fable 3
- ReactDOM.hydrate is no longer supported in React 18 HOT 17
- Can't update shared state passed with useContext? HOT 3
- Q: Use ReactElement import member for Storybook HOT 3
- Missing 'open' from Fable.React.Props? HOT 2
- Last Fable.React upgrade breaks my code HOT 7
- Publish source files from Fable.React.Types and Fable.ReactDom.Types to nuget HOT 5
- Fable.React version 8 depends on React.Dom gte 18 lt 19 according to femto
- Add Pointer Events HOT 3
- Why is useCallback not implemented? HOT 3
- How to obtain a component ref in a function component? HOT 5
- FunctionComponent.Of functions cache breaks reusable code HOT 1
- voidEl breaks with: $ELEMENT is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fable-react.