I made my first Vue project and everything works fine but it's ugly, so now I want to improve it by using Buefy.
I followed the instructions but I can't get it to work, I get the error:
Cannot read property 'use' of undefined
I installed it and wrote this code:
import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
What am I missing?
The latest version of Buefy (v0.9.8) supports Vue 2 but does not support Vue 3 .
Related
I am working on porting an existing React App to ReScript React, however I am running into a few issues. Namely I can't for the life of me figure out how to import CSS in ReScript, for example, In React to import Bootstrap all I would have to do is:
import 'bootstrap/dist/css/bootstrap.min.css';
However there is no corresponding way to do this in ReScript (to my knowledge), I tried doing:
#module("bootstrap/dist/css/bootstrap.min.css")
But it doesn't work. How can I import CSS files in ReScript React?
Use a %%raw expression to import CSS files within your ReScript / React component code:
// in a CommonJS setup
%%raw("require('./styles/main.css')")
// or with ES6
%%raw("import './styles/main.css'")
Reference - https://rescript-lang.org/docs/react/latest/styling
I first do this on the command line inside my Meteor project:
meteor npm install --save materialuze-css
This includes materialize to package.json.
Then, I added this to main.js:
import M from 'materialize-css';
But, this does not include the stylesheet to my project.
How to make this work as expected?
Use SCSS
Materialze is scss based, so you should use the scss compiler (but you are not forced to do, see the section below):
$ meteor remove standard-minifier-css
$ meteor add fourseven:scss seba:minifiers-autoprefixer
You also need to import the scss file:
import M from 'materialize-css';
import 'materialize-css/sass/materialize.scss'
Use plain css
If you only need the default css and don't intend to customize colors etc.
you may be fine by importing the dist css:
import M from 'materialize-css';
import 'materialize-css/dist/css/materialize.css'
No need to use the scss compiler then. Note, that you can safely use the materialize.css and don't require the materialize.min.css since it will be minified later when your Meteor app build for production using the standard-minifier-css.
Already installed moment and react-moment and imported in my jsx component like below
import React from 'react'
import Moment from 'react-moment'
<Moment format="MMMM D, YYYY">{post.post_date}</Moment>
Got Module not found: Error: Can't resolve './locale'
Rolling back to moment 2.24.0 fixed the issue.
yarn add moment#2.24.0
I was building react app using webpack integration. In webpack.common.js file,
in entry path, i gave vendor.js and app.js and
this is my vendor file
import 'react'
import 'react-dom'
// third party libraries
import 'jquery'
import 'popper.js'
import 'bootstrap'
import 'bootswatch/dist/sketchy/bootstrap.min.css'
when building for production, it gets failing and error is
JisonParserError: Parse error on line 1: 255px 25px 225px...------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "LENGTH" at C:\reactjs\react-events-portal\vendors~vendor.css:13:90472
If i remove css bootswatch then, build is working fine. bootswatch path is correct but i dont know how it is working in dev mode not in prod build.
Please help
Look at this https://github.com/facebook/create-react-app/issues/6004 It seems to be bootswatch bug.
It's a problem with Sketchy theme in Botswatch.
They are working in it. https://github.com/thomaspark/bootswatch/issues/878 .
Waiting for new a version.
BTW if you change theme it works.
Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using select2#4.0.3 and importing it this way in app.js:
import $ from 'jquery';
import 'bootstrap';
import 'select2';
I also tried to use
Encore.autoProvidejQuery()
in webpack.config.js, then taking care of commenting the
import $ from 'jquery';
line in app.js so that jquery is not imported twice.
I tried everything I could find in other answsers like:
import select2 form 'select2';
$(() => {
$('.select2-enable').select2();
});
or
select2($);
Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function
EDIT:
Working now. Everytime I made a change in app.js (and rebuilt) I used the firefox devtool console to check if it was working but I always got the
not a function
error even though the problem was solved and select2 was working.
Is this because I'm using Webpack that the browser console doesn't recognize the select2() function anymore?
First install it using yarn:
yarn add select2
Then use it with require instead of import:
require('select2')
at your app.js file.
It works the same using require or import.
Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.
So, despite of them looking the same, try to always use require.