We Keep Coding

webpack and yarn struggling to load modules

I've run into this issue for a while now, and there seems to be a pattern so I'm assuming that the problem lies in the way I have webpack setup.
I'm using Ruby on Rails 6 which uses webpack (or webpacker, the rails wrapper) to install npm packages. However, webpacker uses yarn. Two packages that I've added yield very similar errors that make my entire site not work anymore.
Error 1:
when I yarn add: bootstrap-fileinput and run the import statement in my scss file and the import statement in my js file, I get this error:
Error: Cannot find module '../img/loading.gif'
Error 2:
When I yarn add gritter and run the import statement in my scss file and the import statement in my js file, I get this error:
Error: Cannot find module '../images/ie-spacer.gif'
Perhaps yarn isn't installing these gifs? or maybe webpack can't find them? This isn't happening with all the npm packages I add, but some of them do throw this error and if I find anymore I'll add them here.
This might have to do with how I have webpack setup, i.e., with regards to having certain loaders, but I could be wrong.
Any help is appreciated.

Error importing local npm package

We have several websites, each in its own project, and we are looking to migrate them all to using Vue.js. Each website has its own directory with .vue files that are then bundled using Webpack. We have a Webpack config in place that converts the .vue files, bundles, lints and pipes it all through babel and it works fine.
However, now that we have been moving things over for several weeks we have noticed that there are several components and core javascript files that are very similar and ideally we want to pull these out into a shared library of vue components and functions.
We have extracted several .vue into a folder alongside the websites, and put them together as a basic npm module with its own package.json, and include them using an npm file include, so in the package.json it just looks like: "vue-shared": "file:../CommonJavascript/Vue". Now when we try to use Webpack to build the bundle, we get the error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'
I'm not sure where this error is coming from, because we aren't using react anywhere, and it seemed happy enough to build fine before we moved the files out. At the moment the only dependency in the shared module is moment, and it only contains 4 .vue, and a basic wrapper to bundle them up:
import button from 'Button.vue'
import loading from 'Loading.vue'
import modal from 'Modal.vue'
import progressBar from 'ProgressBar.vue'
export default {
button,
loading,
modal,
progressBar,
}
But, I was curious so I decided to add the package (even though we don't need it) to see if it would fix the issue, but I then get a new error:
ERROR in ../CommonJavascript/Vue/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "transform-runtime" specified in "base" at 0, attempted to resolve relative to "C:\Projects\Tmo\Code\CommonJavascript\Vue"
Now, that one makes a little more sense, we do use the babel runtime transform on the main project, but it isn't required by anything in the shared project and even if it was, surely the fact it is included in the main project means it should still build.
Partly, it seems perhaps I'm just not understanding the way npm resolves dependencies. It seems to be trying to now resolve some dependencies by looking in the shared files project and I dont know why. Also I have no idea where this strange dependency on eslint-plugin-react has come from.
So I guess this is a multi-part question. What is up with the way npm is trying to resolve the dependencies? Am I doing things right by moving the .vue files into a separate project, wrapping it up as a module and requiring it in the main project? and if not, what is the best way to have shared dependencies like this?

This was caused by a mixture of two separate issues:
The import statements didn't reference the file properly, the correct syntax is: import button from './Button.vue' (note the change to file path)
When you add a local package to npm via a path, it creates a symlink to the folder rather than copying the files over (this has been the behaviour since npm v5+). This then changes the way webpack tries to resolve dependencies since it then looks up from the location of the shared files to try and resolve dependencies including thing like eslint and babel.
The eslint-plugin-react dependency was because in visual studio code I had installed the eslint plugin, which it seems had created a .eslintrc file which reference the react plugin in my user folder (c:\users\<username>). Eslint will then use this as the default if it can't find a config file (which it couldn't because it was looking above the shared files because of the pathing issues described above)
We have decided we will be using a git submodule for these files going forward

