У меня возникли проблемы с предварительным просмотром приложения Stencil PWA с интеграцией с Firestore. Еще не добавил ни одной страницы / маршрута в сгенерированный код. Это просто firebase, интегрированный в стандартное приложение Stencil PWA.
Я попытался импортировать firebase через тег Script в index. html и npm при установке firebase. В обоих случаях приложение работает в браузере, но не работает во время предварительного рендеринга. Я также использую rxFire.
Проект с проблемой находится в https://github.com/saiy2k/stencil-firestore-prerender dev ответвление
Метод 1: Импорт Firebase через теги Script
index. html
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-firestore.js"></script>
<script>
firebase.initializeApp({
apiKey: "#####",
authDomain: "#####",
databaseURL: "#####",
projectId: "#####",
storageBucket: "#####",
messagingSenderId: "#####",
appId: "#####"
});
const firestore = firebase.firestore();
const settings = { timestampsInSnapshots: true };
firestore.settings(settings);
console.log('firebase initialized');
</script>
компонентов / app-home / app-home.tsx
/// <reference types="firebase" />
declare var firebase: firebase.app.App;
...
componentWillLoad() {
//Method 1: via Script
const ref = firebase.firestore().collection('Category');
collectionData(ref, 'id').subscribe(cat => {
console.log(cat);
this.cats = cat;
});
}
С выше код, когда я пытаюсь выполнить предварительный рендеринг, я получаю эту ошибку:
[ ~/projects/ssrapp ]$ npm run build --prerender
> ssrapp@0.0.1 build /Users/saiy2k/projects/ssrapp
> stencil build
[13:47.8] @stencil/core v1.11.2 ?
[13:51.6] build, app, prod mode, started ...
[13:51.8] transpile started ...
[13:57.6] transpile finished in 5.82 s
[13:57.6] copy started ...
[13:57.6] generate hydrate app started ...
[13:57.6] generate lazy started ...
[14:00.9] copy finished (1235 files) in 3.27 s
[14:12.5] generate hydrate app finished in 14.88 s
[14:32.8] generate lazy finished in 35.17 s
[14:32.9] build finished in 41.26 s
[14:33.2] prerendering started ...
[14:35.1] prerendering failed in 1.96 s
[ ERROR ] Hydrate Error
ReferenceError: firebase is not defined at new AppHome
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:9787:20) at initializeComponent
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6405:17) at connectedCallback
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6497:17) at hydrateComponent
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6831:17) at connectElement
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6786:28) at MockHTMLElement.patchedConnectedCallback
[as connectedCallback] (/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6742:20) at
fireConnectedCallback (/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:298:14) at connectNode
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:275:9) at MockHTMLElement.appendChild
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:1364:7) at attachComponent
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:16103:15)
[ ERROR ] Hydrate Error
TypeError: Cannot read property 'map' of undefined at AppHome.render
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:9816:626) at callRender
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:5925:49) at updateComponent
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:5874:33) at update
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:5835:26) at process.nextTick
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6969:13) at process._tickCallback
(internal/process/next_tick.js:61:11)
Метод 2: Импорт Firebase через npm i
Я предполагал, что предварительный рендер не может получить доступ к Firebase так как его импортировали через скрипт. Поэтому я закомментировал теги сценария и сделал npm i --save firebase
и сделал следующий код:
components / app-home / app-home.tsx
import firebase from 'firebase/app';
import 'firebase/firestore';
...
componentWillLoad() {
//Method 2: via npm module
const app = firebase.initializeApp({
apiKey: "AIzaSyBxT5MFxXvfAGDVcWLhYQ3vSBW7dOnKjBs",
authDomain: "bazon-india.firebaseapp.com",
databaseURL: "https://bazon-india.firebaseio.com",
projectId: "bazon-india",
storageBucket: "bazon-india.appspot.com",
messagingSenderId: "928019631782",
appId: "1:928019631782:web:ea7c413839ee346dac6e67"
});
const ref = app.firestore().collection('Category');
collectionData(ref, 'id').subscribe(cat => {
console.log(cat);
this.cats = cat;
});
}
С приведенным выше кодом, когда я пытаюсь выполнить предварительный рендеринг, я получаю эту ошибку:
[ ~/projects/ssrapp ]$ npm run build --prerender
> ssrapp@0.0.1 build /Users/saiy2k/projects/ssrapp
> stencil build
[20:50.4] @stencil/core v1.11.2 ?
[20:53.2] build, app, prod mode, started ...
[20:53.3] transpile started ...
[20:57.2] transpile finished in 3.83 s
[20:57.2] copy started ...
[20:57.2] generate hydrate app started ...
[20:57.2] generate lazy started ...
[21:00.7] copy finished (1235 files) in 3.58 s
[21:17.0] generate hydrate app finished in 19.81 s
[21:44.8] generate lazy finished in 47.66 s
[21:45.0] build finished in 51.76 s
[21:45.3] prerendering started ...
[21:49.0] prerendered 4 urls, averaging 926 ms per url
[21:49.0] prerendering failed in 3.71 s
[ ERROR ] Hydrate Error
ReferenceError: crypto is not defined at t.randomBytes
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:26833:9) at Function.t.Ur
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:16509:20) at new t
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:22306:95) at t.pv
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:22880:26) at t.cv
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:22872:14) at t.collection
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:22905:14) at AppHome.componentWillLoad
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:26917:37) at safeCall
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6002:36) at scheduleUpdate
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:5847:23) at schedule
(/Users/saiy2k/projects/ssrapp/dist/hydrate/index.js:6433:28)
Похоже, что какая-то проблема внутри collection(). Означает ли это, что FireBase не готова к предварительному рендерингу? или я что-то не так делаю?
Пожалуйста, помогите.