Cloud Firestore build error with preact-cli - firebase

I'm trying to use Firebase's Cloud Firestore from a preact-cli generated project but have been caught at the first hurdle. I chose Firebase's v9 SDK, that's in beta, to get ahead of the curve (but maybe that was a mistake). When building, there's an error from a Firebase SDK file but I'm not sure if it's caused by the SDK itself, babel, webpack, preact-cli or a combination. I also don't know how to go about diagnosing it, since I'm new to these tools.
Steps below, any ideas what the cause of this error might be?
npx preact-cli create typescript webapp
npm install --save firebase#9.0.0-beta.1
Then in src/components/app.tsx, make use of the Firestore SDK by adding
import { getFirestore } from "firebase/firestore";
getFirestore();
But the build fails.
$ npm run build
> webapp#0.0.0 build
> preact build
Build [== ] 12% (1.3s) building(13200:6) switch-case fall-through not supported - added break. See https://github.com/MatAtBread/nodent#differences-from-the-es7-specification
[BABEL] Note: The code generator has deoptimised the styling of ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js as it exceeds the max of 500KB.
✖ ERROR ../node_modules/#firebase/firestore/dist/exp/index.browser.esm2017.js 5055:431
Module parse failed: Unsyntactic break (5055:431)
File was processed with these loaders:
* ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
(Source code omitted for this binary file)
# ../node_modules/firebase/firestore/dist/index.esm.js 1:0-36 1:0-36
# ./components/app.tsx
# ./index.ts

Related

Adding dependencies to the "ui" package of a Turborepo with Next.js throws Unexpected token 'export'

If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).

Using Azure static web app with a Quasar Project

