I would like use Browserify with Foundation, but i've error after compile my JS :
Erreur : ReferenceError: jQuery is not defined
I've see this setting but no result.
My shim :
"browser": {
"jquery": "./node_modules/foundation-sites/node_modules/jquery/dist/jquery.js",
"foundation": "./node_modules/foundation-sites/js/foundation.core.js"
},
"browserify-shim": {
"jquery": "$",
"jquery": "jQuery",
"foundation": "foundation"
},
And my app.js :
global.$ = require('jquery');
global.jQuery = require('jquery');
var foundation = require('foundation');
// Imports
import '../../node_modules/foundation-sites/js/foundation.util.mediaQuery.js';
import { gridShow, gridShortcut } from './app.grid.js';
Do you have any idea why i've this error ? It's when i import mediaQuery
Thank you !
Related
I am using Jest to run tests for a React app, and I am seeing the following error when running the tests:
ReferenceError: Worker is not defined
This error is occurring even though the component that is being tested is not using the heic2any library. The error is causing the tests to stop running.
Here is the code for the component that is being tested:
import { Button } from '#material-ui/core';
import { ReactElement } from 'react';
import useBreakpoint from 'src/hooks/useBreakpoint';
interface ActionButtonProps {
isMobileOnly?: boolean;
icon?: ReactElement;
onClick?: () => void;
['data-testid']?: string
}
const ActionButton = ({ isMobileOnly = false, icon, onClick, ...rest }: ActionButtonProps) => {
const { isMobile } = useBreakpoint();
const text = isMobile ? 'Add' : 'Add Photo Description Set';
if ((!isMobile && isMobileOnly) || (isMobile && !isMobileOnly)) {
return null;
}
return (
<Button
data-testid={rest['data-testid']}
startIcon={icon}
variant="outlined"
onClick={onClick}
>
{text}
</Button>
);
};
export default ActionButton;
This is the code of the component where heic2any was imported (which is another file)
import React from 'react';
import { SxProps } from '#material-ui/system';
import { PencilAlt } from 'src/icons';
import heic2any from 'heic2any';
interface FileImageDropzoneProps extends DropzoneOptions {
cardMediaSx?: SxProps;
}
const FileImageDropzone: React.FC<FileImageDropzoneProps> = (props) => {
// component code goes here...
};
export default FileImageDropzone;
Here's my unit test:
import ActionButton from '../ActionButton';
import { render, screen, cleanup, fireEvent } from '#testing-library/react';
import useBreakpoint, { BreakpointHook } from 'src/hooks/useBreakpoint';
import '#testing-library/jest-dom';
afterEach(cleanup)
jest.mock('src/hooks/useBreakpoint');
const mockUseBreakpoint: jest.Mock<BreakpointHook> = useBreakpoint as jest.Mock<BreakpointHook>;
describe('ActionButton', () => {
it('should render the compnent', () => {
render(<ActionButton data-testid='action-button' />);
mockUseBreakpoint.mockReturnValue({
isMobile: true,
isDesktop: false,
})
const { getByTestId } = screen
expect(getByTestId('action-button')).toBeInTheDocument()
});
});
Here's my jest config :
module.exports = {
preset: 'ts-jest',
testEnvironment: 'jsdom',
transform: {
'^.+\\.tsx?$': [
'ts-jest',
{
isolatedModules: true,
},
],
},
testMatch: ['**/src/**/__tests__/**/*.test.ts?(x)'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
collectCoverage: true,
coveragePathIgnorePatterns: [
'/node_modules/',
'/__tests__/',
'/dist/',
'/coverage/',
],
setupFilesAfterEnv: [
'#testing-library/jest-dom/extend-expect',
'jest-canvas-mock',
'<rootDir>/jest.setup.ts',
],
moduleNameMapper: {
'^components/(.*)$': '<rootDir>/src/components/$1',
},
testPathIgnorePatterns: ['node_modules'],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src',
},
moduleDirectories: ['node_modules'],
coverageThreshold: {
global: {
branches: 80,
functions: 80,
lines: 80,
statements: 80,
},
},
};
I am not sure why this error is occurring or how to fix it. Can anyone help me understand what is causing this issue and how to resolve it? The error even shows even if i commented out the it()
I'm trying to test a React component that uses Apollo userQuery but I'm getting this error:
console.error node_modules/react/cjs/react.development.js:209
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in, or you might have mixed up
default and named imports.
Here is my test
import { MockedProvider } from '#apollo/client/testing'
import React from 'react'
import { render } from '#testing-library/react'
import { customerList } from '../../mocks'
import { ListCustomers } from '../../queries'
import CustomerListContainer from '../CustomerListContainer'
import '#testing-library/jest-dom'
const mocks = [
{
request: {
query: ListCustomers,
},
result: {
data: customerList,
},
},
]
describe('components: <CustomerListContainer />', () => {
it('renders customer list', () => {
render(
<MockedProvider mocks={mocks} addTypename={false}>
<CustomerListContainer customerRole="ADMIN" />
</MockedProvider>
)
})
})
Here is the component I'm testing:
import React from 'react'
import { useQuery } from '#apollo/client'
import { CustomerList } from '../components'
import { ListCustomers } from '../queries'
const CustomerListContainer = ({ customerRole }: { customerRole: string }) => {
const { data, loading, error } = useQuery(ListCustomers, {
variables: {
filter: {
role: {
eq: customerRole,
},
},
},
})
if (error) return <h1>Something went wrong.</h1>
if (loading) return <h1>Loading...</h1>
return (
<CustomerList customers={data.listCustomers.items} />
)
}
export default CustomerListContainer
From my package.json:
"#apollo/client": "^3.7.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
For context I used Create React App.
I needed to upgrade to the latest version of react-scripts, in my case version 5.0.1.
Using absolute path in my package like this import { Component1, Component2 } from "common/assets";
And get error after local install and check
./node_modules/package/dist/package.js
Module not found: Can't resolve 'common/assets' in '/home/max/project/node_modules/package/dist'
In during assembly get warnings
(!) Unresolved dependencies
common/helpers (imported by src/components/Link/index.ts...
My rollup config
/* eslint-disable flowtype/require-valid-file-annotation, no-console, import/extensions */
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import flow from "rollup-plugin-flow";
import sourceMaps from "rollup-plugin-sourcemaps";
const commonPlugins = [
flow({
pretty: true
}),
sourceMaps(),
nodeResolve({
jsnext: true,
main: true,
browser: true,
extensions: [".ts", ".tsx", ".js", ".jsx"]
}),
babel({
exclude: "node_modules/**"
}),
commonjs({
namedExports: {
react: [
"cloneElement",
"createFactory",
"Component",
"PropTypes",
"createElement",
"createContext"
],
"react-dom": ["render"],
"react-is": ["isElement", "isValidElementType", "ForwardRef"]
}
})
];
const globals = { react: "React", "react-dom": "ReactDOM" };
const configBase = {
input: "./src/index.js",
plugins: commonPlugins
};
const standaloneBaseConfig = {
...configBase,
output: {
file: "dist/package.js",
format: "cjs",
name: "sct",
globals,
sourcemap: true
},
plugins: configBase.plugins
};
export default standaloneBaseConfig;
Can I use absolгte paths in my project and how can resolve it?
You can use the official plugin for that: #rollup/plugin-alias.
I am using Ionic 2:
Your system information:
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 0.0.47
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 10
Node Version: v6.9.2
Xcode version: Not installed
When I run ionic serve, I get the following errors in the CLI:
[13:55:44] ionic-app-scripts 0.0.47
[13:55:44] watch started ...
[13:55:44] build dev started ...
[13:55:44] clean started ...
[13:55:44] clean finished in 16 ms
[13:55:44] copy started ...
[13:55:44] transpile started ...
[13:55:52] template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html":
Error: ENOENT: no such file or directory, open
'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\login\build\pages\login\login.html'
[13:55:52] template error, "E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html":
Error: ENOENT: no such file or directory, open
'E:\Development\IDE\ionic-apps\theWhoZoo-chat\src\pages\home\build\pages\home\home.html'
[13:55:52] transpile finished in 8.10 s
[13:55:52] webpack started ...
[13:55:53] copy finished in 8.46 s
[13:56:13] webpack finished in 20.63 s
[13:56:13] sass started ...
[13:56:16] sass finished in 3.37 s
[13:56:16] build dev finished in 32.15 s
[13:56:17] watch ready in 32.35 s
[13:56:17] dev server running: http://localhost:8100/
And the following in the browser when the page tries to open:
There error is occurring here in main.js (core_1.provide(auth_1.FirebaseAuth, {):
exports.AngularFire = AngularFire;
exports.COMMON_PROVIDERS = [
core_1.provide(auth_1.FirebaseAuth, {
useExisting: auth_1.AngularFireAuth
}),
{
provide: tokens_1.FirebaseApp,
useFactory: _getFirebase,
deps: [tokens_1.FirebaseConfig]
},
auth_1.AngularFireAuth,
AngularFire,
database_1.FirebaseDatabase
];
If anyone can help me resolve this, I would appreciate it.
More info:
app.module.ts
import { NgModule, ErrorHandler } from '#angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';
#NgModule({
declarations: [
MyApp,
HomePage,
LoginPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoginPage
],
providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },
FIREBASE_PROVIDERS, defaultFirebase({
apiKey: "xxxxx-xxxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
})]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { FirebaseAuth } from 'angularfire2';
//declare var firebase: any;
import firebase from 'firebase'
#Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = LoginPage;
constructor(platform: Platform, private auth: FirebaseAuth) {
firebase.initializeApp({
apiKey: "xxxx-xxx",
authDomain: "xxxx.firebaseapp.com",
databaseURL: "https://xxxx.firebaseio.com",
storageBucket: "xxxx.appspot.com"
});
this.auth.subscribe((data) => {
if (data) {
window.localStorage.setItem('uid', data.auth.uid);
window.localStorage.setItem('displayName', data.auth.displayName);
window.localStorage.setItem('photoURL', data.auth.photoURL);
this.rootPage = HomePage;
}
});
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Splashscreen.hide();
});
}
}
home.ts
import {Component} from '#angular/core';
import {NavController} from 'ionic-angular';
import {LoginPage} from '../login/login';
import {
FirebaseAuth,
AngularFire,
FirebaseListObservable
} from 'angularfire2';
#Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
firelist: FirebaseListObservable<any>;
chat: any;
constructor(public nav: NavController, public af: AngularFire, public auth: FirebaseAuth) {
this.firelist = this.af.database.list('/chat', { //mengambil data
query: {
orderByChild: 'negativtimestamp', //order dari data yang terbaru
}
});
}
chatSend(va, vi) { //mengirim pesan chat
this.af.database.list('/chat').push({ // menambahkan data chat ke firebase
uid: window.localStorage.getItem('uid'),
img: window.localStorage.getItem('photoURL'),
username: window.localStorage.getItem('displayName'),
chat_text: va.chatText,
timestamp: Date.now(),
negativtimestamp: -Date.now() //buat nanti ambil data yang terbaru
})
this.chat = '';
}
logout() { // melakukan logout
window.localStorage.removeItem('email'); // remove email dari localStorage
window.localStorage.removeItem('uid'); // remove uid dari localStorage
window.localStorage.removeItem('displayName'); // remove displayName dari localStorage
this.auth.logout();
this.nav.setRoot(LoginPage);// kembali ke halaman LoginPage
}
}
login.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {FirebaseAuth, AuthProviders, AuthMethods} from 'angularfire2';
import {HomePage} from '../home/home';
#Component({
templateUrl: 'build/pages/login/login.html',
})
export class LoginPage {
constructor(private nav: NavController, public auth: FirebaseAuth) {
}
LoginGoogle(){
this.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Redirect,
}).then((Data) => {
this.nav.setRoot(HomePage);
}).catch((error) => {
console.log(error);
})
}
}
pacjage.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.2.1",
"#angular/compiler": "2.2.1",
"#angular/compiler-cli": "2.2.1",
"#angular/core": "2.2.1",
"#angular/forms": "2.2.1",
"#angular/http": "2.2.1",
"#angular/platform-browser": "2.2.1",
"#angular/platform-browser-dynamic": "2.2.1",
"#angular/platform-server": "2.2.1",
"#ionic/storage": "1.1.7",
"angularfire2": "^2.0.0-beta.3-0930330",
"firebase": "^3.3.0",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "^2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-whitelist",
"cordova-plugin-console",
"cordova-plugin-statusbar",
"cordova-plugin-device",
"cordova-plugin-splashscreen",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": [],
"description": "theWhoZoo-chat: An Ionic project"
}
you need to correct your login.ts. home.ts near
#Component({
templateUrl: 'login.html'
})
Upgraded to latest angularfire2 and this fixed it.
npm install firebase angularfire2#latest --save
I'm trying to write an acceptance test for my Ember app and I seem to be having some trouble when it comes to PhantomJS and the Ember test server.
I'm running the following versions:
Ember : v1.13.6
Ember Data : v1.13.7
PhantomJS is failing with the following error:
Died on test #1 at http://localhost:7357/assets/test-support.js:2934
at http://localhost:7357/assets/test-support.js:6640
at http://localhost:7357/assets/test-loader.js:31
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:6647: Can't find variable: DS
Is this a known issue?
The test is running fine within the chrome runner.
Here is my ember-cli-build.js (Brocfile):
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
// Build Options
var options = {
// Build for development (ember s)
development: {
sassOptions: {
includePaths: ['bower_components/materialize/sass']
}
},
// Build for deployments
dev_deploy: {
sassOptions: {
includePaths: ['bower_components/materialize/sass']
},
fingerprint: {
enabled: true,
prepend: 'redacted',
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
}
},
// Build for deployments
staging_deploy: {
sassOptions: {
includePaths: ['bower_components/materialize/sass']
},
fingerprint: {
enabled: true,
prepend: 'redacted',
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
}
},
prod_deploy: {
sassOptions: {
includePaths: ['bower_components/materialize/sass']
},
fingerprint: {
enabled: true,
prepend: 'redacted',
extensions: ['js', 'css', 'png', 'jpg', 'gif', 'woff', 'ttf']
}
}
};
var env = process.env.EMBER_ENV || 'development';
var app = new EmberApp(defaults, options[env]);
// IMPORTED LIBRARIES
app.import('vendor/js/ember-uploader.named-amd.js', {
exports: {
'ember-uploader': [ 'default' ]
}
});
app.import('vendor/js/faye-browser.js');
app.import('vendor/js/Util.js');
app.import('vendor/js/CanvasVirtualJoyStick.js');
app.import('vendor/js/CanvasZoomController.js');
app.import('vendor/js/chosen.jquery.js');
app.import('vendor/css/chosen.css');
return app.toTree();
};
Here is my test:
import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'teal-turtle/tests/helpers/start-app';
var application;
module('Acceptance | platforms', {
beforeEach: function() {
application = startApp();
},
afterEach: function() {
Ember.run(application, 'destroy');
}
});
test('visiting /platforms', function(assert) {
authenticateSession();
visit('/platforms');
andThen(function() {
assert.equal(currentURL(), '/platforms');
});
});
Thanks!
I noticed you were using .bind in the route file (platform) and .bind isn't very phantomJS friendly :( so I did the following...
Added the es5 shim and broccoli funnel to your package.json
"broccoli-funnel": "^0.2.3",
"es5-shim": "^4.0.5"
Next I opened the ember-cli-build.js (prev known as the Brocfile)
var funnel = require('broccoli-funnel');
var es5Shim = funnel('node_modules/es5-shim', {
files: ['es5-shim.js'],
destDir: '/assets'
});
return app.toTree([es5Shim]);
And finally I added the es5 shim to your tests/index.html above vendor.js
<script src="assets/es5-shim.js"></script>
Below is a full commit on github showing all the files changed (note: Brocfile in this commit example because I'm using an older ember-cli version)
https://github.com/toranb/ember-cli-simple-store/commit/4f46a392b3be0ec93864342ba2edddbd3430e293