I get the error message as soon as I add this reference in my vue component:
<script setup>
import { ExclamationTriangleIcon, XMarkIcon } from '#heroicons/vue/24/outline'
I am using tailwindcss 3.1.8.
I have executed this:
npm install #headlessui/vue #heroicons/vue
I have version 1.0.6 of heroicons installed. Why is the icon not found?
Looks like heroicons 1.0.6 is outdated. Had to get version 2.0.* by calling
npm install #heroicons/vue#latest
Import of icons had to be changed from '#heroicons/vue/**' to '#heroicons/vue/24/*'
I also had to switch some old icons with new ones, as they may have been renamed or removed. New Icons may be found at https://unpkg.com/browse/#heroicons/vue#2.0.10/24/outline/ (the page https://vue-hero-icons.netlify.app/ does not work as it still contains old ones)
I want to implement DESO into my app. The most convenient way is probably the DESO library from their developer hub.
I want to be as precise as possible here. So first I downloaded the deso-protocol npm package. In the readme of this library is stated that it is generated with nx. So I downloaded that too. No big issues. And I should: Run nx build deso-protocol to build the library.(in readme). Than I get an error that there is no workspace, when I want to create one with "npx create-nx-workspace deso-protocol --preset=core" , nx gets stuck in that process.
So I decided to do it without the building(I don't quite now if that is needed, am new to npm) and just do it with the classic js imports.
The "import Deso from 'deso-protocol';" from the docs isn't working. Because the module imports have to start with "/" or "./" or sth. similar etc.
So I tried import Deso from './node_modules/deso-protocol/src/index.js';. That's not working. Error:
Uncaught SyntaxError: import not found: default
using import { Deso } from './node_modules/deso-protocol/src/index.js'; doesn't work either because then Deso isn't found. I don't quite now what to do now.
Edit
I use plain JavaScript. deso-protocol uses plain JavaScript too, I hope. There isn't much code yet:
Index.js file:
import Deso from './node_modules/deso-protocol/src/index.js';
test.html file:
<script type="module" src="index.js"></script>
That's it. I use http.server from Python to host the local server.
Just install deso-protocol library from https://www.npmjs.com/package/deso-protocol with npm i deso-protocol
In your app import it as usual
import Deso from "deso-protocol";
And initialize
const deso = new Deso();
Readme file is really confusing, I have no idea what
Run nx build deso-protocol to build the library.
is supposed to mean, it works without that no problem.
After upgrading React Native to 0.62.2, and installing react-native-material-dropdown` library, project is giving this error:
I solved this by,
Commenting itemTextStyle: Text.propTypes.style in
..\node_modules\react-native-material-dropdown\src\components\dropdown
file.
And remove Animated in Animated.Text.propTypes.style in
affix/index
helper/index
label/index
of react-native-material-textfield.
And added import { Animated, Text} from 'react-native'; in each of
above three files.
Here is another solution I've found.
Remove installed package react-native-material-dropdown
yarn remove react-native-material-dropdown
Install new packages react-native-material-dropdown-v2 and react-native-paper
yarn add react-native-material-dropdown-v2 react-native-paper
Swap react-native-material-dropdown to react-native-material-dropdown-v2 in your code
e.g.
import { Dropdown } from 'react-native-material-dropdown' to import { Dropdown } from 'react-native-material-dropdown-v2'
I found the same problem while using #react-navigation/drawer
I've solved it by these steps.
Open node_modules and then search for react-native-material-textfield open the file and go to src folder
Under src you will see affix, helper, label folder - under each folder, there is an index.js
open the index.js of the mentioned folders one by one (all 3 folders) and search for the text style: Animated.Text.propTypes.style, and replace it by style: Text.propTypes
And import text form react-native like this import { Animated , Text} from 'react-native';
And now reload the terminal, and you are good to go
There is an issue open on github about this problem. As mentioned in the comment, it is possible to use this option to edit node modules, or create a patch so that it is not necessary to edit the files every time you add a new library or run an npm install.
Instruction:
Create patches directory in your project's root
Copy patch to
patches/react-native-material-textfield+0.16.1.patch
yarn add patch-package postinstall-postinstall or npm i patch-package
yarn patch-package or npx patch-package
Fix is already applied. Add the following to package.json to not repeat the same next time:
"scripts": {
+ "postinstall": "patch-package"
}
https://github.com/n4kz/react-native-material-textfield/issues/249#issuecomment-625791243
I faced the same issue while using react-native-material-dropdown.
Fix:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
Replace style: Animated.Text.propTypes.style with style: Text.propType
import {Text} in each of these 3 files import { Animated ,Text} from 'react-native'
This should fix the issue
react-native version: 0.64.0
Just update the library they updated their library with fixes here is the link
https://www.npmjs.com/package/react-native-material-dropdown-v2-fixed
For me it was the package "react-native-easy-toast" at version 2.0.0. The weird thing was, that I couldn't find "propTypes" or "Animated" anywhere in my Code or in my libs (node-modules). I'd expect to find it somewhere in the react-native-easy-toast folder in node_modules...
Anyway, after commenting all my toasts the app started again.
I now also found a patch for this: "https://github.com/crazycodeboy/react-native-easy-toast/issues/118" and with this and from other here mentioned patch-package it worked with the toasts and the patch gets automatically applied after npm install:)
I am using react-native-material-textfield package, and I also faced this error so I added this piece of code in my JS file right before importing:
import { Animated, Text } from 'react-native';
Animated.Text.propTypes = Animated.Text.propTypes || Text.propTypes;
import { TextField } from 'react-native-material-textfield';
I have faced the same issue while using react-native-material-dropdown.
Fixed using this:
navigate to node_modules/react-native-material-textfield/src/components
Open files affix/index.js, helper/index.js and label/index.js
I have resolved my issue by using this lib
react-native-material-dropdown-no-proptypes
I cloned an existant Vuejs project and made a "npm install".
Everything installed well except "moment" and maybe "vue-moment".
i've got this error :
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'moment' in '/app/src'
so in installed them with "npm install --save moment vue-moment"
And still got the error.
here some code of my main.js file :
import moment from 'moment'
import VueMoment from 'vue-moment'
// Vue use moment.js
Vue.use(VueMoment, {
moment
});
moment.locale('fr');
the packages are installed and present in the node_modules folder and are present also in the package.log.json and package.json.
The weird things is, when other people clones this project, they don't have the problem. only me...
One (maybe) pist, is when i put my mouse hover the 'moment' (of the import), i see this :
.../node_modules/moment/moment like there is 2 moment folders, but it looks normal in the node_modules folder.
Thanks in advance!
EDIT SOLVED :
The problem was because i started the project with "docker-compose up" and not "npm run serve" on the FRONT. It started but i had this "moment" problem. Now it works well with the good console code to start the project ...
You cannot use the import function with moment.js since exports is not defined for that module. So you have to use require. You can do this :
Vue.use(require('vue-moment'));
If you really want to use moment.js using import you can do this as well.
import * as moment from 'moment';
Reference: https://www.npmjs.com/package/vue-moment
https://momentjs.com/docs/
Webpack / typescript require works but import doesn't
I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.
Sources:
https://vuetifyjs.com/en/getting-started/quick-start
https://reactiverse.io/es4x/start/install
Steps:
Create an out-of-the-box Vuetify:
npm install #vue/cli -g
vue create my-app
cd my-app
vue add vuetify
Test that it works by running it in Node
npm run start
When I view http://localhost:8080 (using node) it looks good. So I
create a compiled version in a dist folder
npm run build
Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code
npm install -g es4x-pm
es4x init
npm install #vertx/unit --save-dev
npm install #vertx/core --save-prod
npm install #vertx/web --save-prod
npm install
Create an index.js file so vert.x server for the index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
Run Vert.x
npm start
When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'
Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies
You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:
import { Router, StaticHandler } from '#vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
So now all your static files should be served correctly...
Not sure I'm grokking this question.
Vuetify is runs in the browser, Es4x runs on the server.
You just need way to serve the static 'dist' folder, as described above.
ps: I'm assuming you're not doing server-side rendering, in which case, I'm not sure if es4x will work (it might).