Cannot use typescript class from other local typescript module using browserify

I have a common npm module containing TypeScript which is an node module providing some classes and functionality. This module is packaged via browserify + tsify and also exports the declaration files and built with gulp.
I have another npm module using TypeScript which imports this module locally via file:../modulename and tries to use functionality from the first module. The second module is also packaged via browserify + tsify and built with gulp. The compilation of the second module works via npx tsc, but fails if I execute the gulp build file with the error message
Error: Cannot find module './AbstractClass' from 'folderInOtherModuleContainingTheJSFiles'
Interestingly it sometimes fails with this Class sometimes with another, so it seems there is also some kind of concurrent processing.
I extracted the failing code from my project and created a minimal example with this behavior here.
npm version: 5.6.0
node version: v9.5.0

For anybody who might come to this post and face the same error.
I opened an issue at tsify too, thinking it has something to do with the plugin, because npx tsc worked.
Luckily the issue has been resolved, although with a workaround. There seems to be a name collision which causes browserify to think that a require call, which is a variable, in the resulting bundle needs to be resolved, but can't. The workaround is uglifying the resulting bundle, so that the conflict does not happen. More details in the above linked issue.

How to use a private GitHub repo as a yarn dependency (internal deps not being installed)?

I am trying to use a private GitHub repository as a dependency inside a few of our repos at work.
Inside the top-level package.json, our dep is defined like:
"mycompany-models": "https://github.com/mycompany/mycompany-models#v1.2.0"
This works fine, and the source code is installed inside the top-level node_modules dir as expected. However, none of the internal dependencies are installed, such that when I do:
import mycompanyModels from 'mycompany-models'
I get all sorts of errors about dependencies missing:
ReferenceError: Unknown plugin "module-resolver" specified
...
Error: Cannot find module 'uuid/v4'
Inside the mycompany-models repo, if I add an install step, eg:
"install": "npm i"
And then reinstall dependencies, npm simply hangs forever. What is happening here? Is this just a bad idea, am I forced to transpile everything? Because this is just a private repo, there's no pre-publish step with npm, etc...

If the repo isn't being downloaded then make sure you're following this way of importing repos: https://docs.npmjs.com/files/package.json#git-urls-as-dependencies
Examples:
git+ssh://git#github.com:npm/npm.git#v1.0.27
git+ssh://git#github.com:npm/npm#semver:^5.0
git+https://isaacs#github.com/npm/npm.git
git://github.com/npm/npm.git#v1.0.27
If the package is being installed and the import is failing, make sure the main property on the package.json of the repo points to an existing file. https://docs.npmjs.com/files/package.json#main
That should be all you need to get it up and running, except if you need to transpile the module from the one that is importing it, but that's a different question.
Also, the errors that you are getting like unresolved modules, make sure those modules are in the dependencies property of the module package.json and not in the devDependencies property.
Update
What are you using to transpile the private module?
Have you thought about publishing the module to a private npm registry? https://github.com/rlidwka/sinopia

Create shared library with Webpack's DllPlugin

I want to create a core NPM package that contains all dependencies which rarely change, e.g. Angular. Since different projects will use this NPM package and Webpack is the preferred bundling and build tool, I thought Webpack's DLL plugin would be a good choice.
But somehow the consumer packages cannot resolve the contents of the library package created with the DLL plugin. I've created a minimal example here https://github.com/matoilic/webpack-dll-example. The core module only contains Angular and the consumer module should then be able to use Angular from there. But the build of the consumer package fails with the error, that 'angular' could not be found.
Module not found: Error: Can't resolve 'angular' in '.../packages/poc-module/src/application'
Does anyone have an idea what the issue could be?

It seems like the DLL plugin doesn't handle symlinks properly. In my case, I have a mono-repo with multiple packages which are linked to each other.
https://github.com/webpack/webpack/issues/3489
The workaround is to create an installable package through npm pack and to install the resulting archive instead of using npm link.