webpack and yarn struggling to load modules - javascript

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.

Related

This dependency was not found

When i try to npm run serve it stops at 98% and :
ERROR
Failed to compile with 1 error
This dependency was not found:
* #/components/HelloWorld.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Home.vue?vue&type=script&lang=js
To install it, you can run: npm install --save #/components/HelloWorld.vue
I looked up for some sources but never helped. Even installing HelloWorld.vue turns an error.
It looks like one of your files is trying to load a local component called HelloWorld.vue and it may not exist in your project structure. You shouldn't try to "install" it, but rather head to the Home.vue file where this error is being triggered from (see Home.vue at th end of the error message?). Then ask yourself, do you actually want to load HelloWorld.vue?
I imagine you're following some sort of "getting started with Vue" guide and you've been instructed to include that file. You'll have to either create that file in the {YOUR_PROJECT}/src/components/ folder, or remove the code that's trying to load it.
Alternatively, this could be a configuration error in which you're trying to use the # alias but it hasn't been setup in webpack properly. Please include more info if this doesn't solve your problem.
Maybe Vue Js cli is not installed on server
// to install vue on ubuntu
npm install -g #vue/cli
// check if it was installed successfully
vue --version
#vue/cli 4.1.2

Module Parse Failed while trying to implement scss into wepack & babel configuration

i am trying to add scss to my webpack / babel configuration but when running npm run build it throws me the following error:
Since this is my first time using webpack as well as babel, I honestly have no clue what I have to change.
I created a repo with all my files. And did a screenshot of the error message. If you need any other information just tell me.
It would be awesome if we could fix my (probably garbage code) up to the point where it is running.
Thank you so much!!!
You need to try sass-loader
npm install sass-loader node-sass webpack --save-dev
For more info please look at this https://webpack.js.org/loaders/sass-loader/

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

How do I get my ember.js app to import modules installed from bower or npm

I'm pretty new to some of this stuff and I feel like I must just be missing something simple. I have a very basic Ember.js app that I created with the CLI tool flowing the guide. The code is at https://github.com/nfriedly/particle-webhook-manager
It has a couple of routes and components, and a single third-party dependency, particle-api-js. I installed it twice, via bower and npm, and I'm importing it in one of my components like so:
import particle from 'particle-api-js';
I start up my server with ember serve and it builds successfully. I then open my browser to http://localhost:4200/login where I load the component and it gives me the following error in my console:
Error: Could not find module `particle-api-js` imported from `particle-webhook-manager/components/login-form`
So, my main question is: what am I doing wrong here/how do I make it work?
My secondary question is: why did it "build" successfully and then throw a runtime error for the missing module - shouldn't it have found that in the build stage?
You should not use bower anymore. Use ember browserify to import things installed with npm.
You can import bower modules in your ember-cli-build.js with app.import('bower_components/...js').
You can not import them directly, but you can create a vendor shim to provide this for you. Checkout the ember-cli documentation for this.

Webpack unable to resolve a third-party module

I'm using compact/angular-bootstrap-lightbox in a project migrating from RequireJS to webpack, and am wondering if the error I'm getting is in my setup or the module itself.
In my webpack entry point, I have:
require("angular");
require("angular-bootstrap-lightbox");
...
So, to attempt to satisfy those dependencies:
npm install angular
npm install angular-bootstrap-lightbox
webpack
Results in:
Module not found: Error: Cannot resolve module 'angular-bootstrap-lightbox' in ...
If I comment out the angular-bootstrap-lightbox require() call, Google's AngularJS imports just fine, which makes me think the issue is with the third party module. If that is the case, what are they missing that they should add, and is there a temporary workaround?
angular-bootstrap-lightbox doesn't have a main file specified in package.json. But there is index.js which requires the script. So you just need to specify it manually:
require("angular-bootstrap-lightbox/index.js");
You probably want to load css as well. So specify it similar way:
require("angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.css");

Categories