Let's say I have two packages in a monorepo using pnpm. One for Vue#3 (package-a), one other for Vue#2 (package-b). For the record, they both depend on a third package called core.
You can find what it looks like below:
.
├── .npmrc
├── .nvmrc
├── package.json
├── packages
│ ├── package-a
│ │ ├── index.ts
│ │ ├── node_modules
│ │ │ ├── .bin
│ │ │ │ ├── tsc
│ │ │ │ ├── tsserver
│ │ │ │ ├── vite
│ │ │ │ └── vue-tsc
│ │ │ ├── #myscope
│ │ │ │ └── core -> ../../../core
│ │ │ ├── #vitejs
│ │ │ │ └── plugin-vue -> ../../../../node_modules/.pnpm/#vitejs+plugin-vue#2.3.3_vite#2.9.9+vue#3.2.36/node_modules/#vitejs/plugin-vue
│ │ │ ├── typescript -> ../../../node_modules/.pnpm/typescript#4.6.4/node_modules/typescript
│ │ │ ├── vite -> ../../../node_modules/.pnpm/vite#2.9.9/node_modules/vite
│ │ │ ├── vue -> ../../../node_modules/.pnpm/vue#3.2.36/node_modules/vue
│ │ │ └── vue-tsc -> ../../../node_modules/.pnpm/vue-tsc#0.34.16_typescript#4.6.4/node_modules/vue-tsc
│ │ ├── package.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ └── vite.config.ts
│ ├── package-b
│ │ ├── index.ts
│ │ ├── node_modules
│ │ │ ├── .bin
│ │ │ │ ├── tsc
│ │ │ │ ├── tsserver
│ │ │ │ ├── vite
│ │ │ │ └── vue-tsc
│ │ │ ├── #myscope
│ │ │ │ └── core -> ../../../core
│ │ │ ├── typescript -> ../../../node_modules/.pnpm/typescript#4.6.4/node_modules/typescript
│ │ │ ├── vite -> ../../../node_modules/.pnpm/vite#2.9.9/node_modules/vite
│ │ │ ├── vite-plugin-vue2 -> ../../../node_modules/.pnpm/vite-plugin-vue2#2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2
│ │ │ ├── vue -> ../../../node_modules/.pnpm/vue#2.6.14/node_modules/vue
│ │ │ ├── vue-template-compiler -> ../../../node_modules/.pnpm/vue-template-compiler#2.6.14/node_modules/vue-template-compiler
│ │ │ └── vue-tsc -> ../../../node_modules/.pnpm/vue-tsc#0.34.16_typescript#4.6.4/node_modules/vue-tsc
│ │ ├── package.json
│ │ ├── tsconfig.json
│ │ ├── tsconfig.node.json
│ │ └── vite.config.ts
│ └── core
│ ├── index.ts
│ └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
In packages/package-a/package.json:
{
"name": "#myscope/package-a",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "vue-tsc --noEmit && vite build"
},
"dependencies": {
"#myscope/core": "workspace:*",
"vue": "^3.2.25"
},
"devDependencies": {
"#vitejs/plugin-vue": "^2.3.3",
"typescript": "^4.5.4",
"vite": "^2.9.9",
"vue-tsc": "^0.34.7"
}
}
In packages/package-b/package.json
{
"name": "#myscope/package-b",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "vue-tsc --noEmit && vite build"
},
"dependencies": {
"#myscope/core": "workspace:*",
"vue": "^2.6.14"
},
"devDependencies": {
"typescript": "^4.5.4",
"vite": "^2.9.9",
"vite-plugin-vue2": "^2.0.0",
"vue-template-compiler": "^2.6.14",
"vue-tsc": "^0.34.7"
}
}
When I run pnpm run build in package-b (Vue#2) I get the version mismatch error whereas it shouldnt:
> vue-tsc --noEmit && vite build
failed to load config from /path/to/my/project/monorepo/packages/package-b/vite.config.ts
error during build:
Error:
Vue packages version mismatch:
- vue#3.2.36 (/path/to/my/project/monorepo/node_modules/.pnpm/vue#3.2.36/node_modules/vue/index.js)
- vue-template-compiler#2.6.14 (/path/to/my/project/monorepo/node_modules/.pnpm/vue-template-compiler#2.6.14/node_modules/vue-template-compiler/package.json)
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/vue-template-compiler#2.6.14/node_modules/vue-template-compiler/index.js:10:9)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/vite-plugin-vue2#2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/utils/descriptorCache.js:34:42)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/path/to/my/project/monorepo/node_modules/.pnpm/vite-plugin-vue2#2.0.1_dj3dtukdyynhbiqf2xbv2ocyei/node_modules/vite-plugin-vue2/dist/main.js:35:27)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
ELIFECYCLE Command failed with exit code 1.
ELIFECYCLE Command failed with exit code 1.
It seems that the resolved version doesn't follows package.json and uses Vue#3 instead of Vue#2. I don't understand why. Could this be a bug about how vue-template-compiler resolves Vue or something?
A "dirty" workaround I've found to get it work is to add hoist=false to .npmrc at the project's root but I don't know what are the possible side-effects I can get by doing this. Anyway, is there a cleaner way to fix this?
PS. This can be related to https://github.com/vuejs/vue/issues/11828 but I'm asking here do do not reply in a closed issue.
Answering my own question since I got help on the VueJS discord server.
There are two possible solutions that both worked for me independently:
a) move vue-tsc to the root package.json. This is what I did as I try and keep all my project tooling out of the individual packages.
b) use "pnpm.packageExtentions" in package.json to add vue#2 as a peer dependency of vue-template-compiler
Option a) doesn't seem to work as of pnpm#7 because of a breaking change:
Dependencies of the root workspace project are not used to resolve peer dependencies of other workspace projects #4469
Option B with pnpm.packageExtensions is working fine. No need to add nohoist=false anymore to .npmrc.
diff --git i/package.json w/package.json
index 95cda08..182e89d 100644
--- i/package.json
+++ w/package.json
## -41,5 +41,14 ##
"packageManager": "pnpm#7.1.3",
"engines": {
"node": ">=16.15.0"
+ },
+ "pnpm": {
+ "packageExtensions": {
+ "vue-template-compiler": {
+ "peerDependencies": {
+ "vue": "^2.6.14"
+ }
+ }
+ }
}
}
I want to add another page to vuepress with the blog plugin.
The new page that I added does not show the content.
I expect the about page to show the content
I use basic vuePressBlog template. My tree structure is
├── examples
│ ├── about
│ │ └── Readme.md
│ └── _posts
│ ├── 2018-4-4-intro-to-vuepress.md
│ ├── 2019-6-8-intro-to-vuepress-next.md
│ ├── 2019-6-8-shanghai.md
│ ├── 2019-6-8-summary.md
│ └── 2019-6-8-vueconf.md
├── index.js
├── layouts
│ ├── GlobalLayout.vue
│ ├── Layout.vue
│ ├── Post.vue
│ └── Tag.vue
├── package.json
├── package-lock.json
└── README.md
I added the following lines to the ./example/.vuepress/config.js
module.exports = {
title: "SlimBlog",
theme: require.resolve("../../"),
themeConfig: {
// Please keep looking down to see the available options.
nav: [
{
text: "Home",
link: "/",
},
{
text: "about",
link: "/about/",
},
{},
],
},
};
I assume there might be a layout missing but I unable to find the config for this.
I have a bucket (logs) in Amazon S3 (us-east-1) with, unsurprisingly, logs, partitioned by application and date:
logs
├── peacekeepers
│ └── year=2018
│ ├── month=11
│ │ ├── day=01
│ │ ├── day=…
│ │ └── day=30
│ └── month=12
│ ├── day=01
│ ├── day=…
│ └── day=19
│ ├── 00:00 — 01:00.log
│ ├── …
│ └── 23:00 — 00:00.log
├── rep-hunters
├── retro-fans
└── rubber-duckies
I want to list all the objects (logs) for a particular date, month, year…
How do I do that with AWS SDK for Java 2.x?
New SDK makes it easy to work with paginated results:
S3Client client = S3Client.builder().region(Region.US_EAST_1).build();
ListObjectsV2Request request =
ListObjectsV2Request
.builder()
.bucket("logs")
.prefix("peacekeepers/year=2018/month=12")
// .prefix("peacekeepers/year=2018/month=12/day=19")
.build();
ListObjectsV2Iterable response = client.listObjectsV2Paginator(request);
for (ListObjectsV2Response page : response) {
for (S3Object object : page.contents()) {
// Consume the object
System.out.println(object.key());
}
}
Buck sounds like a great tool for both iOS and Android projects but I have not been abel to find any information on how to use it for react-native projects.
Update
Looks like there is some work being done on this but it may not be recommended yet.
https://github.com/facebook/nuclide/issues/31#issuecomment-164897170
https://github.com/facebook/buck/tree/master/test/com/facebook/buck/js
Update 2
Product Pains link https://productpains.com/post/react-native/add-buck-as-a-build-option
Update 8/6/2017:
I tried following my steps below for integrating React Native into an iOS app with Buck but I ran into issues when using React Native 0.47. Instead I have a new simpler approach for getting React Native working with Buck on iOS by linking to prebuilt libraries. I forked the Buck sample project repo and have it working with React Native in this repo. I also updated the README in that repo with instructions for running the demo Buck React Native iOS app and how to integrate yourself.
Note there are a couple issues with this approach documented in the README that may or may not be a problem for using this in a production app.
That repo also doesn't bundle the JS for production yet.
Older answer:
I got Buck working with an iOS project. It is very much a work in progress, but works. A few notes:
I manually copied files from node_modules/react-native/React and
node_modules/react-native/Libraries (see folder structure below).
I had to add the -w and Wno-error flags to each library because the main project had treat warnings as errors and I didn't want to see all of these React Native warnings in Xcode.
You may have to add more libraries following the pattern. It also helps to look at the React Native podspec.
There is probably opportunity to clean things up like there is no need for reactnative.xcodeproj in the vendor/reactnative folder (see below).
There is probably some work needed to correctly bundle the JS for production. Currently it will only work if the JS is fetched from a server (e.g. Node.js).
Here is my vendor/reactnative/BUCK file:
apple_library(
name = 'ReactNative',
srcs = glob([
'React/**/*.m',
'React/**/*.mm',
'React/**/*.c',
'React/**/*.S',
]),
exported_headers = glob([
'React/**/*.h',
]),
system_frameworks = [
'JavaScriptCore'
],
exported_linker_flags = [
'-lc++',
],
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
)
apple_library(
name = 'RCTWebSocket',
srcs = glob([
'Libraries/WebSocket/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/WebSocket/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTNetwork',
srcs = glob([
'Libraries/Network/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/Network/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTText',
srcs = glob([
'Libraries/Text/*.m',
]),
headers = glob([
'React/**/*.h',
]),
exported_headers = glob([
'Libraries/Text/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
]
)
apple_library(
name = 'RCTImage',
srcs = glob([
'Libraries/Image/*.m',
]),
headers = glob([
'React/**/*.h',
'Libraries/Network/*.h'
]),
exported_headers = glob([
'Libraries/Image/*.h',
]),
compiler_flags = [
'-Wno-error',
'-w'
],
visibility = ['PUBLIC'],
deps = [
':ReactNative',
':RCTNetwork'
]
)
Here is the folder structure inside a vendor folder in my project:
vendor/reactnative
├── BUCK
├── Libraries
│ ├── ART
│ ├── ActionSheetIOS
│ ├── AdSupport
│ ├── Animated
│ ├── AppRegistry
│ ├── AppState
│ ├── BatchedBridge
│ ├── BugReporting
│ ├── CameraRoll
│ ├── Components
│ ├── CustomComponents
│ ├── DebugComponentHierarchy
│ ├── Devtools
│ ├── EventEmitter
│ ├── Experimental
│ ├── Fetch
│ ├── Geolocation
│ ├── Image
│ ├── Inspector
│ ├── Interaction
│ ├── JavaScriptAppEngine
│ ├── LayoutAnimation
│ ├── Linking
│ ├── LinkingIOS
│ ├── Modal
│ ├── NativeAnimation
│ ├── NavigationExperimental
│ ├── Network
│ ├── Promise.js
│ ├── PushNotificationIOS
│ ├── QuickPerformanceLogger
│ ├── RCTTest
│ ├── RKBackendNode
│ ├── ReactIOS
│ ├── ReactNative
│ ├── Sample
│ ├── Settings
│ ├── Storage
│ ├── StyleSheet
│ ├── Text
│ ├── Utilities
│ ├── Vibration
│ ├── WebSocket
│ ├── promiseRejectionIsError.js
│ ├── react-native
│ └── vendor
├── React
│ ├── Base
│ ├── Executors
│ ├── Layout
│ ├── Modules
│ ├── Profiler
│ └── Views
└── reactnative.xcodeproj
├── project.pbxproj
└── xcuserdata
Then in the deps of my main BUCK file I add:
'//vendor/reactnative:ReactNative',
'//vendor/reactnative:RCTWebSocket',
'//vendor/reactnative:RCTText',
'//vendor/reactnative:RCTNetwork',
'//vendor/reactnative:RCTImage'
There's no official documentation / template for building RN apps with Buck yet but it shouldn't be that hard. You'd need to add a BUCK file that does the equivalent of what your build.gradle file does.
It's mostly just:
Declares an Android app with a dependency on React Native from JCenter (Buck has the android_binary rule to do that)
In release mode it also bundles the JS into your app's assets
folder. You could skip this for a start (in dev mode the app fetches the JS from localhost at runtime) but I believe Buck has built-in support for bundling JS too.
I would like to extend my controller within simple widget.
I've created two files:
app/widgets/mywidget/controllers/base.js
app/widgets/mywidget/controllers/index.js
I start mycontroller.js file with line: exports.baseController = 'base'; and on Android it crashes with Exception:
/V8Exception(19693): Exception occurred at ti:/module.js:280: Uncaught Error: Requested module not found: alloy/controllers//glass/parent
Project tree looks like this:
app
├── README
├── alloy.js
├── assets
├── config.json
├── controllers
│ ├── base.js
│ ├── index.js
│ └── view.js
├── lib
│ └── user.js
├── models
├── styles
│ ├── app.tss
│ └── index.tss
├── views
│ ├── index.xml
│ └── view.xml
└── widgets
└── mywidget
├── controllers
│ ├── base.js
│ ├── index.js
│ └── view.js
├── styles
├── views
└── widget.json
index.js & view.js inside app/controller use base.js as baseController.
index.js & view.js inside app/widgets/mywidget/controllers use base.js inside same directory as their baseController. I don't try to extend baseController from app inside widget.