I thought it would be pretty simple to host a vuejs quasar project in azure static web apps but I cannot even seem to do the build process from github to publish the website. I can do quasar dev and quasar serve locally and all works great. It is just the assets do not seem to load and trigger a build error for pushing to github/azure. My error comes out as follows:
[vite:asset] Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[Error: Could not load /github/workspace/src/assets/imgs/12.jpg (imported by src/components/HomeRecentWork.vue): ENOENT: no such file or directory, open '/github/workspace/src/assets/imgs/12.jpg'] {
errno: -2,
code: 'PLUGIN_ERROR',
syscall: 'open',
path: '/github/workspace/src/assets/imgs/12.jpg',
pluginCode: 'ENOENT',
plugin: 'vite:asset',
hook: 'load',
watchFiles: [
'/github/workspace/index.html',
'/github/workspace/.quasar/client-entry.js',
'/github/workspace/node_modules/vite/package.json',
'/github/workspace/node_modules/vue/package.json',
'/github/workspace/node_modules/#quasar/extras/package.json',
'/github/workspace/node_modules/quasar/package.json',
'/github/workspace/node_modules/vue/dist/vue.runtime.esm-bundler.js',
'/github/workspace/node_modules/#quasar/extras/fontawesome-v6/fontawesome-v6.css',
'/github/workspace/node_modules/#quasar/extras/roboto-font/roboto-font.css',
'/github/workspace/node_modules/#quasar/extras/material-icons/material-icons.css',
'/github/workspace/node_modules/quasar/dist/quasar.sass',
'/github/workspace/.quasar/app.js',
'/github/workspace/.quasar/quasar-user-options.js',
'/github/workspace/src/css/app.scss',
'/github/workspace/src/boot/axios.js',
'vite/preload-helper',
'/github/workspace/node_modules/#vue/runtime-dom/package.json',
'/github/workspace/node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/vue-plugin.js',
'/github/workspace/src/App.vue',
'/github/workspace/src/stores/index.js',
'/github/workspace/src/router/index.js',
'/github/workspace/node_modules/quasar/src/plugins/Meta.js',
'/github/workspace/node_modules/quasar/src/plugins/Notify.js',
'/github/workspace/node_modules/axios/package.json',
'/github/workspace/node_modules/quasar/wrappers/index.mjs',
'/github/workspace/node_modules/axios/index.js',
'/github/workspace/node_modules/#vue/runtime-core/package.json',
'/github/workspace/node_modules/#vue/shared/package.json',
'/github/workspace/node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js',
'/github/workspace/node_modules/#vue/shared/dist/shared.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/install-quasar.js',
'/github/workspace/node_modules/quasar/src/lang.js',
'/github/workspace/node_modules/quasar/src/icon-set.js',
'plugin-vue:export-helper',
'/github/workspace/node_modules/pinia/package.json',
'/github/workspace/node_modules/pinia/dist/pinia.mjs',
'/github/workspace/node_modules/vue-router/package.json',
'/github/workspace/node_modules/vue-router/dist/vue-router.mjs',
'/github/workspace/src/router/routes.js',
'/github/workspace/node_modules/quasar/src/plugins/Platform.js',
'/github/workspace/node_modules/quasar/src/utils/extend.js',
'/github/workspace/node_modules/quasar/src/components/avatar/QAvatar.js',
'/github/workspace/node_modules/quasar/src/components/icon/QIcon.js',
'/github/workspace/node_modules/quasar/src/components/btn/QBtn.js',
'/github/workspace/node_modules/quasar/src/components/spinner/QSpinner.js',
'/github/workspace/node_modules/quasar/src/utils/private/create.js',
'/github/workspace/node_modules/quasar/src/utils/event.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-nodes.js',
'/github/workspace/node_modules/quasar/src/utils/is.js',
'\x00commonjsHelpers.js',
'/github/workspace/node_modules/axios/lib/axios.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-proxy',
'/github/workspace/node_modules/#vue/reactivity/package.json',
'/github/workspace/node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js',
'/github/workspace/node_modules/quasar/src/plugins/Screen.js',
'/github/workspace/node_modules/quasar/src/plugins/Dark.js',
'/github/workspace/node_modules/quasar/src/history.js',
'/github/workspace/node_modules/quasar/src/body.js',
'/github/workspace/node_modules/quasar/src/utils/private/symbols.js',
'/github/workspace/node_modules/quasar/src/utils/private/global-config.js',
'/github/workspace/node_modules/quasar/src/utils/private/define-reactive-plugin.js',
'/github/workspace/node_modules/quasar/lang/en-US.mjs',
'/github/workspace/node_modules/quasar/src/utils/private/inject-obj-prop.js',
'/github/workspace/node_modules/quasar/icon-set/material-icons.mjs',
'/github/workspace/node_modules/vue-demi/package.json',
'/github/workspace/node_modules/#vue/devtools-api/package.json',
'/github/workspace/node_modules/vue-demi/lib/index.mjs',
'/github/workspace/node_modules/#vue/devtools-api/lib/esm/index.js',
'/github/workspace/src/layouts/MainLayout.vue',
'/github/workspace/src/pages/IndexPage.vue',
'/github/workspace/src/pages/ErrorNotFound.vue',
'/github/workspace/node_modules/quasar/src/composables/private/use-size.js',
'/github/workspace/node_modules/quasar/src/utils/private/render.js',
'/github/workspace/node_modules/quasar/src/directives/Ripple.js',
'/github/workspace/node_modules/quasar/src/components/btn/use-btn.js',
'/github/workspace/node_modules/quasar/src/utils/private/key-composition.js',
'/github/workspace/node_modules/quasar/src/components/spinner/use-spinner.js',
'\x00/github/workspace/node_modules/axios/lib/axios.js?commonjs-module',
'/github/workspace/node_modules/axios/lib/utils.js',
'\x00/github/workspace/node_modules/axios/lib/utils.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/bind.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/bind.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/Axios.js',
'\x00/github/workspace/node_modules/axios/lib/core/Axios.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/core/mergeConfig.js',
'\x00/github/workspace/node_modules/axios/lib/core/mergeConfig.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/defaults.js',
'\x00/github/workspace/node_modules/axios/lib/defaults.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/Cancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/Cancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/CancelToken.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/CancelToken.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/cancel/isCancel.js',
'\x00/github/workspace/node_modules/axios/lib/cancel/isCancel.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/spread.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/spread.js?commonjs-proxy',
'/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js',
'\x00/github/workspace/node_modules/axios/lib/helpers/isAxiosError.js?commonjs-proxy',
'/github/workspace/node_modules/quasar/src/utils/debounce.js',
... 128 more items
]
}
Node.js v18.12.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
---End of Oryx build logs---
Oryx has failed to build the solution.
I have not found much info on doing a quasar project inside azure web apps so any advice would be helpful. All the tutorials I have found and gone through do not have these issues and I really do not have a complicated project that deviates from the standard quasar project.
EDIT:
the issue is actually my image paths. I am using with src="~assets/imgs/embroidery.jpg" where ~ must be an alias setup in quasar. Works for components in quasar but not for raw img tags. If i use a relative path like ../assets/imgs/filename.jpg it still draws an error on build. However, if i do /assets/imgs/filename.jpg and put the assets folder in public it works. I dont want to do this however so how should i put the paths for images in my components if not a vue-component per say?

