Error when testing my first Aurelia plugin - aurelia

I am having trouble creating my first Aurelia plugin. When testing it out in a new, clean Aurelia CLI project, TypeError: undefined is not an object (evaluating 'target.__useDefault') is displayed in the browser error console.
When calling ensureOriginOnExports(executed, name) in vendor-bundle.js, executed is undefined.
Here's the steps I used:
Downloaded the zip from github.
Unzipped and renamed the folder to aurelia-plugin-test.
Followed the directions on the skeleton github page.
Changed the name in package.json to aurelia-plugin-test.
Re-ran gulp build.
Published to npm: npm publish ./.
Created a brand new Aureali CLI project.
Installed the plugin: npm install aurelia-plugin-test --save.
Added the following in aurelia.json:
{
"name": "aurelia-plugin-test",
"path": "../node_modules/aurelia-plugin-test/dist/amd",
"main": "aurelia-plugin-test"
}
Added aurelia.use.plugin('aurelia-plugin-test'); into the configure function in main.js.
Ran au run and got the error when loading my plugin.
So I'm just using the skeleton without any code changes. So it just contains the hello-world custom element.

In your aurelia.json add the following "resources" to the bundle config:
{
"name": "aurelia-plugin-test",
"path": "../node_modules/aurelia-plugin-test/dist/amd",
"main": "aurelia-plugin-test",
"resources": [
"hello-world.js",
"hello-world.html"
]
}

Related

Snowpack with local npm packages

