ReferenceError: abp is not defined in reactjs while testing

[sivaprabha123]

Please find the error attached which occurs when I create a new React Component named 'tableIcon.tsx' and run a test suite for the same.

[ismcagdas]

@siva26051990 I got the same error as https://github.com/aspnetboilerplate/module-zero-core-template/issues/412 while running the tests.

• Did you install npm dependencies using yarn ?
• How did you run your tests ?

[ismcagdas]

Might be related to dilanx/craco#89

[AllyMurray]

The above error is not related to that issue, Croco has only been used since the package update. There was however a new issue introduced DocSpring/craco-antd#10

The maintainer is looking for help on that issue, I am going to take a look but I don't have a great deal of experience with webpack and configs.

In the meantime, I have changed the test script back to react-scripts test --env=jsdom this has got it back to this error.

This error is due to abp not being a module, I have changed it to a module and imported it and the test passed.

I don't know what alternative solution there is, ideally, we want to be using the abp package directly from node_modules but as it stands I don't know how we would do that.

@ismcagdas what are your current thoughts on this? I would like to get it sorted out but not sure on the best course of action.

[ismcagdas]

In Angular version, we were loading abp.js as a vendor script. I'm not sure how to do it in React. The better approach is to write abp.js as a typescript module I guess.

[AllyMurray]

I just had a look at the Vue project and realised that the React one must be based on that. It also has a lib folder with the abp.js file in it. I haven't run the tests for it but it has the same problem of having to manually update that file.

How do you see this progressing? An independent TS module or a re-write of the current JS file? I would be happy to do it either way.

[ismcagdas]

@AllyMurray I'm not sure, what do you think ?

[AllyMurray]

@ismcagdas ideally there wouldn't be two copies of the same code, I don't know how the Angular project is set up but assuming you can easily import the module re-writing the current js file would be the way to go.

This does mean we will have to consider what happens with jQuery, neither the Vue or React projects use jQuery and it's not worth having it as a dependency for such a small amount of code that uses it.

Looking at the current setup for Vue and React they both have the abp.js file copied into a lib folder with all jQuery references removed. Looking at the original file I noticed it does check if jQuery is available before using it and if it's not available it executes equivalent code. The only place this isn't true is when $.Deferred is used. Although it does check for $ before trying to use it, jQuery is passed into the IIFE which produces the error "jQuery is not defined".

So we must either remove jQuery or ensure it works without jQuery when it isn't available. I don't have a strong preference either way however if we were to remove it there would be less code to maintain. If it is removed we would have to replace the $.Deferred functionality.

[ismcagdas]

I think it is better to remove JQuery dependency.