Local image import in nextjs with jest (react-testing-library) failed

I'm getting the below error while writing the test case against my home page, which contains the landing image.
FAIL src/test/unit/pages/home.test.tsx
● Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/Users/xys/Documents/work/working/project-code/client/src/asset/images/landing/landing.png:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){�PNG
SyntaxError: Invalid or unexpected token
> 1 | import LandingImage from '~/asset/images/landing/landing.png';
| ^
2 |
3 | const Images = {
4 | LandingImage
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1796:14)
at Object.<anonymous> (src/asset/index.tsx:1:1)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 1.012 s
Ran all test suites related to changed files.
I have tried the below-suggested solution in jest.config.js file but unable to resolve this.
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/src/tests/unit/fileMock.js",
Also, I tried all the solutions suggested in the below site.
Importing images breaks jest test
If you try to import an image (binary file), please try this within your package.json file:
"jest": {
"moduleNameMapper": {
"\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/client/src/tests/unit/fileMock.js",
}
}
get more information in jest docs here: https://jestjs.io/docs/code-transformation

Vuejs2 firebase with electron error

I have configured electron with vuejs and i would like to add firebae to my project so i have
In my main.js
import * as firebase from 'firebase'
let firebasconfig = {
//config from firebase project
};
Vue.prototype.$firebase = firebase.initializeApp(firebasconfig);
But now am getting an error
Error: Failed to load gRPC binary module because it was not installed
for the current system
Expected directory: electron-v1.8-linux-x64-glibc
Found: [node-v59-linux-x64-glibc]
This problem can often be fixed by running "npm rebuild" on the current system
Original error: Cannot find module
I have tried running rebuild but still fails
What elese do i need to do for this to work
I encouter the same issue with
vue-electron 1.0.6
firebase 5.4.2
vuefire 1.4.5
node 6.10.3
The following manipulation has worked for me. I have downgraded :
firebase to 4.6.0
vuefire to 1.4.4
Then ran npm rebuild and yarn and now it works.
I'm not sure all the things I have done are necessary. But for sure it looks like a problem with firebase.

Integrating Apollo to meteor app

When I'm trying to integrate an apollo server to a meteor app I get errors as soon as I try to open graphiql. If I create an express app and connect it with webapp.connectHandlers, and put apollo server to one of that express app's routes, thing work, but they don't work in "meteor way", which I would really like to have, since I would get access to the user object, authorization etc.
Error, which I see in graphiql as soon as it loads:
Error: Schema must be an instance of GraphQLSchema. Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory
stacktrace:
at invariant (/Users/.../node_modules/graphql/jsutils/invariant.js:18:11)<br> at Object.validate (/Users/.../node_modules/graphql/validation/validate.js:59:72)<br> at doRunQuery (/Users/.../node_modules/apollo-server-core/dist/runQuery.js:88:38)<br> at /Users/.../node_modules/apollo-server-core/dist/runQuery.js:22:54<br> at /Users/.../.meteor/packages/promise/.0.10.0.borizy.o9z8++os+web.browser+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40
server code:
import {makeExecutableSchema} from 'graphql-tools';
import {typeDefs} from './schema';
import {resolvers} from './resolvers';
import { createApolloServer } from 'meteor/apollo';
export const schema = makeExecutableSchema({
typeDefs,
resolvers
});
createApolloServer({
schema
});
Everything seems legit and works with express, but not with meteor. What is the reason? How can I fix it?
The current version of meteor/apollo is out of date with the latest apollo npm packages. https://github.com/Swydo/ddp-apollo is up-to-date and does the integration in a "meteor way" 😊
Also ensure that there are not multiple versions of GraphQL installed in your node_modules directory
If this is the problem, it would be solved by
rm -rf node_modules/*
npm install

Resources