指向分支时如何解决“找不到模块”？

Question

I hope you guys are doing well.

So, the problem that I'm facing is that webpacker cannot find " react-visual-filter " module when I point to a branch.

Before, when everything was working fine, this package was pointing to a specific version:

"react-visual-filter": "^1.0.9"

So I created a simple PR( #5 ) with improvement and I'm trying to test the result outside the module. To update the package.json file to point to my branch I used this command:

yarn add https://github.com/rfdavid/react-visual-filter.git#feature/add-text-box

And the package.json file got updated to:

"react-visual-filter": "https://github.com/rfdavid/react-visual-filter.git#feature/add-text-box"

Ok. I think everything is fine, but when webpacker try to compile the modifications this happens:

Module not found: Error: Can't resolve 'react-visual-filter' in '/path/to/app/javascript/packs'

Not found?

I tried to delete the node_modules and install everything again with yarn, but no luck.

I can see that the react-visual-filter package was installed successfully inside the node_modules folder, but for some reason, it could not be found.

The funny thing is, after getting this error, if I try to update this:

import VisualFilter from "react-visual-filter";

To:

import VisualFilter from "react-visual-filter/src";

The module is found, but I face another problem:

Module parse failed: Unexpected token (155:6)
You may need an appropriate loader to handle this file type, currently, no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

Wait, what? So the package exist but it can be parsed?

But this file was being parsed just fine before. I'm not sure if this error is accurate. And I think I need to make this works this way:

import VisualFilter from "react-visual-filter";

I'm lost. If I return to "^1.0.9" the error disappears.

Probably something in my PR, but I can't see what.

I already updated yarn to 1.22.4 .

Did I miss something? Can anyone help me with this?

Thank you for your time.

Answer 1

I set up a simple react project with create-react-app and additionally installed react-visual-filter using link to github instead of version. I got the same error.

The content of react-visual-filter was missing dist folder with necessary files such as entrypoint index.js

The easiest workaround would be to unignore dist folder and push it to branch.

If you can't do that, you might exclude src webpack.config.js and other stuff from .npmignore and build it locally after installing

cd node_modules/react-visual-filter

npm run build