I have created the following boot file for Quasar in src/boot/amplify.js and added 'amplify' to quasar.conf.js:
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
import {
applyPolyfills,
defineCustomElements,
} from '#aws-amplify/ui-components/loader';
applyPolyfills().then(() => {
defineCustomElements(window);
});
Amplify.configure(awsconfig);
But I get many import errors from the line import Amplify from 'aws-amplify';:
Module not found: Can't resolve imported dependency "./printError"
App • ERROR • UI in ./node_modules/graphql/error/GraphQLError.mjs
And more -- I've gotten passed them with npm install --save graphql, but I then found many more errors for the import. It is easy to setup following Amplify docs using Vue 3 CLI and not Quasar.
Anyone had luck using Quasar or know what a possible solution might be?
is a webpack issue, check this:
https://github.com/graphql/graphql-js/issues/2721#issuecomment-723008284
I solved it by adding to the quasar.conf.js
build: {
...
extendWebpack (cfg, {isServer, isClient}) {
cfg.module.rules.push ({
test: /\.m?js/,
resolve: {
fullySpecified: false,
fallback: {crypto: false}
}
})
}
}
}
the "fallback : {crypto: false}"
it is used to resolve the subsequent error about the missing dependency of crypto-js based on:
https://stackoverflow.com/a/67076572/1550140
Related
How could i use pinia without vue and vite?
"dependencies": {
"pinia": "^2.0.11",
"vite": "^2.7.13",
"vue": "^3.2.30"
}
I try to use pinia like this:
import { createApp } from 'vue';
import { useLoginStore } from './src/index.js';
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp({
data() {
return {};
}
});
app.use(pinia);
const useState = useLoginStore();
console.log(`<<<<01-24 08:52:27>>>>⬇️\n✨`, `useState`, useState);
and i use node to run it: node test
But it return error
Cannot find package '#vue/composition-api' imported from ...\node_modules\vue-demi\lib\index.mjs
Assume that your node test means running test.js, with the content in the file like what you mentioned in the question and no bugs happened in useLoginStore, your code should run fine since I can run your example functionally.
For the Cannot find package questions, I suggest you delete the node_modules directory and reinstall packages by typing npm install.
If you are asking if Pinia can run without installing Vue, the answer is simply no, since Pinia needs to be activated by Vue. You will face the following error if trying to run Pinia without Vue:
import { defineStore } from 'pinia'
const useLoginStore = defineStore('login', { /* Options */ });
const useState = useLoginStore();
console.log( useState );
Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
References:
https://vuejs.org/api/application.html#app-use
https://github.com/vuejs/pinia/discussions/664
https://github.com/vuejs/pinia/discussions/1238
I have a bootstrap template with custom css and js that I want to use with ember.js.
I am stuck with integrating the js.
I have to say that I usually don't work on the frontend side, so if this is an obvious mistake I made, excuse me.
I want to stick with the js I have from the template and don't want to include ember-bootstrap for example.
node version: v14.15.5, ember-cli: 3.25.0
npm packages to include: bootstrap#5.0.0-beta2, flickity, flickity-imagesloaded, flickity-as-nav-for, flickity-fade, jarallax
I have identified two tasks here. First, I need to integrate the existing npm packages. Then I need to add the custom scripts.
Current status
1. Packages
I added the npm packages to ember-cli-build.js over app.import()
// ember-cli-build.js file
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function (defaults) {
let app = new EmberApp(defaults, {});
app.import("node_modules/bootstrap/dist/js/bootstrap.min.js");
app.import("node_modules/jarallax/dist/jarallax.min.js", {
using: [{ transformation: 'cjs', as: 'jarallax' }]
});
app.import("node_modules/flickity/dist/flickity.pkgd.min.js");
app.import("node_modules/flickity-as-nav-for/as-nav-for.js");
app.import("node_modules/flickity-fade/flickity-fade.js");
app.import("node_modules/flickity-imagesloaded/flickity-imagesloaded.js");
return app.toTree();
};
When I go to the debug tab in my browser I see the packages are getting loaded under assets/node_modules/.. but js does not have any effect.
I tried to load the package in index.html over a script tag:
<script type="text/javascript" src="{{rootURL}}assets/node_modules/flickity/dist/flickity.pkgd.min.js"></script>
I get the error in the browser console window:
Refused to execute http://localhost:4200/assets/node_modules/flickity/dist/flickity.pkgd.min.js as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.
2. Custom js scripts
The custom scripts have a moin theme.js script that imports everything else.
// js/theme.js
// Theme
import './aos';
import './bigpicture';
// ...
The imported Javascript scripts from theme.js also have imports like
// js/aos.js (imported from theme.js)
import AOS from 'aos';
const options = {
duration: 700,
easing: 'ease-out-quad',
once: true,
startEvent: 'load'
};
AOS.init(options);
The original theme.js also had import for Bootstrap and the other libraries.
// js/theme.js
// Vendor
import 'bootstrap';
import 'flickity';
// ...
import 'jarallax';
// Theme
import './aos';
import './bigpicture';
// ...
I had the js directory under vendor, public and app the import via the script tag did not work either. Importing from app.js has no effect.
I am following below mentioned tutorial to implement a basic AWS App sync javascript app.
https://aws-amplify.github.io/docs/js/start?platform=purejs
However, when I run my app I am getting 'Undefined' error from my async function of listTodos
import API, { graphqlOperation } from '#aws-amplify/api'
import * as queries from './graphql/queries';
import awsconfig from './aws-exports';
API.configure(awsconfig);
async function listTodos1() {
try {
const allTodos1 = await API.graphql(graphqlOperation(queries.listTodos));
} catch(e) {
console.log(e);
}
}
listTodos1();
I am new to JS and not sure how to debug further.
I have already implemented an android app using AWS appsync and I have done basic graphql related debugging but stuck with this issue.
I'm in the process of Refactoring clean Ract app to Redux.
I have deifned some actions and reducers tested.
I got stack on Router & History.
I'm getting error:
Uncaught TypeError: Cannot read property 'listen' of undefined at syncHistoryWithStore
from simple code:
//configureStore.jsx
import redux from 'redux';
import {buildingReducer, levelReducer, roomReducer} from 'reducers';
import {routerReducer} from 'react-router-redux';
export let configure = (initialState = {}) => {
let reducer = redux.combineReducers({
building: buildingReducer,
level: levelReducer,
room: roomReducer,
routing: routerReducer
});
let store = redux.createStore(reducer, initialState, redux.compose(
window.devToolsExtension ? window.devToolsExtension() : f => f));
return store;
};
&
//app.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router';
import {Provider} from 'react-redux';
import {syncHistoryWithStore} from 'react-router-redux'
var actions = require('actions');
var store = require('configureStore').configure();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={Main}>
<IndexRoute component={Map}/>
<Route path="report" component={Report}/>
<Route path="about" component={About}/>
</Route>
</Router>
</Provider>,
document.getElementById('react_app')
);
I'm out of any idea why this happens :(
I solved this issue by following this comment. This after I had updated to "react-router": "^4.1.1" and to "react-router-redux": "^4.0.8". This does solve the problem of using browserHistory from react-router but gives you a work around.
The work around requires you to:
import { createBrowserHistory } from 'history';
const history = syncHistoryWithStore(createBrowserHistory(), store);
The comments on the issue seem to suggest trying out different combinations of the 2 plugs. I tested the code by installing "react-router": "^3.0.2" and "react-router-redux": "^4.0.8" and that worked also.
I am working with a react_on_rails project. I got the issue fixed with downgrading to below versions.
"react-redux": "^4.4.6",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.7",
I don't see a problem you code. It works for me with with this combination:
"react-router": "^3.0.2", "react-router-redux": "^4.0.8"
A possible source of your problem is that you're working with a different version that is known to have issues.
If anybody looking for a solution to this matter latest:
looks like they have updated the history repo:-
use 'createHistory' instead of 'createBrowserHistory'
please try as below in store:
import { createHistory } from 'history';
const history = syncHistoryWithStore(createHistory(), store);
and also make sure that 'routerReducer' added as one extra reducer to your combined reducers.
regards.
I'm trying to use sinon in my ember-cli app and I can't figure out how to import it. I have an import statement in the spec:
import { sinon } from 'sinon';
and then I try to use sinon in a test:
it('finds the todo model', function () {
var store = this.subject().store;
var spy = sinon.spy(store, 'find');
this.subject().model();
expect(spy).to.have.been.called;
});
however, when I run ember test from the command line I get this error:
not ok 8 PhantomJS 1.9 - TestLoader Failures my-app/tests/unit/routes/application-test: could not be loaded
---
message: >
Could not find module `sinon` imported from `my-app/tests/unit/routes/application-test`
stack: >
Error: Could not find module `sinon` imported from `my-app/tests/unit/routes/application-test`
at requireFrom (http://localhost:7357/assets/vendor.js:119)
at reify (http://localhost:7357/assets/vendor.js:106)
at http://localhost:7357/assets/vendor.js:149
at tryFinally (http://localhost:7357/assets/vendor.js:30)
at http://localhost:7357/assets/vendor.js:156
at http://localhost:7357/assets/test-loader.js:29
at http://localhost:7357/assets/test-loader.js:21
at http://localhost:7357/assets/test-loader.js:40
at http://localhost:7357/assets/test-support.js:13918
Log: >
...
The one thing I've noticed is that ember-sinon has a very light footprint in the bower_components/ directory:
$ls bower_components/sinon/
index.js
I've tried changing the import line to import { sinon } from 'sinon/index'; but that hasn't worked either.
Any help would be greatly appreciated. I'm very new to ember-cli, bower and es6 modules so links to background on those pieces would be greatly appreciated. Thanks!
OK, after RTFMing for litterally minutes, I found the answer right there in the test assets section of the ember-cli documentation.
The setup:
ember install ember-sinon
^ this will throw an error so I ran the generator by hand.
ember generate ember-sinon
Then, import sinon in the Brocfile:
var isProduction = EmberApp.env() === 'production';
if (!isProduction) {
app.import(app.bowerDirectory + '/sinon/index.js', {type: 'test'});
}
Now, you can use sinon.stub/spy/mock in your specs but you'll still get a jshint error about sinon not being defined. I fixed this by adding:
/* global sinon */
to the top of the spec. It looks like you should be able to declare this globally in the jshintrc file but I haven't figured that out yet.