Aurelia using featherjs dependency failing to properly import - aurelia

How do you import featherjs using the style common in Aurelia projects. This is what I have:
in the build file aurelia.json
"dependencies": [
{
"name": "socket.io-client",
"path": "../node_modules/socket.io-client/dist/socket.io.min"
},
{
"name": "feathers",
"path": "../node_modules/feathers",
"main": "client",
"env": "dev"
},
"aurelia-binding",
In the app.js
import io from 'socket.io-client';
import feathers from 'feathers';
//import socketio from 'feathers-socketio';
export class App {
constructor() {
this.message = 'Hello World!';
console.log("startup");
const socket = io('http://localhost:3030');
const app = feathers();
// .configure(socketio(socket));
}
}
The error looks like this:
Starting 'readProjectConfiguration'...
Finished 'readProjectConfiguration'
Starting 'processMarkup'...
Starting 'processCSS'...
Starting 'configureEnvironment'...
Finished 'processCSS'
Finished 'processMarkup'
Finished 'configureEnvironment'
Starting 'buildJavaScript'...
Finished 'buildJavaScript'
Starting 'writeBundles'...
Tracing app...
{ uid: 8,
name: 'writeBundles',
branch: false,
error:
{ [Error: ENOENT: no such file or directory, open '/Users/steve/project/src/uberproto.js']
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/steve/project/src/uberproto.js',
moduleTree: [ 'feathers/lib/feathers' ],
fileName: '/Users/steve/project/node_modules/feathers/lib/feathers.js' },
duration: [ 0, 161365129 ],
time: 1484844203606 }
Once it gets into processing the dependency it seems to be having path confusion looking for dependencies in featherjs. I'm pretty new with this stuff, so it is likely something simple, but I haven't figured out the correct way to include this dependency.

I believe what you want to install is feathers-client not feathers.
npm i -S feathers-client
aurelia.json:
{
"name": "socket.io-client",
"path": "../node_modules/socket.io-client/dist/socket.io.min"
},
{
"name": "feathers-client",
"path": "../node_modules/feathers-client/dist",
"main": "feathers"
}
app.js:
import io from 'socket.io-client';
import feathers from 'feathers-client';
export class App {
constructor() {
const socket = io('http://localhost:3030');
const app = feathers().configure(feathers.socketio(socket));
}
}

You're missing the main property. The configuration should be like this:
{
"name": "socket.io-client",
"path": "../node_modules/socket.io-client/dist",
"main": "socket.io.min"
}

Related

Webpack can't resolve vue in node_modules/vue-template-compiler

I have a simple Typescript project with this code:
import {
parseComponent,
compile as compileTemplate,
ASTElement,
} from "vue-template-compiler";
...
I compile it using tsc with:
"target": "es2020",
"module": "commonjs",
And it gives code like this:
const vue_template_compiler_1 = require("vue-template-compiler");
In my package.json I have this:
"dependencies": {
"vue-template-compiler": "^2.6.12"
But I don't have "vue", because I don't need all of Vue - just the template compiler.
This all works fine, but I'm trying to use Webpack to bundle everyone into a single file. However, when I run webpack I get this error:
ERROR in ./node_modules/vue-template-compiler/index.js 2:19-41
Module not found: Error: Can't resolve 'vue' in '/path/to/myproject/node_modules/vue-template-compiler'
# ./build/analysis.js 8:32-64
# ./build/index.js 8:19-40
This corresponds to the require("vue-template-checker") line. Why do I get this error?
Here's my webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
target: "node",
entry: "./build/index.js",
mode: "production",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new webpack.BannerPlugin({ banner: "#!/usr/bin/env node", raw: true }),
],
};
That module makes Vue version check during import. I guess, you want to skip that check. I would try aliasing. Something like:
module.exports = {
// ...
resolve: {
alias: {
'vue-template-compiler$': 'vue-template-compiler/build.js'
}
}
}

Critical dependency: the request of a dependency is an expression, vue.js

