I am a newbie to ember. Running ember server command gives me "frontend/app.js: undefined is not a function" error. I have ran npm install and bower install.
version: 0.2.1
Could not find watchman, falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/#watchman for more info.
Livereload server on port 35729
Serving on http://localhost:4200/
File: frontend/app.js
frontend/app.js: undefined is not a function
TypeError: frontend/app.js: undefined is not a function
at Object.isValidIdentifier (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/types/validators.js:176:44)
at TraversalPath.Property (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/transformation/transformers/es3/property-literals.js:16:58)
at TraversalPath.call (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:127:26)
at TraversalPath.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:142:10)
at TraversalContext.visitNode (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:34:22)
at TraversalContext.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:51:28)
at Function.traverse.node (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/index.js:44:17)
at TraversalPath.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/path.js:159:18)
at TraversalContext.visitNode (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:34:22)
at TraversalContext.visit (/frontend/node_modules/ember-cli-babel/node_modules/broccoli-babel-transpiler/node_modules/babel-core/lib/babel/traversal/context.js:51:28)
app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
Related
I installed browser-image-compression which, as part of its functionality, creates a Worker. Now when I run jest tests, I get the following error:
Test suite failed to run
ReferenceError: Worker is not defined
There are no tests connected to the function which uses browser-image-compression.
The scripts section in package.json has the following two lines
"test": "react-scripts test",
"test:ci": "cross-env CI=true react-scripts test"
Oh, and I have a file for setting up tests. Should I mock Worker in here?
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
Late in responding to this but it could help others - but following this comment helped me with this issue.
If you add the following to its own file - I have mine within the same dir as the setupTests file named workerMock.js:
export default class Worker {
constructor(stringUrl) {
this.url = stringUrl;
this.onmessage = () => {};
}
postMessage(msg) {
this.onmessage(msg);
}
}
Then import that Worker file into your test setup file and add window.Worker = Worker. Your setup file may look like:
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import '#domain/yup';
import Worker from 'path-to-your-worker-file-above';
configure({
adapter: new Adapter()
});
global.fetch = require('jest-fetch-mock');
window.Worker = Worker;
Hope this helps
A better solution is that updating 'browser-image-compression' package to the latest version , this helped me .
As per the vue-sweetalert2 doc, in my main.js, I import and use the plugin:
import VueSweetalert2 from "vue-sweetalert2";
Vue.use(VueSweetalert2);
In my component, ContactForm.vue, I can use:
this.$swal(...)
However, when I test:unit this component, I need to add the import and Vue.use()
import VueSweetalert2 from "vue-sweetalert2";
Vue.use(VueSweetalert2);
and I get an error:
$ vue-cli-service test:unit ContactForm.spec.js
FAIL tests/unit/ContactForm.spec.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• 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/en/configuration.html
Details:
/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue-sweetalert2/src/index.js:2
import swal from 'sweetalert2/dist/sweetalert2.min.js';
^^^^^^
SyntaxError: Unexpected token import
What could be wrong?
UPDATE
the vue-sweetalert2/src/index.js, line 2 faulty line, is:
// #ts-check
import swal from 'sweetalert2/dist/sweetalert2.min.js';
the developer of this wrapper added an index.d.ts fie
import Vue, { PluginObject, PluginFunction } from 'vue';
import * as swal from 'sweetalert2';
...
but it seems not to be taken in account.
SOLVED ...
I added a transformIgnorePatterns in my jest config in package.json
"jest": {
....
"transformIgnorePatterns": [
"/node_modules/(?!vue-sweetalert2).+\\.js$"
],
....
}
I've been trying to set up a React component inside Django with the help of Webpack 4.
To get me starting I went through and read:
Using Webpack transparently with Django + hot reloading React components as a bonus
Tutorial: Django REST with React (Django 2.0 and a sprinkle of testing)
Both these walkthroughs are great. At last, I got it almost working by following the second link even though I use Django 1.11.
The problem I had after following the second link was that hot reloading does not work when using a webpack-dev-server. The problem is that Django cannot read the output file of the webpack-dev-server (gives 404 error) while the main.js can be read. I've read that the dev-server files do only live in memory by default.
To overcome the issue with error 404 on the hot reload files I installed the package write-file-webpack-plugin to write out the file each reloads. Then changed the webpack-config.js to (I deleted some lines to keep it shorter....):
var path = require('path');
//webpack is not needed since I removed it from plugins
//const webpack = require('webpack');
var BundleTracker = require('webpack-bundle-tracker');
var WriteFilePlugin =require('write-file-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
]
},
entry: [
'./frontend/src/index',
],
output: {
path: path.join(__dirname, 'frontend/static/frontend'),
// Changing the name from "[name]-[hash].js" to not get 1000 files in the static folder.
filename: 'hotreloadfile.js'
},
plugins: [
//This line writes the file on each hot reload
new WriteFilePlugin(),
//This can be removed.
//new webpack.HotModuleReplacementPlugin(),
new BundleTracker({filename: './webpack-stats.json'})
],
mode:'development',
};
in my package.json I have the follow line among the script tag:
"start": "webpack-dev-server --config ./webpack.config.js",
And in Django I installed webpack-loader with the following lines in settings.py:
STATIC_URL = '/static/'
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'frontend/',
'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json')
}
}
Finally, in my root component called index.js, I do not need the module.hot.accept(); line
Do you see any drawbacks to this approach? Except that I had to install another package?
Why didn't I get it to work with new webpack.HotModuleReplacementPlugin()?
Here is another approach if you develop frontend in react and backend in django.
I have django server running on port 8000 and react server running on port 3000.
If I add "proxy": "http://localhost:8000" line in package.json of react code, localhost:3000 will do hot-reloading while api call goes to localhost:8000.
I have installed Bourbon with Bower, but cannot get broccoli-sass to import Bourbon. Broccoli-sass is compiling my app.scss file to app.css.
I have tried
#import '_bourbon';
and
#import 'bourbon';
at the top of my app.scss file but get the error:
Error: file to import not found or unreadable: _bourbon
My brocfile:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var sassImportPaths = [
'app/styles',
'bower_components/bourbon/app/assets/stylesheets',
];
var appCss = compileSass(sassImportPaths, 'app.scss', '/assets/app.css');
module.exports = app.toTree([appCss]);
No need to import it in your Brocfile. You can simply add Bourbon as a dependency in your app.scss:
#import "bower_components/bourbon/app/assets/stylesheets/bourbon.scss";
If you look at this file you will see that it contains all the necessary imports.
I'm migrating a custom made Ember project (I do not use a build system, but actually created my own grunt script). When I run ember-cli-migrate but I'm getting the following error:
Git Move Moving templates/users.hbs to app\templates\users.hbs
Do not know how to import App
Do not know how to import App
Do not know how to import App
Do not know how to import App
Do not know how to import App
Do not know how to import App
Do not know how to import App
Do not know how to import App
assert.js:86
throw new assert.AssertionError({
^
AssertionError: {kind: var, declarations: [object Object], loc: null, type: Vari
ableDeclaration, comments: null} does not match field "init": Expression | null
of type VariableDeclarator
at add (c:\Users\DoryZ\AppData\Roaming\npm\node_modules\ember-cli-migrator\n
ode_modules\recast\node_modules\ast-types\lib\types.js:525:28)
at c:\Users\DoryZ\AppData\Roaming\npm\node_modules\ember-cli-migrator\node_m
odules\recast\node_modules\ast-types\lib\types.js:539:17
at Array.forEach (native)
at Object.defineProperty.value [as variableDeclarator] (c:\Users\DoryZ\AppDa
ta\Roaming\npm\node_modules\ember-cli-migrator\node_modules\recast\node_modules\
ast-types\lib\types.js:538:30)
at Context.MigratorVisitorPrototype.visitAssignmentExpression (c:\Users\Dory
Z\AppData\Roaming\npm\node_modules\ember-cli-migrator\lib\migrator-visitor.js:71
:67)
at Context.invokeVisitorMethod (c:\Users\DoryZ\AppData\Roaming\npm\node_modu
les\ember-cli-migrator\node_modules\recast\node_modules\ast-types\lib\path-visit
or.js:306:43)
at Visitor.PVp.visitWithoutReset (c:\Users\DoryZ\AppData\Roaming\npm\node_mo
dules\ember-cli-migrator\node_modules\recast\node_modules\ast-types\lib\path-vis
itor.js:180:28)
at NodePath.each (c:\Users\DoryZ\AppData\Roaming\npm\node_modules\ember-cli-
migrator\node_modules\recast\node_modules\ast-types\lib\path.js:96:22)
at visitChildren (c:\Users\DoryZ\AppData\Roaming\npm\node_modules\ember-cli-
migrator\node_modules\recast\node_modules\ast-types\lib\path-visitor.js:199:14)
at Visitor.PVp.visitWithoutReset (c:\Users\DoryZ\AppData\Roaming\npm\node_mo
dules\ember-cli-migrator\node_modules\recast\node_modules\ast-types\lib\path-vis
itor.js:188:16)
any help would be appreciatd..