Babel react modules deleted by CK3?

[robstown]

Quick, short summary: Transpiling with babel was working fine until it wasn't. After a save of a file, I started getting following errors everytime I tried to save a file with Babel transpile option:

Babel: Transpiling failed:

ReferenceError: [BABEL] /Users/Rob/Robs-Stuff/RobUniversity/ProgrammingPlaybox/mobx-react-todomvc/src/components/todoApp.js: Unknown option: foreign.Children. Check out http://babeljs.io/docs/usage/options/ for more info
    at Logger.error (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:220:20)
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:14
    at /Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:312:20
    at Array.map (native)
    at OptionManager.resolvePresets (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:269:20)
    at OptionManager.mergePresets (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:258:10)
    at OptionManager.mergeOptions (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:243:14)
    at OptionManager.init (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/options/option-manager.js:351:12)
    at File.initOptions (/Applications/CodeKit.app/Contents/Resources/engines/node_modules/babel-core/lib/transformation/file/index.js:216:65)

It appears maybe one of the babel plugins for react is no longer there? If I uncheck react preset, I don't get the error (but I do get the error saying my code has errors in the jsx sections). Is it possible that CK3 deleted the file? I am not doing anything in that directory, so I can't see how I would have deleted it on accident.

Expected results: Transpiles normally

Actual results: error

Exact steps to reproduce: try to transpile using Babel and react preset

A link to download a simplified project or file that shows the issue: can provide if needed, let me know what you need

Your configuration (any details about your system that you think might be relevant) CK3.0 build 25288

[robstown]

I just tried with a different project, and it works fine, so it has to be something with the specific project file. I am including the project file below....

mobx-react-todomvc.zip

[robstown]

One last update. I got it to work by installing the babel presets and plugins locally to my project folder. I don't think this should be necessary when using only options checked on CK3, should it?

[bdkjones]

Well, which plugins did you install and which version of React is this project using? Babel is a disaster, so it's possible you need different versions of plugins depending on how old the version of React you're using is.

[robstown]

It was just the babel-preset-react. It shouldn't matter what version of react I have, the problem is with the transpiling stage, not executing the code. I am just doing simple jsx conversion. If you read the error message, it seems like it is unable to locate the plugin, it doesn't seem to be a syntax problem. That's why I thought it was a CK problem and not babel.

Does that make sense? Do you see something different?

On Wed, Oct 12, 2016 at 2:26 PM, Bryan Jones notifications@github.com wrote:

Well, which plugins did you install and which version of React is this project using? Babel is a disaster, so it's possible you need different versions of plugins depending on how old the version of React you're using is.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bdkjones/codekit3/issues/200#issuecomment-253296859, or mute the thread https://github.com/notifications/unsubscribe-auth/APlUVNw3axEQPW1ZVXngFeI0sUfBaKuTks5qzSZXgaJpZM4KU3pI .

[robstown]

I verified it has nothing to do with react or my code. I can create a new project, with a file that has a simple command like var a = 5;

Once I check the 'react' presets options in the CK3 menu, I get the error message.

On Wed, Oct 12, 2016 at 3:37 PM, Rob Searle rob@searlegroup.com wrote:

It was just the babel-preset-react. It shouldn't matter what version of react I have, the problem is with the transpiling stage, not executing the code. I am just doing simple jsx conversion. If you read the error message, it seems like it is unable to locate the plugin, it doesn't seem to be a syntax problem. That's why I thought it was a CK problem and not babel.

Does that make sense? Do you see something different?

On Wed, Oct 12, 2016 at 2:26 PM, Bryan Jones notifications@github.com wrote:

Well, which plugins did you install and which version of React is this project using? Babel is a disaster, so it's possible you need different versions of plugins depending on how old the version of React you're using is.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bdkjones/codekit3/issues/200#issuecomment-253296859, or mute the thread https://github.com/notifications/unsubscribe-auth/APlUVNw3axEQPW1ZVXngFeI0sUfBaKuTks5qzSZXgaJpZM4KU3pI .

[bdkjones]

I can create a new project, with a file that has a simple command like var a = 5; Once I check the 'react' presets options in the CK3 menu, I get the error message.

I just attempted this. I selected babel from the Transpile With dropdown, then went into project settings and enabled the react preset. I left all other Babel settings untouched. The file transpiled just fine.

I downloaded your project and attempted to transpile the same file and got the same message about "foreign.children". The thing is, if the React preset were not being loaded correctly, Babel would be throwing an error about that.

