Open fkhosrow opened 4 years ago
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
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 (
babel.transform(code, { filename: 'file.ts', presets: [/ your preset /] }); `
Thanks for your help.
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, },
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.