I am trying to use Vue.js 3 inside a Rails app to use a few components but I got this error in dev console
[Vue warn]: Component provided template option but runtime compilation is not
supported in this build of Vue. Configure your bundler to alias "vue"
to "vue/dist/vue.esm-bundler.js".
I tried installing using the "without build tools" version and it works.
app/javascript/components/index.js
import { createApp } from 'vue'
import MyComponent from './dropdown'
document.addEventListener('DOMContentLoaded', function(){
createApp(MyComponent).mount('#app')
})
app/javascript/components/dropdown.js
export default {
data() {
return {
message: 'Hello Vue!'
}
},
}
app/views/index.html
<div id="app">{{ message }}</div>
package.json
{
"vue": "^3.2.36"
},
"scripts": {
"build": "node esbuild.config.js",
"build:css": "sass ./app/assets/stylesheets/application.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"
}
}
esbuild doesn't have an alias feature out of the box. Just import esm bundler directly:
import { createApp } from "vue/dist/vue.esm-bundler.js"
There is a plugin for configuring aliases esbuild-plugin-alias:
https://www.npmjs.com/package/esbuild-plugin-alias
Related
I have a rails app which is actually a clone of yts.mx. Now the idea was to have the front-end work in Vue.js, for which I created an independent Vue project inside the root directory of the existing rails app.
I have written GraphQl queries and tried using apollo client for communication with Vue but it gives me a dependency not found error with the path of the module Iv'e imported.
This dependency was not found:
* graphql/queries/movies/retrieveMovies.gql 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/lib??vue-loader-options!./src/components/MovieBlock.vue?vue&type=script&lang=js&
To install it, you can run: npm install --save graphql/queries/movies/retrieveMovies.gql
Here's my retrieveMovies.gql file
query {
movies{
name
release_date
}
}
here's the script tag for the MovieBlock.vue Vue component
<script>
import GET_MOVIES from 'graphql/queries/movies/retrieveMovies.gql'
export default {
name: 'MovieBlock',
apollo: {
movies: {
query: GET_MOVIES,
update: data => {
debugger
}
}
},
data () {
return {
movies: []
}
}
}
</script>
Here's the Directory Structure of the project:
I am using rollup for bundling and getting the following error
[!] (node-resolve plugin) TypeError: Cannot read property 'preserveSymlinks' of undefined
I am attaching rollup configuration
// rollup.config.js
import { terser } from "rollup-plugin-terser";
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import nodeResolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
export default {
input: 'src/sdk.js',
output: [
{ file: './dist/sdk.iife.js', format: 'iife' },
{ file: './dist/sdk.min.js', format: 'cjs' },
{ file: './dist/sdk.esm.js', format: 'es' }
],
plugins: [
nodeResolve({
jsnext: true,
main: true,
browser: true,
preferBuiltins: true
}),
babel(),
commonjs({
include: /node_modules/
}),
terser({
include: [/^.+\.min\.js$/, '*esm*'],
exclude: ['some*'],
compress: {
drop_console: true
}
})
]
};
I have installed rollup and all dependencies as per the rollup configuration mentioned in the site.
I have found the answer.
The issue was I have installed rollup globally and dependencies like rollup-plugin-node-resolve installed locally for the project.
That caused the error.
Solution: Install rollup locally in the project folder solved my issue.
npm install rollup --save
instead of npm install rollup --global
I'm trying to build a component library of react components. I'd like to keep my prop-types in the library as documentation rather than remove them at build time. The problem is that rollup doesn't bundle all of the prop-types functions.
I end up with these lines in my bundle:
var ReactPropTypesSecret = require('./lib/ReactPropTypesSecret');
var checkPropTypes = require('./checkPropTypes');
And the consumers of my library can't resolve those packages so it ends up in an error.
My rollup config looks like this:
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";
export default {
input: "src/index.js",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "es",
sourcemap: true
}
],
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
babel(),
resolve(),
commonjs({ include: ["./index.js", "node_modules/**"] })
]
};
How can I force rollup to bundle and expand the require('./lib/ReactPropTypesSecret') call at build time?
It turns out this was due to two problems:
Ordering of Rollup plugins. Resolve should come first, followed by commonjs, and then babel.
Babel should exclude node_modules. Having Babel parse them might leave commonjs and resolve unable to parse them to bundle dependencies.
The final config should be:
import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs";
import resolve from "rollup-plugin-node-resolve";
import pkg from "./package.json";
export default {
input: "src/index.js",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true
},
{
file: pkg.module,
format: "es",
sourcemap: true
}
],
external: Object.keys(pkg.peerDependencies || {}),
plugins: [
resolve(),
babel({
exclude: "**/node_modules/**"
}),
commonjs({ include: ["./index.js", "node_modules/**"] })
]
};
In your package.json, include 'prop-types' within 'peerDependencies'
npm install
That fixed my problem:
[!] Error: 'default' is not exported by node_modules\prop-types\index.js, imported by Component
I'm trying to create a react-native-for-web app to build for iOS and web platforms. A solution to my question will get the xcode/mac Simulator running with hot reloading of the iOS version, while also running the web version, of a "react-native-web": "^0.9.x" app.
I googled how to start one of these, and found the top few articles were written by the creator of create-react-native-web-app, so I decided to try this method. It has however been an uphill battle.
But first of all, the part that seems to work out of the box is the web part. In my first attempt, after running npx create-react-native-web-app demo-app, yarn web immediately worked. :)
But yarn iOS wouldn't build, and there were multiple issues.
I have node -v >> v11.5.0. I'm on Mohave, with xcode 10.1 already setup (for iOS development).
I needed to install the xcode 10.1 commandline tools though.
Then, I needed to yarn iOS
followed by opening the creaternwapp project under ios/ and change the Project Settings > Build System to Legacy Build System.
Then I had to attempt to build it in xcode. (turns out this is important, even though build will fail)
Then, (cd node_modules/react-native/third-party/glog-0.3.4/ && ./configure) // those numbers may change apparently, depending on install
whether I needed to or not, I changed the .babelrc from:
{
"presets": ["module:metro-react-native-babel-preset"],
}
to:
{
"presets": [["module:metro-react-native-babel-preset"], ["react-app"]],
"ignore": ["node_modules/art/core/color.js"],
"plugins": [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
],
}
then: npm install && npm audit fix and followed that with yarn install so yarn could get control back.
At this point yarn ios succeeds, but the error with setTimeout is showing on the simulator. I researched that, and apparently these sorts of errors happen when react-native install isn't complete, with the suggested solution to yarn upgrade react native. But yarn upgrade react-native#0.57.8 doesn't change anything for me.
This is not the answer I was looking for, I would love create-react-native-web-app to work out of the box .. but for now -- here's how I am using rn + rnw , even with react-native-paper:
I can describe how to get react-native-paper working in expo.
expo init --yarn --template blank demo-app
-- cd demo-app
yarn add react-native-web react-router-dom react-router-native react-app-polyfill react-art react-native-paper react-dom
-- yarn add -D react-scripts #babel/preset-flow #babel/plugin-proposal-class-properties
code package.json and add scripts:
"web": "react-scripts start",
"build-web": "react-scripts build"
-- we're going to be cheating and editing them in-place. A better practice is to copy node-modules/react-scripts/ config and scripts into your project folder, install their dependencies and get them working locally. But this is just a proof-of-concept (so .. just be sure not to reinstall node_modules or react-scripts for now on)
-- configure/add main:
"main": "react-native-main.js",
code react-native-main.js saving:
import { KeepAwake, registerRootComponent } from 'expo'
import App from './src/App'
if (__DEV__) {
KeepAwake.activate()
}
registerRootComponent(App)
mkdir src public
rm App.js
-- code src/App.js saving:
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { Provider as PaperProvider } from 'react-native-paper'
import { Router, Switch, Route } from './routing'
import Home from './Controllers/Home'
export default class App extends React.Component {
render () {
return (
<PaperProvider>
<View style={styles.app}>
<Router>
<Route exact path="/" render={props => <Home {...props} />} />
</Router>
</View>
</PaperProvider>
)
}
}
const styles = StyleSheet.create({
app: {
flex:1
}
})
mkdir src/Controllers && code src/Controllers/Home.js saving: (need to make something to demo Paper .. this is essentially just the text example from the examples folder)
/* #flow */
import React from 'react'
import { View, StyleSheet, Platform } from 'react-native'
import {
Caption,
Headline,
Paragraph,
Subheading,
Title,
withTheme,
type Theme,
} from 'react-native-paper'
type Props = {
theme: Theme,
};
class TextExample extends React.Component<Props> {
render() {
const {
theme: {
colors: { background },
},
} = this.props
return (
<View style={[styles.container, { backgroundColor: background }]}>
<Caption style={styles.text}>Home</Caption>
<Paragraph style={styles.text}>This is the home component</Paragraph>
<Subheading style={styles.text}>home component</Subheading>
<Title style={styles.text}>Home</Title>
<Headline style={styles.text}>Home on { Platform.OS }</Headline>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
padding: 16,
flex: 1,
},
text: {
marginVertical: 4,
},
})
export default withTheme(TextExample)
code public/index.html saving:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Third Party Demo</title>
</head>
<body>
<div id="react-native-web-app"></div>
</body>
</html>
code src/index.js saving:
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
ReactDom.render(<App />, document.getElementById('react-native-web-app'))
code src/routing.native.js saving:
export { NativeRouter as Router, Switch, Route, Link } from 'react-router-native'
-- code src/routing.web.js saving:
export { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'
at this point, yarn iosshould work but yarn web gives the error reported here. We need to edit the react-scripts Webpack config node_modules/react-scripts/config/webpack.config.js:
-- to the plugins of the section marked:
// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
(at about line 387) add this plugin:
[
"#babel/plugin-proposal-class-properties",
{
"loose": false
}
]
after that section, create a new section:
// Process paper specially
{
test: /\.js$/,
exclude: /node_modules(?!\/react-native-paper|\/react-native-vector-icons)/,
use: {
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-flow',
],
cacheDirectory: true,
plugins: [
[
"#babel/plugin-proposal-class-properties",
{
"loose": false
}
],
],
// Don't waste time on Gzipping the cache
cacheCompression: false,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
}
},
I'm experimenting with yeoman and bower.
I have created a yeoman webapp using the following command
yo webapp
I want to use jqueryui so I have installed it using bower:
bower install jquery-ui --save
This works fine, but the jQuery UI component doesn't contain a javascript file with "all" the components, it just contains a lot of javascript files, one for each component.
Should I include only the javascript files that I need? Or should I do something else before using jQuery UI?
Thanks for the tips!
Added jquery-ui in dependencies of bower.json (or component.json) along with jquery.
{
…,
"dependencies": {
"jquery": "~1.9.1",
"jquery-ui": "~1.10.3",
...
},
…
}
Install them:
bower install
Then, added path to jqueryui In main.js and require it:
require.config({
paths: {
jquery: '../components/jquery/jquery',
jqueryui: '../components/jquery-ui/ui/jquery-ui',
…
},
shim: {
jqueryui: 'jquery',
…
},
…
});
require(['app', 'jquery', 'jqueryui', 'bootstrap'], function (app, $) {
'use strict';
...
});
It works for me.
In the latest jQuery UI bower component as we speak (v. 1.10.3), you can do the following:
For the CSS themes, include the following link:
<link rel="stylesheet" href="bower_components_path/jquery-ui/themes/base/jquery-ui.css">
To get the most components and widgets of jQueryUI running, include the following script:
<script src="bower_components_path/jquery-ui/ui/jquery-ui.js" ></script>
For reference, bower install jquery-ui --save would add the jquery-ui.js dependency to the project, but not the styles. For that I needed to add to the bower.json file an overrides section, as below
{
...,
"dependencies": {
...,
"jquery-ui": "^1.11.4" // already added with --save from bower install command
},
...,
"overrides": {
"jquery-ui": {
"main": [
"themes/smoothness/jquery-ui.css",
"jquery-ui.js"
]
}
}
}
References:
https://stackoverflow.com/a/27419553/4126114
https://github.com/taptapship/wiredep/issues/86
I would just include the files that I need or use the default custom build in the folder (which I believe has all the components) if you require everything or if it's just for experimentation.
<script src="components/jqueryui/ui/jquery-ui.custom.js"></script>
At this time bower pulls down the entire repo and since (from their website) "bower is just a package manager" anything else needed like concatenation or module loading is handled by other tools like sprockets/requirejs.
References:
Using packages with bower on homepage http://bower.io/
Dissusion about bower and pulling entire repos
https://github.com/bower/bower/issues/45
You could use requirejs.config's shim property to achieve your goal:
requirejs.config({
shim: {
'jquery.ui.sortable': {
deps: ['jquery', 'jquery.ui.core', 'jquery.ui.widget', 'jquery.ui.mouse', 'jquery.ui.position'],
exports: '$'
}
}
});
We specified, that jquery.ui.sortable, when required in your project, needs to load and execute the modules listed under deps first, before being executed itself.
Unfortunately, this still produces a race condition... But that is generally how one would go about this (: