unable to load 3rd party library to aurelia cli - aurelia

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';

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"
]
}

Failed to load plugin 'import' declared in '... » eslint-config-standard': Cannot find module 'eslint-plugin-import'

I've been trying to use ESLint along with Standard and I haven't been able to get it to work. I've tried setting it up through eslint --init, uninstalling eslint globally and having all the packages locally, installing each package manually npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node, reinstalling ESLint extension and nothing so far. I'm perfectly able to run ./node_modules/.bin/eslint --fix ... in order to fix/check errors but it doesn't work with the VSCode extension by any meanings. I don't have prettier so it isn't related to it either.
Output:
[Info - 12:33:20 AM] ESLint server is running.
[Info - 12:33:23 AM] ESLint library loaded from: c:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\node_modules\eslint\lib\api.js
[Error - 12:33:25 AM]
Failed to load plugin 'import' declared in 'graphql-prisma\.eslintrc » eslint-config-standard': Cannot find module 'eslint-plugin-import'
Require stack:
- C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\__placeholder__.js
Happened while validating C:\Users\h08FXplsV8\Documents\dev\node\graphql-bootcamp\graphql-prisma\src\resolvers\index.js
This can happen for a couple of reasons:
- The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
- If ESLint is installed globally, then make sure 'eslint-plugin-import' is installed globally as well.
- If ESLint is installed locally, then 'eslint-plugin-import' isn't installed correctly.
.eslintrc:
{
"env": {
"es6": true,
"node": true
},
"extends": [
"standard"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"rules": {
}
}
I've seen other questions in SO related to this issue but none of the solutions worked, unfortunately.
I had the same issue for many weeks and finally found this thread and comment on Github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372
My issue turned out to be related to subdirectories. As soon as I made the project the only open project with an .eslintrc.js file, all of my linting issues went away.
Hopefully this works for you.
To fix the dependency tree, try following these steps in the exact order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
Also, be sure, that you have latest version of "eslint-plugin-import" plugin, as in my case, for example i had this error with "2.20.1" version, but latest "2.25.3" solved this issue
I had the same error caused by the eslint-plugin-import dependency and in my case, I got rid of the error by increasing to the latest version of the package.
For those having the following error with flutter firebase cloud functions after running firebase init functions and trying to run firebase deploy --only functions:
ESLint: 8.9.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js': Cannot find module 'es-abstract/2021/RequireObjectCoercible'
Require stack:
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\ExportMap.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\rules\named.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\eslint-plugin-import\lib\index.js
- C:\Users\xx\Documents\xx\xx\functions\node_modules\#eslint\eslintrc\dist\eslintrc.cjs
This was solved by:
delete node_modules in functions folder
delete package-lock.json in functions folder
cd .\functions\ in the terminal to get into functions folder, run npm i, cd ../
firebase deploy --only functions
I am having this issue too which was why I checked this post but did not see any answer that work for me. After searching online, I stumbled into this code which solves my problem.
npm i -D eslint #typescript-eslint/eslint-plugin
In my case, i was not using jest at all.
So i had to downgrade de eslint dev dependency:
"eslint": "^7.32.0",
as it say here: https://github.com/eslint/eslint/issues/15149#issuecomment-939501275

Configure a Create-React-Native-App project to use MobX and use Babel to enable decorators

I've created a project with CRNA and after some considerations I've decided to go with MobX for state management. MobX works best with the decorator syntax (most MobX documentation is written using the decorator syntax) so I wanted to install the Babel plugin enabling the use of decorators.
I've successfully installed MobX (yarn add mobx mobx-react), but after installing the Babel plugin to enable decorators (npm install --save-dev babel-plugin-transform-decorators and adding "transform-decorators" to the plugins section in .babelrc, yarn start stopped working throwing an error about react-native-scripts not being found.
I've then run yarn installand this time it threw an error saying
Error starting packager: TypeError: Invalid Version: undefined
at new SemVer (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:279:11)
at Function.major (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\semver\semver.js:551:10)
at D:\xdl\src\project\Doctor.js:634:18
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4944:15
at baseForOwn (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:3001:24)
at D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:4913:18
at Function.forEach (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\lodash\lodash.js:9359:14)
at D:\xdl\src\project\Doctor.js:624:9
at Generator.throw (<anonymous>)
at step (D:\Projects\ReactNativePlayground\omar\MRKT\node_modules\xdl\build\project\Doctor.js:615:191)
error Command failed with exit code 1.
Does anyone have experience with CRNA and MobX? Any help is much appreciated!
I've solved it. Turns out that running npm install --save-dev babel-plugin-transform-decorators broke something. What I should have been running is yarn add --dev babel-plugin-transform-decorators-legacy and add "transform-decorators-legacy" to .babelrc plugins section. After doing those steps I ran yarn install and it fixed my project.
Additionally, my editor (VSCode) threw warnings about extensions being experimental so I added a jsconfig.json file to the root folder and added the following inside:
{
"compilerOptions": {
"experimentalDecorators": true
},
"exclude": [".expo/*", "node_modules/*"]
}

Unexpected import token - testing React Native with Jest

I'm getting a weird import error when I try to test my react-native app with jest. I have babel-jest, babel-preset-react-native, jest, jest-react-native and react-test-render all installed but get this error message when I run npm test.
● Test suite failed to run
/Users/maftalion/www/stars20/kiosk/node_modules/native-base/index.js:4
import Drawer from './Components/vendor/react-native-drawer';
^^^^^^
**SyntaxError: Unexpected token import**
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:316:10)
at Object.<anonymous> (src/routes/Identification.js:3:17)
at Object.<anonymous> (src/routes/router.js:4:21)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 1 passed, 1 total
Snapshots: 1 passed, 1 total
Time: 1.011s
Figured it out, basically throw any node modules that use es6 syntax in transformIgnorePatterns.
"transformIgnorePatterns": [
"node_modules/(?!react-native|native-base|react-clone-referenced-element)"
],
Try adding transformIgnorePatterns to your package.json:
{
"name": "MyAwesomeApp",
...
"jest": {
"transformIgnorePatterns": ["/node_modules/"]
}
}
For me Jest works out of the box, however:
$ react-native init MyAwesomeApp
$ cd MyAwesomeApp
$ npm test
...
Tests: 2 passed
I'm using React Native v0.37.0.
I found the answers given earlier didn't solve Unexpected token import errors in the tests itself, if they are written in ES6 (like the boilerplate tests created by the Ignite CLI after ignite new MyProject).
I finally managed to remove ES6-related errors by adding to the test task in package.json:
"test": "NODE_ENV=test jest --no-cache"
I am using RN 0.45.1, Node 7.10.1 (and 8.1.2), Yarn 0.24.6 and Jest 20.0.4
PS: Don't always see this in the console, but in VS Code v1.13.1 setting --no-cache makes the difference.
You configured Babel in your webpack config and this will only apply to webpack. When other tools, like Jest, use Babel, they won't see that configuration because they don't look at the webpack config. You can use a .babelrc file to configure Babel and that will apply to anything that runs Babel (not just webpack).
Using a .babelrc is usually preferred as you want to have a general babel config, and if you need to override a setting, you can still do that in the specific application like in the webpack config.
Create the following .babelrc:
{
"presets": ["es2015", "react"]
}
With that, you can remove the presets option in your webpack config because it will use the .babelrc. Note that the [cacheDirectory option][3] is specific to babel-loader and is not used to configure the underlying Babel.
You also have a typo in your test, toMatchSnapShot() should be toMatchSnapshot().
expect(rendered.toJSON()).toMatchSnapshot();
I needed to add .babelrc with:
{
"presets": ["#babel/env","#babel/react"]
}
I also needed to install this module
npm install add --dev react-test-renderer

My npm module build causing webpack error: Module not found: Error: Cannot resolve 'file' or 'directory'

I am trying to publish a fork of an open source React component to npm and use load it in my webpack after a successful npm install of my published module.
The webpack is throwing a Module not found: Error: Cannot resolve 'file' or 'directory' ./Slider.jsx in /home1... error when loading.
The lib/index.js file that my rc-tools build created is:
1'use strict';
2
3 module.exports = require('./Slider.jsx');
while, the main fork of the repo has
1'use strict';
2
3 module.exports = require('./Slider');
as their created lib/index.js.
I am using the same build (rc-tools) tool as them and have nearly identical package.json. Why is my repo creating a different index.js and is this the cause of my webpack.config not loading?
Here is the link to the npm component: https://www.npmjs.com/package/meraki-slider
In my journey of learning about node and publishing, I simply forgot to remove the .jsx endings from my /src folder, which was causing my build to include them in my /lib folder and causing webpack to not compile. :P