Upgrade to Fable 2.0

[fkhosrow]

Hello,

I started with SAFE-Nightwatch app abut two years ago and at this point want to upgrade my Fable react-native app to Fable 2.0. I have followed all the steps @forki did w.r.t upgrading the SAFE-NightWatch app (Upgrading to Fable 2.0 and Babel 7 and RN 0.58.6 etc). However, I have come to a stage where I am blocked. It seems that Babel transpiler can not parse JSX syntax. I get the following error BABEL: D:\Dev...\Imports\ReactNative\NestedImage.js: Unexpected token (27:12) for all the react native components I am using that returns JSX code (e.g. ) from the render function. Any idea what is happening?

Any help in this matter will be greatly appreciated.

[forki]

Check your deps especially https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/package.json#L29

then check:

https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/metro.config.js
https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/babel.config.js#L2

I assume it's related somehow

[fkhosrow]

Check your deps especially https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/package.json#L29

then check:

https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/metro.config.js
https://github.com/SAFE-Stack/SAFE-Nightwatch/blob/master/babel.config.js#L2

I assume it's related somehow

@forki I believe the difference between my project and SAFE-NightWatch project is, I have React-Native/JS files in my source folder in addition to F# files (I wrapped some react-native components for F#). With Fable 1.0, I had a .babelrc file that included this plugin: @babel/plugin-syntax-jsx that took care of JSX syntax.

With Fable 2.0 upgrade, the .babelrc file is ignored. I deleted this file and nothing happened. I included the @babel/plugin-syntax-jsx plugin in fable-splitter.js babel options instead but it looks the plugins section is ignored as well:
module.exports = { entry: resolve('src/app.fsproj'), outDir: resolve("out"), // Babel compiler directives babel: { presets: ["module:metro-react-native-babel-preset"], plugins: ["@babel/plugin-syntax-jsx"] // sourceMaps: true, }, fable: { // F# Compiler directives //define: ["DEBUG"] }, };

The other issue I found is, when I include "module:metro-react-native-babel-preset" as babel options in splitter-config.js, I get lots of errors like this:
`
See https://babeljs.io/docs/en/options#filename for more information.
at validateIfOptionNeedsFilename (D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:274:11)
at D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:286:52
at Array.forEach ()
at validatePreset (D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:286:25)
at loadPresetDescriptor (D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:293:3)
at loadPresetDescriptor.next ()
at recurseDescriptors (D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:107:30)
at recurseDescriptors.next ()
at loadFullConfig (D:\Dev\Other\app\node_modules@babel\core\lib\config\full.js:142:6)
at loadFullConfig.next ()
fable: Error transforming Babel AST Error: [BABEL] unknown: Preset /* your preset */ requires a filename to be set when babel is called directly,

babel.transform(code, { filename: 'file.ts', presets: [/* your preset */] });
`

Thanks for your help.

[fkhosrow]

Update:

I started with latest SAFE_NightWatch app in master branch and ported my app to it. Same issues w.r.t JSX errors. The workaround is to go Non-JSX for react-native but ideally it would be nice if this works. I am concerned that Babel plugins are getting ignored.

For these errors:

babel.transform(code, { filename: 'file.ts', presets: [/* your preset */] });

adding the filename option to fable-splitter.js babel option fixed it:
babel: { // presets: [["es2015", { modules: false }]], presets: ["module:metro-react-native-babel-preset"], filename: "App.js", // sourceMaps: true, },