Compilation warnings

[juancarloselorriaga]

Hi Eytan!

Trying to follow your tutorial (which is amazing tho). I get the following message:

Failed to compile warning with the following message: ./src/index.js Attempted import error: './views/IndexView' does not contain a default export (imported as 'IndexView').

This message is given by the default generated code (with the importing changes in the video tutorial), which has module.exports = IndexView; at the bottom of IndexView.js file. As a first guess and you suggested the same: I changed it to export default IndexView; but now I get a different message with no success on compiling my files:

**Compiled with warnings.

./src/views/IndexView.js Module not found: Can't resolve '../controllers/IndexController' in '/Users/CuentaHTS/Desktop/Heimer Web React/heimer/src/views'

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.**

This one is my git repository URL: https://github.com/juancarloselorriaga/heimerweb.git

I'm not quite sure how to retrieve the appfairy version.

Thanks in advance!! JCE

[DAB0mB]

It seems like you've installed Appfairy@0.7.0 and I've deprecated it for a reason. Can you try 0.6.1?

[juancarloselorriaga]

It seems like you've installed Appfairy@0.7.0 and I've deprecated it for a reason. Can you try 0.6.1?

How can I do this? I only ran the following $ npm install appfairy -g and got 0.7.0 version automatically. I'm not sure how to change versions. Please let me know.

Regards,

[DAB0mB]

OK I've just released a new version and it should work. Install it normally and tell me whats up. Just so you know if you wanna install a specific version you can do the following:

$ npm install package@1.2.3

But again, no need to. Try normally

[juancarloselorriaga]

Thanks! I got the following log (with a large list of warnings before):

. . . npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/appfairy/node_modules/mkdirp/node_modules npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/appfairy/node_modules/source-map-support/node_modules npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/appfairy/node_modules/uglify-js/node_modules npm ERR! path /usr/local/lib/node_modules/appfairy/node_modules/@types/node npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/appfairy/node_modules/@types/node' npm ERR! { [Error: EACCES: permission denied, access '/usr/local/lib/node_modules/appfairy/node_modules/@types/node'] npm ERR! stack: npm ERR! 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules/appfairy/node_modules/@types/node\'', npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'access', npm ERR! path: npm ERR! '/usr/local/lib/node_modules/appfairy/node_modules/@types/node' } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator (though this is not recommended).

And checked my current version, still in 7.0. Am I missing something?

[DAB0mB]

Yes you forgot 'sudo'

$ sudo npm install -g appfairy

[juancarloselorriaga]

Sorry for that! Rookie mistake.

Okay, I ran everything again and edited the bottom line of IndexView.js with export default IndexView; and the app compiled with the following message:

Compiled with warnings.

./src/views/IndexView.js Module not found: Can't resolve '../controllers/IndexController' in '/Users/CuentaHTS/Desktop/Heimer Web React/heimer/src/views'

Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before.

But this time it compiled and showed the app in the browser, yet I have two questions:

1. Why is the page throwing me a message Oops! This page has improperly configured forms. Please contact your website administrator to fix this issue.

2. Why the interactions I designed are not working at all? Not even the page linking. Is this normal?

My repo is updated if you try to reproduce what I'm saying.

If you want to see the published webflow version to analyze the interactions: http://heimerweb.webflow.io/.

[DAB0mB]

You get a compilation warning because the generated view tries to import a controller that you have yet to implement. Create a file called controllers/IndexController.js and follow the directions of the video or the instructions here.

When you load the app you get that alert because of Webflow's library, outside of its native environemnt it will throw an error. try to use e.preventDefault() and implement your own logic for forms that you create.

The page linking is not working because you need to implement a React router, just add a socket and implement an onClick() handler.

Also, can you elaborate about the interactions? What interactions did you implement? I will take a look at your application.

I will also add notes to the README.md file so all these points would be clear

[DAB0mB]

And I also guess there are still some limitations because this tool is new but I will try make your app running smoothly and then release a new version

[juancarloselorriaga]

Great! Thank you very much, I'll try to implement with your recommendations. I'm experimented in webflow, but as you can see I'm struggling with connections, I think my webflow app will be a great way to try different things, please feel free to use it to improve your versions, I really think you're doing something great here. If you need to try something new and you need me to make some changes in webflow I can do it, just let me know.

Regarding the interactions:

There are a lot in my webflow app:

• Modal opening
• Modal closing
• Accordion opening and closing (please try to run the app in a smaller screen; tablet size as the site is truly 100% responsive, including lists.)
• Different animations for arrows and closing modal buttons.
• Almost every button has interactions

I'm trying to implement the best and easy way for my webflow app to be readable, mantainable and scalable. I'm about to share this with my backend devs so I was trying to make their lives easier.

Regards,

[DAB0mB]

Thank you very much. Yes I can use your help, I'll make something awesome

[adityas3730562]

Hi Eytan as Juan listed earlier he has the problem with app fairy where he had trouble with the controller I also have the same issue where it says:

./src/views/IndexView.js Module not found: Can't resolve '../controllers/IndexController' in '/Users/adi/Desktop/Project Fitcus/newland/newlanding/src/views'

I also hope I have made the right changes by creating a controller in the src folder:

my page renders just fine except for the parts which has animations, would you know what I would need to do to get it to work? Please help me out.

[adityas3730562]

Actually I am watching your video now and I can see how you create the controllers so I will create it that way but I do want to know if appfairy can also handle animations?

[DAB0mB]

Animations work now out of the box

[ossitdown]

Hey @DAB0mB really need help on the same error controllers/IndexController module not found

[ossitdown]

And one more thing my Styling is just working on the home page. Need Help..!!!!!!!!!!

[Dhruv-Shetty]

Hey @DAB0mB really need help on the same error controllers/IndexController module not found

And no styling is getting applied on it(home page)