We have problem to run snowpack with our package structure.
Our structure:
adapters
app
core
presentation
Each package contains typescript and all are used in the app package.
"dependencies": {
"#project/adapters": "file:../../adapters",
"#project/core": "file:../../core",
"#project/presentation": "file:../../presentation",
}
I get the error Dependency Install Error: Package "#project/adapters/src/repositories/GradeFeedRepositoryImpl" not found. Have you installed it?
How do I need to configure snowpack, web pack, babel, ... to run this?
I have had success with packing modules (using: npm pack /path/to/module from the root of the module's folder) and adding the tarball to my package.json from a folder within the repo. e.g.,
"dependencies": {
...
"adapters": "file:packs/adapters-1.0.0.tgz"
...
}
Another option, see if making this edit to your snowpack.config.js file helps:
packageOptions: {
external: [
"#projects/adapters"
]
}

Vue Jest Aliases Configuration

I have an error when I want to run Jest because of moduleNameMapper settings.
I tried several methods, but nothing changes.
To reproduce:
clone the repo: https://github.com/zoztorun/reproduce-webpack-alias-error
npm install
npm run test
Since you're using Vue CLI, you should use #vue/cli-plugin-unit-jest, which can be added to your Vue CLI project with this command:
vue add unit-jest
This will also add a <rootDir>/test directory with a sample test, but that doesn't fit your project's test file pattern, which places *.spec.js adjacent to the source files.
To adapt the result to your project:
Delete <rootDir>/test (as it would be unused, and because it points to a nonexistent HelloWorld.vue)
Edit the jest config in package.json to be:
{
"jest": {
"preset": "#vue/cli-plugin-unit-jest",
"testMatch": [
"**/src/**/*.spec.[jt]s?(x)"
]
}
}
Delete your test NPM script, since #vue/cli-plugin-unit-jest automatically adds its own test:unit script, which must be used instead (i.e., use npm run test:unit).

Bundle errors when setting up react-native in monorepo

I'm having some issues setting up a new react-native project inside a yarn monorepo with workspaces. My root package.json looks like:
{
"name": "mono-repo",
"workspaces": {
"packages": [
"web-app",
"utils",
"mobile-app"
],
"nohoist": [
"**/jest",
"**/jest/**",
"**/mocha",
"**/mocha/**",
"**/react-native",
"**/react-native/**"
]
},
When i run yarn run-ios the build succeeds but I get bundler errors:
bundling failed: Error: Unable to resolve module `bugsnag-react-native` from `index.js`: bugsnag-react-native could not be found within the project or in these directories:
../node_modules
the bugsnag-react-native folder does exist in the root node_modules
Does anyone have any idea what might be happening here / how to fix it?
I'm using yarn version 1.19.0

Expo : cannot find a module LogReporter

I have created a React Native Project and I was trying to open that project in Expo XDE. It throws the following error:
Cannot find module ...\node_modules\expo\tools\LogReporter
Firstly I created a React Native project by cloning a KitchenSink Project.
Link:
NativeBase-KitchenSink
When I started the project by issuing series of commands inside the project root directory:
npm install and then expo start
I saw that the app.json was also not proper, which was the following:
{
"name": "NativebaseKitchenSink",
"displayName": "NativebaseKitchenSink"
}
After issuing expo start react-native reported that the app.json is not to be found in the current directory.
[17:05:08] Starting project at
D:\Projects\ReactNativeProjects\AwesomeProject [17:05:10] Error:
Missing app.json. See https://docs.expo.io/ [17:05:10] Couldn't start
project. Please fix the errors and restart the project. [17:05:10]
Error: Couldn't start project. Please fix the errors and restart the
project.
at C:\xdl#51.4.0\src\Project.js:1565:11
at Generator.next ()
at step (C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:191)
at C:\Users\hp\AppData\Roaming\npm\node_modules\expo-cli\node_modules\xdl\build\Project.js:2033:361
at process._tickCallback (internal/process/next_tick.js:68:7)
I changed app.json to:
{
"expo": {
"name": "AwesomeProject",
"description": "A Kitchen Sink project.",
"slug": "AwesomeProject",
"privacy": "public",
"sdkVersion": "30.0.0",
"platforms": [
"ios",
"android"
],
"ios": {
"supportsTablet": true
},
"android": {
"package": "com.abhsax.first"
},
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/logo.png",
"splash": {
"image": "./assets/splashscreen.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
]
}
}
There were some updates in the project when I issued npm install again. Then I issued:
expo start
This error came:
(node:2044) UnhandledPromiseRejectionWarning: Error: Cannot find
module
'D:\Projects\ReactNativeProjects\AwesomeProject\node_modules\expo\tools\LogReporter'
Why am I getting this error, and how can I fix it?
check your package.json if it contains all needed dependencies and run npm install in the home directory of the project
if a package is missing you can add it with
npm install <package_name> --save
if you are using yarn run:
yarn add expo
I did:
yarn add expo
and it worked for me =)
See docs:
introducing-button-yarn-and-a-public-roadmap
and
npm-vs-yarn-in-react-native
These documents say that since the project configured using Yarn, you have to follow Yarn way. [Note: There is a file yarn.lock inside the root directory of the project, you have posted]
Therefore such projects are dealt by following the instructions in the documentation.
Please see How do I create a React Native project using Yarn? to actually create a react-native project using Yarn.
And please be sure to remove node_modules folder and issue command npm install before adding react native CLI using yarn. You have to remove package-lock.json from your project root. This will be to prevent mixing different package managers : npm and yarn.
Instead, it will be a good idea not to use npm, and in order to generate node_modules, just issue command:
yarn
Last link recommends to install every package you need using yarn, and not to use any other package manager:
yarn global add react-native-cli
to add react-native:
yarn add react-native
to add missing packages:
yarn add react-base --save
and to install expo using yarn:
yarn add expo
install expo-cli
yarn add expo-cli
It is possible that you can do without Expo. Just focus on react-native and yarn.
Generate android and ios folders:
react-native eject
Start yarn:
yarn start
run build of your choice, and make sure the SDKs are installed.
react-native run-android
Please also see: Uncaught TypeError: Cannot read property 'forEach' of undefined, on a KitchenSink demo
Happy Coding :-)
Install the Expo modules
npm install --save
i.e.
npm install expo --save
rollback with npm install -g expo-cli#2.4.3

unable to load 3rd party library to aurelia cli

I'm trying to install jwt-decode to my aurelia cli application. I've npm installed the library and added it to my aurelia.json file:
"dependencies": [
... other deps
{
"name": "jwt-decode",
"path": "../node_modules/jwt-decode/lib",
"main": "index"
}
... other deps
]
When I run au build or au run everything compiles and I can see the the cli is tracing the jwt-decode package; however, when I try to include it in a file I get an error:
src/stores/auth/service.ts(4,24): error TS2307: Cannot find module 'jwt-decode'.
[22:13:04] gulp-notify: [Error running Gulp] Error: src/stores/auth/service.ts(4,24): error TS2307: Cannot find module 'jwt-decode'.
[22:13:04] TypeScript: 1 semantic error
[22:13:04] TypeScript: emit succeeded (with errors)
I've even tried adding it to the prepend property but it did not work. I'm also using typescript so I don't know if that could be causing an issue.
Your dependencies section in aurelia.json is correct.
This error is related to TypeScript: typing definition (.d.ts file) is missing for 'jwt-decode' package.
You can install it by typings install dt~jwt-decode --global --save
After that, import it as a global module: import * as jwt from 'jwt-decode';