Cannot find module 'jquery.tagsinput-revisited - npm

I've installed jquery.tagsinput-revisited via npm, which was provided here
npm i jquery.tagsinput-revisited
Then, I've added
require('jquery.tagsinput-revisited');
in one of my js file and
#import '~jquery.tagsinput-revisited/src/jquery.tagsinput-revisited';
in one of SCSS file.
Now, I'm having these error while npm run watch
This dependency was not found:
jquery.tagsinput-revisited in ./resources/js/bundle1.js
To install it, you can run: npm install --save
jquery.tagsinput-revisited
ERROR in ./resources/js/bundle1.js Module not found: Error: Can't
resolve 'jquery.tagsinput-revisited' in
'C:\xampp\htdocs\vetforum\www\resources\js' #
./resources/js/bundle1.js 9:0-37 # multi ./resources/js/bundle1.js
SCSS file get successfully compiled,but there seems an error in the js file.


After several attempts, i've done like this
In JS file
require('../vendors/tagsinput/jquery.tagsinput-revisited');
In SCSS file
#import '../vendors/tagsinput/jquery.tagsinput-revisited';

Related

Local npm module cannot be found

In a React Boilerplate project, I am trying to use a local module, but getting:
ERROR in ./node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
Module build failed: Error: ENOENT: no such file or directory, open '/Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js'
Both paths do exist:
$ ls node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
and
$ ls /Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
/Users/username/Documents/project/node_modules/react-sortable-tree-theme-file-explorer/dist/main.js
...so I can't figure out what the complaint is. The paths and files DO EXIST. I used npm link initially, but that never worked, and so I also tried npm install ../react-sortable-tree-theme-file-explorer but it gives the exact same results.
I am importing the package as in:
import FileExplorerThemeBase from "react-sortable-tree-theme-file-explorer";

Cannot find module 'tailwindcss'

I am trying out tailwindcss with my Vue project and while I solved some issue I had with the routing (while trying to break down my code into smaller components), I think I broke something else.
The code was compiling before I added my new routes. I can't seem to find what is wrong in this case.
Failed to compile.
./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/SiteHeader.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Cannot find module 'tailwindcss'
you can check out this repo, has very few files https://github.com/anaivanm/vue-tw/

First :
npm run dev
Then
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
For More Info :
Tailwind Docs
Also check this out :Restarting NPM

Include bootstrap in nuxt.js

When I type
npm install bootstrap
I got this error:
ERROR Failed to compile with 4 errors 21:39:34
These dependencies were not found:
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue in ./pages/Index.1.vue
* !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue in ./pages/Index.vue
To install them, you can run: npm install --save !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-82a4fe82","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.1.vue !!vue-style-loader?{"sourceMap":true}!css-loader?{"sourceMap":true,"minimize":false,"importLoaders":1,"alias":{"/assets":"E:\\Vueproject\\nuxtproject\\assets","/static":"E:\\Vueproject\\nuxtproject\\static"}}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-db198508","scoped":true,"hasInlineConfig":true}!sass-loader?{"indentedSyntax":true}!../node_modules/vue-loader/lib/selector?type=styles&index=0!./Index.vue
These relative modules were not found:
* ../.nuxt/components/Footer in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.vue* ../.nuxt/components/Footer.vue in ./node_modules/babel-loader/lib?{"babelrc":false,"cacheDirectory":true,"presets":[["E://Vueproject//nuxtproject//node_modules//babel-preset-vue-app//dist//index.common.js",{"targets":{"ie":9,"uglify":true}}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./pages/Index.1.vue
What do I do?

The first part means you are missing some loaders that WebPack needs to bundle your styles.
Try running npm install --save vue-style-loader css-loader for that. It will install those two loaders.
These relative modules were not found: signals something else in your Index page, where you are trying to use the Footer component, but failed to import it or register it correctly. Have a look at the Vue Docs about registering your components.

AURELIA-CLI : how to use node module 'crypto' with aurelia-cli loader

I have an AURELIA application that uses the node module 'crypto'.
It works fine with GULP/JSPM (after 'npm install crypto' and 'jspm install crypto').
Now I want to use aurelia-cli instead of JSPM.
But I didn't succeed to load 'crypto' with the Aurelia-cli.
When building the app with 'au build' I got the error:
Error: ENOENT: no such file or directory, open '......\src\crypto.js'
I certainly need to reference 'crypto' in aurelia.json file but I don't find what to insert in this file.
Thanks if somebody could provide aurelia.json content for using crypto.

My npm module build causing webpack error: Module not found: Error: Cannot resolve 'file' or 'directory'

I am trying to publish a fork of an open source React component to npm and use load it in my webpack after a successful npm install of my published module.
The webpack is throwing a Module not found: Error: Cannot resolve 'file' or 'directory' ./Slider.jsx in /home1... error when loading.
The lib/index.js file that my rc-tools build created is:
1'use strict';
2
3 module.exports = require('./Slider.jsx');
while, the main fork of the repo has
1'use strict';
2
3 module.exports = require('./Slider');
as their created lib/index.js.
I am using the same build (rc-tools) tool as them and have nearly identical package.json. Why is my repo creating a different index.js and is this the cause of my webpack.config not loading?
Here is the link to the npm component: https://www.npmjs.com/package/meraki-slider

In my journey of learning about node and publishing, I simply forgot to remove the .jsx endings from my /src folder, which was causing my build to include them in my /lib folder and causing webpack to not compile. :P