Are you sure this isn't user-error? What happens if you transpile this file manually at the command line?

[bdkjones]

You might also review all of your Babel options. I saw a couple plugins that were enabled, for example. Those are being passed along with the presets. And it really looks like Babel is warning about an error in your code rather than a configuration problem.

[bdkjones]

Transpiling with babel was working fine until it wasn't. After a save of a file, I started getting following errors everytime I tried to save a file with Babel transpile option

This is also really telling. 99.99999% of the time when something's "working until it stopped working" it means you wrote some bad code somewhere. Missing comma, extra semicolon, etc. I have a very strong suspicion that the issue is in this project rather than the app. I'm just not enough of a Babel expert to be 100% sure about that.

[robstown]

I'll look at it. The funny thing is that the errors went away and everything has been transpiling fine since I loaded the babel plugins locally. All CK3 settings and code are the same. I'm not sure why an error in my code would do that. When I said 'everything was working fine until it wasn't' , that is the point I deleted the babel plugins from my local node_modules folder (since you made the plugin options work!). I'm scratching my head but will play with it today to see what I can figure out.

[robstown]

I figured it out. You get this error whenever you have 'react' & 'react-dom' loaded in your local node_modules folder and you select the 'react' babel preset option in CK3. These have nothing to do with babel, they are just the react npm bundles. The error goes away when I have all of the babel presets and options in my local node_modules folder instead of using the ones in the CK3 folder. I have no idea why that is? There must be a name conflict somewhere and it's picking out the wrong file?

[bdkjones]

Interesting. I have no idea why that occurs.

[robstown]

Is this something that will remain on your radar? I don't know that the problem is inherit to CK3, but I imagine you may have others run into this problem when you release ck3 and they use react with modules. Carrying around all these extra bloated babel plugins locally sucks, but it can be dealt with. I can't wait until Javascript grows up and babel is only needed for fringe stuff, but I guess react will always be fringe.

...maybe this will be taken care of when CK does native packaging and npm module management ;)

[imtiazwazir]

Same problem here and it occurs after I changed the build output file name

[bdkjones]

Can one of you upload a simple demo project showing this issue? Install whatever's needed to produce the conflict so I can take a look.

[imtiazwazir]

Archive.zip

please find attached

[niftycodeltd]

Hey @robstown and @imtiazwazir. Just wondering of either have you been successful with th e transpiling or linting of a React project. If yes, would appreciate any direction on achieving this myself. Cheers.

[imtiazwazir]

@bdkjones is busy making more jokes about Apple, I have dropped my all hopes about this issue :)

[bdkjones]

I haven't ignored it; it's just that this is a SUPER RARE edge case and a workaround has been found. Development cycles are hard to come by with a one-man shop, so I have to prioritize things that are bigger issues

[robstown]

Hey @XantheStudios , sorry for long delay, I was out of commission for several months. To answer your question, the only work-around I know is to load all of the babel npm modules local to your project. This sucks but I don't know any other way around it....

[bdkjones]

That's not a workaround; that's babel's recommended approach. The fact that I bundle them into CodeKit to make life easy is against Babel's best-practices. JavaScript guys think it's fine to install 340MB of crap in 43,571 nested folders to build a simple website. I disagree.

Sent from my iPhone

On Jan 19, 2017, at 15:14, robstown notifications@github.com wrote:

Hey @XantheStudios , sorry for long delay, I was out of commission for several months. To answer you question, the only work-around I know is to load all of the babel npm modules local to your project. This sucks but I don't know any other way around it....

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[sami616]

wow this still seems to be an issue.... bummer. back to webpack i guess.

[bdkjones]

So I think I understand what's happening here. Babel allows you to abbreviate the plugin names you pass to it so that these are equivalent:

babel-preset-react
react

If the babel-preset is missing from the name that you pass in, Babel adds it and then searches for that. However, I'm not sure that behavior is working correctly since I extend Babel to search for globally installed presets/plugins.

I will change CodeKit to always pass the long-form name of the plugin/preset for react and maybe that will solve this?

[bdkjones]

Yep. That appears to be the issue. Changing CodeKit to always supply Babel with the "longform" names seems to resolve the conflict so that the react npm module is not mistakenly identified as babel-preset-react to Babel.

This is why we pick one name and use it. My name is Bryan. You cannot call me yan and expect me to respond.

[bdkjones]

Fix implemented for 3.3.