`react-app-alias-ex` is not a drop-in replacement for `react-app-alias`

[bryanculver]

When using react-app-alias-ex to allow outside of root packages (a unique aspect of our setup) Jest throws resolver errors:

 FAIL  src/views/__tests__/BSListViewTemplate.test.js
  ● Test suite failed to run

    Cannot find module 'semver' from 'node_modules/jest-snapshot/build/InlineSnapshots.js'

    Require stack:
      node_modules/jest-snapshot/build/InlineSnapshots.js
      node_modules/jest-snapshot/build/State.js
      node_modules/jest-snapshot/build/index.js
      node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:324:11)

But switching back to react-app-alias and temporarily commenting out our external packages works as expected.

Config files:

// jsconfig.paths.js
{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@utils/*": ["src/utils/*"],
            "@constants/*": ["src/constants/*"],
            "@views/*": ["src/views/*"],
            "@components/*": ["src/components/*"],
            "@layouts/*": ["src/components/layouts/*"],
            "@common/*": ["src/components/common/*"],
            "@core/*": ["src/components/core/*"],
            "@example_plugin/*": [
                "../../examples/example_plugin/example_plugin/ui/*"
            ]
        }
    }
}

// jsconfig.js
{
    "extends": "./jsconfig.paths.json",
    "compilerOptions": {}
}

// craco.config.js

const { CracoAliasPlugin } = require("react-app-alias");

module.exports = {
    plugins: [
        {
            plugin: CracoAliasPlugin,
        },
    ],

    webpack: {
        configure: (webpackConfig, { env, paths }) => {

            webpackConfig.output.filename = "static/js/[name].js"; 
            webpackConfig.output.assetModuleFilename = "static/media/[name].[ext]";
            webpackConfig.output.chunkFilename = "static/js/[id]-[chunkhash].js";

            webpackConfig.devtool = "eval-cheap-module-source-map";

            webpackConfig.plugins[5].options.filename = "static/css/[name].css";
            return webpackConfig;
        },
    },
};

[bryanculver]

I have narrowed this down to this line: https://github.com/oklas/react-app-alias/blob/9194060d3e552bf6f05733ce9aa3b15673096cac/packages/react-app-alias-ex/src/index.js#L123-L126

Jest's default for moduleDirectories is ["node_modules"].

Based on my debugging any my resulting config:

{
  ///
  rootDir: '/opt/node/project',
  moduleDirectories: [ '/opt/node/project/node_modules' ]
}

and how I assume Jest is working is it expects to search something like rootDir+moduleDirectory. Even though '/opt/node/project/node_modules' is the correct full path it's not finding it. Maybe paths.appPath is unnecessary in this case when appending the node modules but 🤷.

Unfortunately, manually setting moduleDirectories in my setup didn't work either because the bad path resulted in other errors:

 FAIL  src/views/__tests__/BSListViewTemplate.test.js
  ● Test suite failed to run

    TypeError: (0 , _expect.setState) is not a function

      at initialize (node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:145:24)

Maybe something like this instead?

path.relative(expanded.rootDir, path.resolve(paths.appPath, 'node_modules'))

[oklas]

Hi, thank you for info and analize. What do you mean by 'maybe', why do you doubt? I agree to add this, seems it mostly same. Did you checked and this solves your problem? If so, I will check tests and add a fix or you can make a pr.

[bryanculver]

Hi, thank you for info and analize. What do you mean by 'maybe', why do you doubt? I agree to add this, seems it mostly same. Did you checked and this solves your problem? If so, I will check tests and add a fix or you can make a pr.

I say maybe because I am not using the code block to address what you introduced it to do: https://github.com/oklas/react-app-alias/issues/18

I see you added tests to your PR where you fixed the bug. I will open a PR with my proposed fix, although I am not certain how I will write a test to validate the fix because if I read your tests correctly it should just work. Maybe a difference between a typescript and non-typescript project.

[oklas]

What is the feature that lead this error? How much it need to add to existing test to reproduce?

[oklas]

Is this because your webpack additinal options mentioned above? Or a reason not clear at all?

[bryanculver]

Webpack has no issues, just Jest. Jest wouldn't see my modules. You can see what I had to do in my project to fix this issue: https://github.com/nautobot/nautobot/pull/3546/files#diff-458c7051c4e43d07a479d6bd045f1742a59b9d42f49b50acb49e8c5bde393cc7

I just tweaked the aliasJest function as described above.

[bryanculver]

I think the tests are passing for #96.

react-app-alias on  master 
➜ yarn test
yarn run v1.22.19
$ yarn test:unit && yarn test:integration
$ jest

 PASS  packages/react-app-alias/__tests__/react-app-alias.test.js

 PASS  packages/react-app-alias-ex/__tests__/react-app-alias-ex.test.js

Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/v8-to-istanbul/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/v8-to-istanbul/node_modules/source-map/lib/wasm.js:25:16)
    at /Users/bryanculver/Developer/repos/react-app-alias/node_modules/v8-to-istanbul/node_modules/source-map/lib/source-map-consumer.js:264:14
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async V8ToIstanbul.load (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/v8-to-istanbul/lib/v8-to-istanbul.js:58:26)
    at async /Users/bryanculver/Developer/repos/react-app-alias/node_modules/@jest/reporters/build/CoverageReporter.js:624:11
    at async Promise.all (index 0)
    at async CoverageReporter._getCoverageResult (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/@jest/reporters/build/CoverageReporter.js:586:35)
    at async CoverageReporter.onRunComplete (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/@jest/reporters/build/CoverageReporter.js:231:34)
    at async ReporterDispatcher.onRunComplete (/Users/bryanculver/Developer/repos/react-app-alias/node_modules/@jest/core/build/ReporterDispatcher.js:88:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I suspect I'm getting an error You must provide the URL of lib/mappings.wasm due to not having done much testing in this space before so my development environment isn't robust.

[oklas]

So as I said it would be good to know feature that lead this error. The best way is reproducible project (for example change of one of existing test). May be the error caused by one of the reasons because using alias outside is not recommended (mentioned in readme or something that yet not mentioned). May be another node_modules directory appears available and used by import or even it expect node_modules in another place where there is no such one. Even to try to say more need to have reproducible example.

[bryanculver]

I've tried to reproduce this and something weird is happening with dependencies. Again this builds just fine with Webpack. Jest is what complains about imports.

Original Project: https://github.com/nautobot/nautobot/tree/u/bryanculver-react-app-alias-bug-reproduce/nautobot/ui

Smaller Reproduction Project: https://github.com/bryanculver/react-app-alias-bug-reproduce/tree/main/project/ui

The smaller project can't reproduce the issue but I can consistently reproduce it in the bigger project (note the bigger project templates out app_imports.js and jsconfig.paths.json when starting up if you're trying to compare the differences).

[bryanculver]

So I figured out the issue. It appears my package-lock.json had somehow become corrupted. Using the package-lock.json from my attempt to reproduce the issue above and reintroducing my dependencies seemed to have fixed it.

I still think ...(config.moduleDirectories || []), should be changed to ...(config.moduleDirectories || ["node_modules"]), but I see why you might not want to use a relative path for the external case.