My testing-app is compiling fine, except that I get this warning:
" Critical dependency: the request of a dependency is an expression"
(base) marco#pc01:~/webMatters/vueMatters/PeerJS-VueJS-Test$ npm run serve
> testproject#0.1.0 serve /home/marco/webMatters/vueMatters/PeerJS-VueJS-Test
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
WARNING Compiled with 1 warnings
7:22:25 PM
warning in ./node_modules/peerjs/dist/peerjs.min.js
Critical dependency: the request of a dependency is an expression
App running at:
- Local: http://localhost:8080
- Network: http://ggc.world/
Note that the development build is not optimized.
To create a production build, run npm run build.
I read around that it might depend of webpack, but didn't find how to put it right.
This is webpack.config.js :
{
"mode": "development",
"output": {
"path": __dirname+'/static',
"filename": "[name].[chunkhash:8].js"
},
"module": {
"rules": [
{
"test": /\.vue$/,
"exclude": /node_modules/,
"use": "vue-loader"
},
{
"test": /\.pem$/,
"use": "file-loader"
}
]
},
node: {
__dirname: false,
__filename: false
},
resolve: {
extension: ['*', '.pem'],
},
devServer: {
watchOptions: {
aggregateTimeout: 300,
poll: 1000
},
https: true,
compress: true,
public: 'ggc.world:8080'
}
}
Any ideas about how to solve it?
The following code works for me. Edit vue.config.js and add webpack config:
configureWebpack: {
module: {
exprContextCritical: false
}
}
const webpack = require('webpack');
module.exports = {
// ... your webpack configuration ...
plugins: [
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
]
}
try this one
For people coming here using CRA and having trouble with PeerJS, install react-app-rewired and use the following override config and it should work.
/* config-overrides.js */
const webpack = require('./node_modules/webpack')
module.exports = function override (config, env) {
if (!config.plugins) {
config.plugins = []
}
config.plugins.push(
new webpack.ContextReplacementPlugin(
/\/peerjs\//,
(data) => {
delete data.dependencies[0].critical
return data
}
)
)
return config
}
It seems it is an error between the library bundler (parcel) and CRA bundler (webpack), and I couldn't find any official fix on the way.

How to do module name alias for third party package

I have a app that created by react-native init command.
My app import websocket package which in turn require http package and cause error said "Unable to resolve module http".
i.e: myApp -> 3rd-module -> ws -> http
I try to work-around by install "#tradle/react-native-http", and added follow lines to my app's package json file:
"browser": { "http": "#tradle/react-native-http" },
"react-native": { "http": "#tradle/react-native-http" },
but it doesn't work.
I also try using babel-plugin-module-resolver but unluck either. Here is my .babelrc :
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
],
["module-resolver", {
"alias": {
"#tradle/react-native-http": "http"
}
}]
]
}
How to do alias for my case? I research to fixing this problem by using webpack configuration, but don't know where is the configure file. After google, i think project created by react-native init use metro config instead of webpack.
try
["module-resolver", {
"alias": {
"http":"#tradle/react-native-http"
}
}]

Proper Jest configuration with React-native 0.56

