Does it support customBabel plugins ?

[Antonin Adert]

I use ViewModel for React, which is a library that relies on a custom Babel file to compile down to React code. This allows for a simpler declarative syntax and very useful utilities with React.

I wanted to know if zero supports the use of a .babelrc file which look like so:
{ "presets": ["es2015", "react"], "plugins": [ "viewmodel-react-plugin" ] }

[Antonin Adert]

When trying to add a babel section in package.json, with the same plugin as before, I run into this error:

🚨  /var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/test.js: Cannot find module 'babel-plugin-viewmodel-react-plugin' from '/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9'
    at Function.module.exports [as sync] (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/node_modules/resolve/lib/sync.js:58:15)
    at resolveStandardizedName (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/node_modules/@ba(node:46186) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 5): #<Object>
npm ERR! code E404
npm ERR! 404 Not Found: babel-plugin-viewmodel-react-plugin@latest

EDIT: I managed to get through this error by removing babel lines from package.json and adding a .babelrc file with the same configuration.

But it appears the code is not ready for Zero in this case:

ReferenceError: App is not defined
    at Object.parcelRequire.index.jsx (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/zero-builds/da39a3ee5e6b4b0d3255bfef95601890afd80709/bundle.node.js:135:16)
    at newRequire (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/zero-builds/da39a3ee5e6b4b0d3255bfef95601890afd80709/bundle.node.js:48:24)
    at parcelRequire.index.jsx.Object.defineProperty.value (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/zero-builds/da39a3ee5e6b4b0d3255bfef95601890afd80709/bundle.node.js:82:7)
    at Object.<anonymous> (/private/var/folders/n_/lvfjh60950sc1pp114m81t800000gp/T/zeroservertmp/8854c74bf23c3621b252016370862a4feb6d06d9/zero-builds/da39a3ee5e6b4b0d3255bfef95601890afd80709/bundle.node.js:121:3)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)



⚠️ SSR didn't work for . Some component might not be SSR compatible.

What would be the way to have this working ?

[Asad Memon]

Zero doesn't yet support custom babel config (or even parcel config). It currently overwrites .babelrc with it's own config here.

Ideally we should merge babel config with the one provided by user (we do the same with package.json).
PR welcome! I will look into this soon if nobody else does.

[Antonin Adert]

I'd like to do it myself but I am not really skilled in this kind of stuff, thanks for your answer and I hope you will have a look soon 👍

[Asad Memon]

I have added the ability to define custom .babelrc file in the latest beta. Zero will merge that with it's own default config. Can you give it a shot by doing npm install zero@beta.

[Antonin Adert]

I'll do it soon and tell you, thanks for your work !

[Antonin Adert]

It did improve some stuff and I feel it could work, but Viewmodel plays a lot with Babel and I guess with automatic imports/syntax for exporting components as well.
Hypothetically these 2 use of Babel are conflicting each other.

I guess I got out of luck:

npm ERR! code E404
npm ERR! 404 Not Found: babel-plugin-viewmodel-react-plugin@latest

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\anton\AppData\Roaming\npm-cache\_logs\2019-04-18T20_59_59_512Z-debug.log
×  C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\index.js: Cannot find module 'babel-plugin-viewmodel-react-plugin' from 'C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8'
- If you want to resolve "viewmodel-react-plugin", use "module:viewmodel-react-plugin"
- If you want to resolve "viewmodel-react-plugin", use "module:viewmodel-react-plugin"
    at Function.module.exports [as sync] (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePlugin (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\files\plugins.js:54:10)
    at loadPlugin (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\files\plugins.js:62:20)
    at createDescriptor (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPluginDescriptors (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)
    at alias (C:\Users\anton\AppData\Local\Temp\zeroservertmp\954f2242604e7039abec00c6b880d1f5404092c8\node_modules\@babel\core\lib\config\config-descriptors.js:63:49)
(node:22964) UnhandledPromiseRejectionWarning: #<Object>
(node:22964) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)