[BUG]: Latest version 3.1.41 throws an error and crashes

[carlosparreno]

Project

a11y checker engine

Browser

Chrome, Safari, Firefox

Operating system

MacOS, Other

Description

• We use the accessibility checker in a React project.

• We are using version "^3.1.40" that automatically picks up any new minor/patch version.

• Since the time version 3.1.41 has been released our accessibility tests fail with the following error:
  Error: Cannot find module '@babel/runtime-corejs3/helpers/interopRequireDefault' from '../../../../../tmp/accessibility-checker/engine/ace-node.js'

• When we fixate the version to be 3.1.40 the error is not reproducible any longer.

• Additionally I add here how we use accessibility-checker. All components are used with the following function:

  /**
   * Runs the accessibility scan and on failure, outputs the results.
   */

async function runAAT(component, label) {
    const validateComponent = async () => {
      const results = await AAT.getCompliance(component, label);
      if (AAT.assertCompliance(results.report) === 0) {
        return true;
      }
      return false;
    };
    const a11yValidation = await validateComponent();
    if (a11yValidation === true) {
      fs.unlinkSync(`${process.env.PWD}/results/a11y/${label}.json`);
    }
    return a11yValidation;
  }

Steps to reproduce

1. Install "accessiblity-checker": 3.1.41.
2. Have tests using the getCompliance and assertCompliance functions.
3. Error is thrown:

And after this initial error.... every test fails with the following error message:

[tombrunet]

Quick test on our end had no failure. We don't have any imports in the ace-node.js file - you can open https://unpkg.com/accessibility-checker-engine@3.1.41/ace-node.js and search and see that that @babel is not referenced anywhere. I'll try to run through some of our boilerplates to see if there's some react combination that's triggering that, but it seems like something in your environment is injecting into that file. Can you possibly include a copy of your ace-node.js file so we can compare against the original?

[carlosparreno]

Hi @tombrunet,

I'm using accessibility-checker package, not the mentioned accessibility-checker-engine, not sure if we are talking about different packages that you guys provide.

I'm not able to find the ace-node.js file in the node_modules/accessibility-checker. See following image:

The error reported seems to be in a tmp folder created by ACEngineManager.js as per my understanding.

Am I making sense?

[tombrunet]

accessibility-checker fetches the accessibility-checker-engine and writes it to that tmp folder so that it can load the engine and run it. If you look at the contents of that file in the /tmp folder, it should match that from unpkg.

[carlosparreno]

Thanks @tombrunet. So, I was able to get the ace-node file. I attach it here:

https://github.com/carlosparreno/sharefiles/blob/main/ace-node.js

Please, let me know if I can help somehow. I'll be off for a few days but someone from my team will back me up if you need anything.

Thanks

[aliunwala]

From Triage meeting:
We are still not seeing the babel dependency in the ace-node.js file. (And we know our version of ace-node.js does not have any dependencies) So we think this has to be something you are loading into your environment.

The next thing for you to try is probably loading a minimal set of things and see if you still see this?

[grabowsd]

Thanks @aliunwala. I work with Carlos and I was investigating this issue further.

It looks like the new cacheFolder option in config might be the root cause of our problem. Previously the engine folder was created in ACEngineManager.js as follows:
let engineDir = path.join(__dirname, "engine");
(which results in: /node_modules/accessibility-checker/lib/engine)

and now it's:
let engineDir = path.join(config.cacheFolder, "engine");
(which results in: /private/var/folders/x_/0z7qrmqd7xjgldyxbq34yq5h0000gn/T/accessibility-checker/engine/ace-node.js
The engine folder is where the ace-node.js is stored.

How can we set the cacheFolder option in config so it's working for us as previously?

[tombrunet]

You can add cacheFolder to the checker configuration file.
See https://www.npmjs.com/package/accessibility-checker#Configuration for how to set configuration.

[elycheea]

We’ve been having a similar issue in our monorepo. We were able to resolve tests locally after setting the cacheFolder but are still seeing failures in our Actions.

https://github.com/carbon-design-system/ibm-cloud-cognitive/actions/runs/3641804091/jobs/6148179111#step:6:23

[tombrunet]

@elycheea What did you set as a cacheFolder? Can you try an absolute path?

[tombrunet]

That PR should resolve relative paths as absolute, which should be released next week, but that's something you can try if you're in a hurry.

[elycheea]

Thanks @tombrunet We’ll give it a shot — not sure if our situation ends up a bit more complicated with our monorepo though. I think my team has reached out before with other questions related to config due to our setup.

[grabowsd]

Hi @tombrunet , we’re having issues with setting up the cacheFolder. We tried adding the cacheFolder as follows:

but we get the following error for all of our tests:

We can see that ace-node.js exists in the path specified in cacheFolder option:

[tombrunet]

Can you please try version 3.1.42-rc.0 using the cacheFolder?

[grabowsd]

Thanks @tombrunet. I tried 3.1.42-rc.0 but I’m still getting the same error.

I noticed that if I change the cacheFolder to just accessibility-checker the tests are passing locally but they fail in Github Actions. This also happens with version 3.1.42-rc.0.

[davidmenendez]

i'm taking over this issue on my team from @elycheea and wanted to follow up. has there been any update on this?

[sct-will]

Fix is in PR: #1240

[grabowsd]

Hi at @tombrunet and @sct-will,
Thanks for providing a fix.

I installed the latest version of accessibility-checker 3.1.43 that I believe contains the fix but I’m getting the following error: 




I’m not sure if this is related to the same issue of cacheFolder in config but it looks like when I’m importing modules from accessibility-checker to run with Jest it cannot find string-hash module required in multiScanData.js. Is this something that I need to install separately?

[aliunwala]

@grabowsd Could you try doing another npm install in the folder you are working in (Probably inside the accessibility-checker folder)

That should install string-hash (It is included in the package.json here: https://github.com/IBMa/equal-access/blob/master/accessibility-checker/package.json)

If you get any errors after that please post a screen shot again.

[davidicus]

@grabowsd Could you try doing another npm install in the folder you are working in (Probably inside the accessibility-checker folder)

That should install string-hash (It is included in the package.json here: https://github.com/IBMa/equal-access/blob/master/accessibility-checker/package.json)

If you get any errors after that please post a screen shot again.

@grabowsd This package is missing from the latest release of accessibility-checker as seen here

[tombrunet]

@aliunwala Those dependencies need to be in this package.json: https://github.com/IBMa/equal-access/blob/master/accessibility-checker/src/package.json. I'll fix.

[ErickRenteria]

Closing issue

[tombrunet]

@carlosparreno While digging into something else, I found perhaps a cleaner fix for this. Add this to your jest config instead of changing the cache folder
"transformIgnorePatterns": ["ace-node\\.js"]
By default, Jest injects babel into all js/jsx files. This tells Jest not to do that for the engine.

[grabowsd]

@carlosparreno While digging into something else, I found perhaps a cleaner fix for this. Add this to your jest config instead of changing the cache folder "transformIgnorePatterns": ["ace-node\\.js"] By default, Jest injects babel into all js/jsx files. This tells Jest not to do that for the engine.

@tombrunet, thanks for your help! Adding transformIgnorePatterns: ["/node_modules/", "\\.pnp\\.[^\\\/]+$", "ace-node\\.js"], to our jest config solved the issue.

Note "/node_modules/", "\\.pnp\\.[^\\\/]+$" is transformIgnorePatterns default value without which accessibility-checker was throwing errors.

[carlosparreno]

@tombrunet, @grabowsd, @davidicus

Thanks everybody, issue resolved.