After upgrading to react-native 0.56 I'm experiencing tons of babel reated errors on jest specs that used to run just fine.
I realize that react-native 0.56 requires babel7 and that's probably related but I don't have enough experience/understaanding in babel to figure out what I'm missing.
Some error examples:
/xxx/spec/Bootstrap.test.js:6
import thunk from 'redux-thunk';
^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
another:
import { rootReducer } from '../store';
^
SyntaxError: Unexpected token {
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
My package.json jest config is as follows:
"jest": {
"preset": "react-native",
"collectCoverage": true,
"coverageReporters": [
"cobertura",
"lcov"
],
"coverageDirectory": "coverage",
"globals": {
"__TEST__": true
},
"moduleNameMapper": {
"styled-components": "<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js"
},
"moduleDirectories": [
"node_modules",
"/"
],
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
],
"setupFiles": [
"jest-localstorage-mock",
"./node_modules/appcenter/test/AppCenterMock.js",
"./node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
"./node_modules/appcenter-crashes/test/AppCenterCrashesMock.js"
]
},
.babelrc is defined as follows:
{
"presets": ["react-native"],
"env": {
"development": {
"plugins": ["transform-class-properties"]
},
"test": {
"plugins": ["transform-class-properties"]
}
}
}
I also have the following devdependencies:
"#babel/core": "^7.0.0-beta.52",
"babel-core": "^7.0.0-beta.52",
"babel-eslint": "~8.2.5",
"babel-plugin-module-resolver": "^3.1.1",
"babel-plugin-transform-class-properties": "~6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-expo": "~4.0.0",
"babel-preset-react-native": "^5.0.1",
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-preset-stage-0": "^6.24.1",
I've tried several approaches but couldn't progress much.
Besides the jest environment, the application runs fine.
Details of the workaround I did to move on, while 0.57 wasn't ready:
Basically I had to create 2 config files:
jest-acceptance.config (with the following relevant snippets)
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/custom_b7_processor.js"
},
"testRegex": "(/test/.*|(\\.|/)spec)\\.js$",
jest-unit.config (with the following relevant snippets)
"preset": "react-native",
"testRegex": "(/test/.*|(\\.|/)test)\\.js$",
That custom_b7_processor, is some sort of internal code from react-native:
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* #format
* #flow
*/
/* eslint-disable */
'use strict';
const {transformSync: babelTransformSync} = require('#babel/core');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const babelRegisterOnly = require('metro-babel-register');
/* $FlowFixMe(>=0.54.0 site=react_native_oss) This comment suppresses an error
* found when Flow v0.54 was deployed. To see the error delete this comment and
* run Flow. */
const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
const generate = require('#babel/generator').default;
const nodeFiles = RegExp(
[
'/local-cli/',
'/metro(?:-[^/]*)?/', // metro, metro-core, metro-source-map, metro-etc
].join('|'),
);
const nodeOptions = babelRegisterOnly.config([nodeFiles]);
babelRegisterOnly([]);
/* $FlowFixMe(site=react_native_oss) */
const transformer = require('metro/src/reactNativeTransformer');
module.exports = {
process(src /*: string */, file /*: string */) {
if (nodeFiles.test(file)) {
// node specific transforms only
return babelTransformSync(
src,
Object.assign(
{filename: file},
{sourceType: 'script', ...nodeOptions, ast: false},
),
).code;
}
const {ast} = transformer.transform({
filename: file,
localPath: file,
options: {
ast: true, // needed for open source (?) https://github.com/facebook/react-native/commit/f8d6b97140cffe8d18b2558f94570c8d1b410d5c#r28647044
dev: true,
inlineRequires: true,
platform: '',
projectRoot: '',
retainLines: true,
sourceType: 'unambiguous', // b7 required. detects module vs script mode
},
src,
plugins: [
[require('#babel/plugin-transform-block-scoping')],
// the flow strip types plugin must go BEFORE class properties!
// there'll be a test case that fails if you don't.
[require('#babel/plugin-transform-flow-strip-types')],
[
require('#babel/plugin-proposal-class-properties'),
// use `this.foo = bar` instead of `this.defineProperty('foo', ...)`
{loose: true},
],
[require('#babel/plugin-transform-computed-properties')],
[require('#babel/plugin-transform-destructuring')],
[require('#babel/plugin-transform-function-name')],
[require('#babel/plugin-transform-literals')],
[require('#babel/plugin-transform-parameters')],
[require('#babel/plugin-transform-shorthand-properties')],
[require('#babel/plugin-transform-react-jsx')],
[require('#babel/plugin-transform-regenerator')],
[require('#babel/plugin-transform-sticky-regex')],
[require('#babel/plugin-transform-unicode-regex')],
[
require('#babel/plugin-transform-modules-commonjs'),
{strict: false, allowTopLevelThis: true},
],
[require('#babel/plugin-transform-classes')],
[require('#babel/plugin-transform-arrow-functions')],
[require('#babel/plugin-transform-spread')],
[require('#babel/plugin-proposal-object-rest-spread')],
[
require('#babel/plugin-transform-template-literals'),
{loose: true}, // dont 'a'.concat('b'), just use 'a'+'b'
],
[require('#babel/plugin-transform-exponentiation-operator')],
[require('#babel/plugin-transform-object-assign')],
[require('#babel/plugin-transform-for-of'), {loose: true}],
[require('#babel/plugin-transform-react-display-name')],
[require('#babel/plugin-transform-react-jsx-source')],
],
});
return generate(
ast,
{
code: true,
comments: false,
compact: false,
filename: file,
retainLines: true,
sourceFileName: file,
sourceMaps: true,
},
src,
).code;
},
getCacheKey: createCacheKeyFunction([
__filename,
require.resolve('metro/src/reactNativeTransformer'),
require.resolve('#babel/core/package.json'),
]),
};
At my .babelrc I had to include the following:
"presets": ["./node_modules/babel-preset-react-native-b6"],
That is pointing to a fork I made of the babel preset that React-native was using at 0.56-
https://github.com/lhrolim/babel-preset-react-native.
At my package.json I had te following babel dependencies
"babel-preset-react-native": "~5.0.2",
"babel-preset-react-native-b6": "github:lhrolim/babel-preset-react-native",
The test scripts I used then:
"test": "npm run test-acc && npm run test-unit",
"test-acc": "jest --config=jest_acceptance-config.json",
"test-unit": "jest --config=jest_unit-config.json",
I believe there might be some redundancies here and there, but that's what worked for me.

error building aurelia application with i18n

I'm converting our aurelia project to use aurelia-cli.
I added aurelia-18n, i18n and i18next-xhr-backend to aurelia-json but when I ran 'au build', I got error:
{ uid: 8,
name: 'writeBundles',
branch: false,
error:
{ [Error: ENOENT: no such file or directory, open 'd:\aurelia\src\relativeTim
e.js']
errno: -4058,
code: 'ENOENT',
syscall: 'open',
path: 'd:\\aurelia\\src\\relativeTime.js',
moduleTree: [ 'aurelia-i18n' ],
fileName: 'd:/aurelia/node_modules/aurelia-i18n/dist/amd/aurelia-i18n.js' }
,
duration: [ 1, 757878244 ],
time: 1469807422109 }
How do I overcome it? I do not use relativeTime, tried to add it but it required cldr-data which brought 240Mb to node_modules and still had the problem.
I've got advice how to configure i18n with aurelia-cli and it worked:
{
"name": "aurelia-i18n",
"path": "../node_modules/aurelia-i18n/dist/amd",
"main": "index"
},
{
"name": "i18next-xhr-backend",
"path": "../node_modules/i18next-xhr-backend/dist/umd",
"main": "i18nextXHRBackend"
},
{
"name": "i18next",
"path": "../node_modules/i18next/dist/umd",
"main": "i18next"
},