I was using traceur and es6 loader, but I change to systemjs and when I try to use System.paths['jquery'], I had the message:
Error: Cannot set SystemJS.paths["jquery"] directly. Use SystemJS.config({ paths: { "jquery": ... } }) rather
So I change to:
System.config({
paths: {
"jquery": "./node_modules/jquery/dist/jquery.js"
}
});
System.import('jquery');
System.import('src/app.js');
Show this error:
system.js:4 Uncaught (in promise) Error: Fetch error: 404 Not Found
system.js:4 Uncaught (in promise) Error: Unable to dynamically transpile ES module
A loader plugin needs to be configured via `SystemJS.config({ transpiler: 'transpiler-module' })`.
I tried, but didn't work:
System.config({
transpiler: "babel",
map: {
"babel": "./node_modules/babel-core/lib/api/browser.js",
"jquery": "./node_modules/jquery/dist/jquery.js"
}
})
Error
system.js:4 Uncaught (in promise) Error: Fetch error: 404 Not Found
Instantiating localhost:3000/node_modules/babel-core/lib/api/node
Loading localhost:3000/node_modules/babel-core/lib/api/browser.js
Loading babel
Unable to load transpiler to transpile localhost:3000/src/app.js
I think you need to inform systemjs that jquery should be added as a global script so it doesn't try to transpile it. Try the following:
System.config({
paths: {
"jquery": "./node_modules/jquery/dist/jquery.js"
},
meta: {
"jquery": { "format": "global" }
}
});
Related
I have a client repository with React 15.3, Webpack 4, and Babel 7. Webpack works as a charm, but our E2E testing suite using Nightwatch 0.9.20 fails to compile with the new #babel/register package.
Our company is upgrading our babel version from 6 to 7.
Floating around the internet a solution to add the following to the babel.config.js file:
{
"presets": [
[
"#babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"add-module-exports",
]
}
In our instance, this solution doesn't resolve our problem.
I should mention the structure of the project is as follows:
client // where nightwatch is run from the terminal
|-- tests // our E2E tests
|-- nightwatch.conf.js
|-- nighwatch_globals.js
|-- babel.config.js
api // a completely separate repository
|-- tests // we store factory definitions here as well
|-- db
|-- models // also a frequently referenced directory in our E2E tests
Our nightwatch.conf.js structure looks like this:
require('#babel/register')(); // this has been upgraded from 'babel-register'
require('dotenv').config();
...
module.exports = {
// nightwatch configurations
"globals_path": "./nightwatch_globals.js",
// more nightwatch configurations
}
Our nightwatch_globals.js file (where the error is being called looks like this:
import fetch from 'isomorphic-fetch';
module.exports = {
reporter: function(results, cb) {
fetch('http://localhost:4444/selenium-server/driver/?cmd=shutDownSeleniumServer').then(() => {
cb();
if (
(typeof(results.failed) === 'undefined' || results.failed === 0) &&
(typeof(results.error) === 'undefined' || results.error === 0)
) {
process.exit(0);
} else {
process.exit(1);
}
});
},
// give the db some time to finish ops from previous test before
// clearing db and starting the next test
before: function(done) {
require('./../eka-api/test/factories/index.js');
done();
},
beforeEach: function(done) {
setTimeout(function() {
done();
}, 5000);
},
};
And our babel.config.js file is the following:
module.exports = function(api) {
api.cache(true);
const presets = [
"#babel/preset-env",
"#babel/react",
"#babel/preset-flow",
];
const plugins = [
"#babel/plugin-syntax-flow",
"#babel/transform-flow-strip-types",
["#babel/plugin-proposal-decorators", {"legacy": true}],
// react hot loader must come before class properties plugin
"react-hot-loader/babel",
// class properties plugin must come after decorators
// if decorators has a 'legacy' attribute, class properties must be loose
["#babel/plugin-proposal-class-properties", {"loose" : true}],
"#babel/plugin-transform-runtime"
];
return {
presets,
plugins
};
};
From the client directory I run in the terminal node nightwatch.conf.js ; nightwatch
Here is the persisting error
/Users/myUser/Documents/api/test/factories/index.js:1
(function (exports, require, module, __filename, __dirname) { import bluebird from 'bluebird';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Module._compile (/Users/myUser/Documents/eka-client/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (module.js:580:10)
at Object.newLoader [as .js] (/Users/myUser/Documents/eka-client/node_modules/pirates/lib/index.js:104:7)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Module.require (module.js:513:17)
My intuition tells me that the reason why the import token is not recognized has to do with how Babel 7 is scoping the compilation of code down to the process.cwd(). As you see the error is coming from the api. Since nightwatch is a package in the client directory, Babel isn't compiling the api directory (which is still on Babel 6). However, I'd like to avoid having to refactor our entire client testing suite to be independent of the api files.
I suspect the solution is to find a way for #babel/register to compile the api from the client side, but I don't know how I'd go about doing something like this.
I have a Mongo db setup on localhost:27017 and and trying to connect to it from my app that uses Webpack via Mongoose. I have Mongoose installed as a package. Here is my code:
import mongoose from 'mongoose';
var db = mongoose.connect('mongodb://localhost:27017/music-app');
mongoose.connection.once('connected', function() {
console.log("Connected to database")
});
I'm pretty sure i've followed the documentation correctly but it's throwing the following compile error:
Error in ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/~/resolve-from/index.js
Module not found: 'module' in C:\Users\new\Desktop\Development Projects\music-app\node_modules\mongoose\node_modules\mongodb\node_modules\mongodb-core\node_modules\require_optional\node_modules\resolve-from
There is also another error in the console:
webpackHotDevClient.js:216 Error in ./~/mongoose/~/mongodb/lib/mongo_client.js
Module not found: 'dns' in C:\Users\new\Desktop\Development Projects\music-app\node_modules\mongoose\node_modules\mongodb\lib
# ./~/mongoose/~/mongodb/lib/mongo_client.js 12:10-24
Anyone seen this before and know how to resolve it? Is there additional packages I might need to install in node?
This error is because you're trying to use mongodb from browser, as create-react-app is a front-end app.
You should use a back-end server and use mongodb from there.
You can check out this this full-stack repo having a nodejs server with create-react-app front-end.
https://github.com/fullstackreact/food-lookup-demo
That is because Webpack can’t statically analyze if (typeof window === 'undefined') in mongoose/lib/drivers/index.js
Here is the solution:
webpackConfig.plugins = [
...,
new webpack.DefinePlugin({
'typeof window': "\"object\""
}),
...
]
Also, if you get error messages regarding mongoose, check out below configurations.
npm install node-loader --save-dev
npm install require_optional --save-dev
npm install module --save-dev
webpack.config.js
const webpackConfig = {
name : 'client',
target : 'web',
devtool : config.compiler_devtool,
resolve : {
root : paths.client(),
extensions : ['', '.js', '.jsx', '.json', '.coffee', '.node']
},
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
module : {}
}
// ------------------------------------
// Loaders
// ------------------------------------
// JavaScript / JSON
webpackConfig.module.loaders = [{
test : /\.(js|jsx)$/,
exclude : /node_modules\/(?!(lodash-es)\/).*/,
loader : 'babel',
query : config.compiler_babel
}, {
test : /\.json$/,
loader : 'json'
}, {
test: /\.coffee$/,
loader: 'coffee-loader',
exclude: /node_modules|lib/
}, {
test: /\.node$/,
loader: 'node-loader'
}]
This is my conf.js
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['C:\\Users\\meiyer\\Desktop\\Protractor_Tests\\specs\\specs.js'],
baseUrl: 'https://devcp.us.sunpowermonitor.com/#/dashboard',
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
//Options to be passed to Jasmine-node.
jasmineNodeOpts: {
onComplete: null,
isVerbose: true,
showColors: true,
includeStackTrace: true
}
};
This is my specs.js
var elhLoginpage = {
nameInput : element(by.model('user.UserName')),
passInput : element(by.model('model')),
submitButton :element(by.buttonText('sign in')),
setEmail: function(email) {
this.nameInput.sendKeys(email);
},
setPass: function(password) {
this.passInput.sendKeys(password);
},
clickSubmit:function(){
this.submitButton.click();
}
};
var elhHomepage = {
greetingText : element(by.css('.greeting-des')),
getgreetingText: function() {
this.greetingText.text();
}
};
describe('elhLoginpage login test', function() {
it('should land on homepage when valid username and password is entered',
function(){
elhLoginpage.setEmail('lease_id#test.com');
elhLoginpage.setPass('sun');
elhLoginpage.clickSubmit();
expect(elhHomepage.getgreetingText().toEqual('Hello lease');
});
});
I am executing the test on node.js command prompt as -> protractor conf.js. I am getting below stack trace. From the information below -I am not able to debug on which line number on either of the .js files the issue has occurred. Is there a way to activate this information on stacktrace?
Stacktrace -
C:\Users\meiyer\Desktop\Protractor_Tests>protractor conf.js
[15:40:56] I/hosted - Using the selenium server at
http://localhost:4444/wd/hub
[15:40:56] I/launcher - Running 1 instances of WebDriver
[15:40:58] E/launcher - Error: SyntaxError: missing ) after argument list
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at
C:\Users\meiyer\AppData\Roaming\npm\node_modules\protractor\node_modules\
jasmine\lib\jasmine.js:71:5
at Array.forEach (native)
at Jasmine.loadSpecs
C:\Users\meiyer\AppData\Roaming\npm\node_modules\protr
actor\node_modules\jasmine\lib\jasmine.js:70:18)
[15:40:58] E/launcher - Process exited with error code 100
Unforunately that can be a common error in protractor for syntax issues. It's hard to tell without code indentation, but the error is about a missing ) and at a quick glance it looks like you are missing one in your final expect statement.
You have:
expect(elhHomepage.getgreetingText().toEqual('Hello lease');
It should be:
expect(elhHomepage.getgreetingText()).toEqual('Hello lease');
You can use linters like ES Lint to quickly find syntax errors like this.
I am using zingchart in my angular2 application and came a cross this problem.
when I am trying to click the node - I get:
angular2.dev.js:23730 EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property 'parentNode' of null
when I try to do that same when I am in debug mode - i.e. do it slower when jumping from line to line everything works fine.
I read a lot about about the Uncaught (in promise): TypeError: here and tried some solutions but with no luck.
Maybe anyone have an idea for me?
Thanks
I have a pie chart:
Which have the following code:
render(){
this.zone.runOutsideAngular(() => {
zingchart.render({
id : this.chart['id'],
data : this.chart['data'],
width : this.chart['width'],
height: this.chart['height']
});
zingchart.node_click = function(p) {
window.location.href = #/resources";
}
});}
my resource component is very simple:
import { Component } from 'angular2/core';
#Component({
selector: 'resources-component',
templateUrl: `I am the resource page`,
})
export class ResourcesComponent {
title: string = 'resources';
constructor() {
}
}
My file structure looks like this. Everything is inside the js folder.
-js
--config.js
-app
--app.fb.js
--main.js
-lib
--jquery-1.9.0.js
--require.js
-tools
--r.js
--build.js
I've created a config file as per https://developers.facebook.com/docs/javascript/howto/requirejs
config.js
require.config({
shim: {
'facebook' : { exports: 'FB' }
},
paths: {
'jquery': '../lib/jquery-1.9.0',
'facebook': '//connect.facebook.net/en_US/all'
}
});
app.fb.js
define(['facebook'], function(){
console.log("loaded fb");
});
build.js
({
baseUrl: "../app",
mainConfigFile: "../config.js",
name: "main",
out: "../core.js",
paths: {
'facebook': 'empty:'
}
})
main.js
require(["jquery", "app.fb"], function($, appfb){
// Log the callback parameter.
console.log( "$.fn.jquery:", $.fn.jquery );
});
finally I call the optimized file(core.js) here
<script type="text/javascript" data-main="js/core" src="js/lib/require-2.1.15.js"></script>
The optimizer appears to run correctly but when I load the page I expect the Facebook module to load in from the CDN. Instead I get
GET http://example.com/js/facebook.js require-2.1.15.js:1901
Uncaught Error: Script error for: facebook
I've spent ages on this and can't figure out the problem!
Any thoughts?
Thanks
Got it, for some reason this only worked when I moved the config.js contents into main.js.
This looks like:
require.config({
shim: {
'facebook' : { exports: 'FB' }
},
paths: {
'jquery': '../lib/jquery-1.9.0',
'facebook': '//connect.facebook.net/en_US/all'
}
});
require(["jquery", "app.fb"], function($, appfb){
// Log the callback parameter.
console.log( "$.fn.jquery:", $.fn.jquery );
});
In build.js, change
mainConfigFile: "../app/config.js",
to
mainConfigFile: "../app/main.js",
r.js optimiser runs correctly!