Module not found when using flat-ui with webpack - npm

I want to use flat-ui with webpack when installed with npm. I have created a test project. The last commit is before installing flat-ui. When I do install and use
require('flat-ui');
I get the error:
Module not found: Error: Cannot resolve module 'flat-ui'
In my research I found this gist but am not familiar enough with webpack to understand it well enough.
My goal is to use npm to install dependencies rather than clutter up my project.

'flat-ui' npm package is not official package. This package provides old version. ( issue )
You need to install 'designmodo-flat-ui' package.

Related

npx from command line does not find imports?

I'm trying to run a simple hello.ts script from command line. This works if the script has no dependencies:
npx ts-node hello.ts
But as soon as I start adding some dependencies...
import _ from 'lodash';
console.log('hello');
It fails:
Cannot find module 'lodash' or its corresponding type declarations.
It keeps failing even if I install the dependencies globally. So how do I tell npx (or ts-node for that matter) to consider globally installed dependencies?
Update
Using Node 16.9.1 (upgraded via Version Lens). The error seems to have disappeared after uninstalling/reinstalling the imported libraries a few times.
If you're using npm >=1.0, you can use npm link to create a local link to a package already installed globally. (Caveat: The OS must support symlinks.)
IE: npm install -g lodash && npm link lodash
However, this doesn't come without its problems.
npm link is a development tool. It's awesome for managing packages on your local development box. But deploying with npm link is basically asking for problems, since it makes it super easy to update things without realizing it.
As an alternative, you can install the packages locally as well as globally.
For additional information, see:
https://nodejs.org/en/blog/npm/npm-1-0-link/
https://nodejs.org/en/blog/npm/npm-1-0-global-vs-local-installation/
Are you using the n package by any chance? I used n to change from a newer version of node (16.2.0) to an older version of node (12.13.0), ran npm i and npx failed with a different error.
Using n to change back to 16.2.0 seems to have resolved the issue so I'm thinking perhaps it was an issue with package-lock.json or such

Cannot find module 'babel-preset-react-native'

I have recently integrated react-native-web into my native project and have included webpack. I've followed all the instructions listed here.
However, when trying to run using the webpack command listed on the bottom of that page, i keep getting the error:
ERROR in ./index.web.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-react-native' from '<*path to root*>'
I have the preset metro-react-native-preset already installed and my babel config looks like the following:
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset']
};
Im currently using React Native 0.62
Could you try to install 'babel-preset-react-native'?
npm install --save -dev babel-preset-react-native
You said you've got metro-react-native-preset already installed but your config has metro-react-native-babel-preset - I assume that mismatch is just accidental?
Anyway, that's probably unrelated. Here's a few things to try:
Have you verified you've got 0.62 of react native installed? I.e. in the npm lock file, as maybe you're on an older version (pre 0.57) which uses that older plugin.
Have you got a .babelrc file too, perhaps, with the other plugin defined instead?
Similar to (1), have you tried to delete the lock file and/or node_modules folder and run npm install again from scratch so versions match up properly.

How to link a globally installed node package to a project with yarn?

I have just started using yarn and I can't figure out how to link a globally installed package to a project. With npm I would just run npm link <package-name> but it doesn't work with yarn.
when I run yarn link <package-name> it gives this error:
yarn link v1.22.4
error No registered package found called "express".
info Visit https://yarnpkg.com/en/docs/cli/link for documentation about this command.
The link functionality is not really meant for linking global packages to a project. It is meant to link a package that you are working on to another project that you are working on. The fact, that the npm link command can be used to link globally installed packages to the current project is just an implementation detail of npm. From the yarn docs:
For the vast majority of packages it is considered a bad practice to have global dependencies because they are implicit. It is much better to add all of your dependencies locally so that they are explicit and anyone else using your project gets the same set of dependencies.
So you should just add the dependencies via yarn add <package-name>.

Structuring and publishing a Vue component to NPM

I'm trying to publish my Vue component(s) to NPM but I'm running into some issues.
I followed these instructions: https://www.xiegerts.com/post/creating-vue-component-library-structure/
My structure is as follows:
The package is published here: https://www.npmjs.com/package/bootstrap-vue-formgenerator
Now, when I install my package using NPM and try to use it, it cannot find it. Webstorm also underlines the name of the package telling me the module has not been installed.
What am I doing wrong here?

Install mapbox-gl package via jspm failing

I am trying to add the mapbox gl package to my Aurealia Typescript skeleton using jspm. I am using the following command.
jspm install npm:mapbox-gl
This is what I am getting.
Looking up npm:mapbox-gl
Updating registry cache...
Downloading npm:mapbox-gl#0.19.1
warn Error on processPackageConfig
Package.json dependency mapbox-gl-shaders set to github:mapbox/mapbox-gl-shaders#e4737bb136d718f9c5fe8d943380f05db6249b57, which is not a valid dependency format for npm.
It's advisable to publish jspm-style packages to GitHub or another registry so conventions are clear.
warn Error processing package config for npm:mapbox-gl.
err Error processing package config for npm:mapbox-gl.
warn Installation changes not saved.
I am using jspm 0.16.36.
When I try to install the package via npm install mapbox-gl it works normally. Any suggestions?
Considering you are using jspm, you might also want to try and reference it through the GitHub repo rather than through npm:
$ jspm install github:mapbox/mapbox-gl-js
It works for me with jspm v16.x and v0.21.0 of MapboxGL.