Im using JEST to test my app. But Im getting an error from the test file --
import xyz from './XYZ.js';
^^^^^^
SyntaxError: Unexpected token import
Then I created a .babelrc file and it has the following code --
{
"presets": [
"es2015"
]
}
After this, whichever file I have imported in the test file does not throw this error. But if one of the imported files (like XYZ.js) have import statement in itself, then it gives the same error on that file.
My package.json devDependencies (significant packages) --
"devDependencies": {
"babel-jest": "^19.0.0",
"babel-preset-es2015": "^6.22.0",
"eslint": "2.0.0",
"eslint-plugin-react": "latest",
"express": "^4.12.2",
"jest": "^19.0.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-router": "^2.8.1"
},
Can anyone point out what I have missed?
Try using
import { xyz } from './XYZ.js';
Also make sure you exported the module
export function xyz() {}
And check out Babel stage-0
Related
I don't know why am I getting the following error which say:
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
When i try to import the package inquirer in my nodejs application.
console.log("Hello world!");
import inquirer from "inquirer";
....
To run the application I'm using ts-node and I'm running it as follows:
ts-node index.ts
This is my package.json file:
{
....
"dependencies": {
"chalk": "^4.1.2",
"cors": "^2.8.5",
"cross-fetch": "2.6.1",
"dotenv": "^16.0.1",
"inquirer": "^8.2.4",
"ts-node": "^10.8.1",
"typescript": "^4.7.3"
},
"devDependencies": {
"#types/chalk": "^2.2.0",
"#types/cors": "^2.8.12",
"#types/inquirer": "^8.2.1",
"#types/node": "^17.0.42",
"nodemon": "^2.0.16",
"ts-node-dev": "^2.0.0"
}
....
}
I've tried to change the versions of inquirer and typescript but still it did not work.
What can be possibly the problem.
I have met with the same error but in my case I had no ts-node dependency installed, I fixed the error by adding that dependency.
You can also try to run your application with npx, in your case that will be npx ts-node index.ts.
package.json firstly I did this,
{
"name": "crypto-local-storage",
"version": "0.0.1",
"peerDependencies": {
"#angular/common": "^12.2.0",
"#angular/core": "^12.2.0",
"crypto-js": "^3.1.8",
"secure-web-storage": "^1.0.2"
},
"dependencies": {
"tslib": "^2.3.0"
},
"devDependencies": {
"#types/crypto-js": "^4.0.2"
}
}
Secondly, I did this
{
"name": "crypto-local-storage",
"version": "0.0.1",
"peerDependencies": {
"#angular/common": "^12.2.0",
"#angular/core": "^12.2.0"
},
"dependencies": {
"tslib": "^2.3.0",
"crypto-js": "^3.1.8",
"secure-web-storage": "^1.0.2"
},
"devDependencies": {
"#types/crypto-js": "^4.0.2"
}
}
But in my service file when I import secure-web-storage Like this
import * as SecureStorage from 'secure-web-storage';
I got this kinda message,
TS7016: Could not find a declaration file for module 'secure-web-storage'.
'D:/AMS/crypto-local-storage/projects/crypto-local-storage/node_modules/secure-web-storage/secure-storage.js'
implicitly has an 'any' type.
Try `npm i --save-dev #types/secure-web-storage` if it exists or add a new declaration (.d.ts) file containing
`declare module 'secure-web-storage';`
secure-web-storage does not contain any #types/secure-web-storage file. So How could I get rid from this error ? I did not get any clear answer after googling so much.
My folder structure might be help you,
My Folder Structure Image
If running npm install -D #types/secure-web-storage didn't solve the problem use require instead of import.
const secureWebStorage= require('secure-web-storage');
You can also try to create a typings.d.ts file inside the src folder and manually add typings for it.
declare module 'secure-web-storage' {
export function someFunction(): void;
}
And then in your ts file, you can use something like -
import { someFunction } from 'secure-web-storage';
By using this method you can save a lot on bundle size instead of using -
const secureWebStorage= require('secure-web-storage');
which takes a lot of bundle size and makes the application slower. You can read more about this here - https://web.dev/commonjs-larger-bundles/
I am having an issue with cookies not being defined in angular scope.
npm run start builds and starts the app just fine,
but when trying to run npm test that executes jest command, I am getting this error:
`Test suite failed to run app/components/Component1/Component1.ts:1:10
error TS2305: Module '"../../../../../node_modules/#types/angular"' has no exported member 'cookies'.`
in Component1.ts there is this import: import { cookies } from 'angular';
Build and run - ok.
Testing - not ok.
If you know where the issue can be hidden, please help :) Thank you.
my package.json:
{
"dependencies": {
...,
"angular": "^1.8.0",
"angular-cookies": "1.8.0",
"babel-polyfill": "^6.2.0",
...
},
"devDependencies": {
"#types/angular": "^1.8.0",
"#types/angular-cookies": "^1.8.0",
"#types/jest": "^26.0.19",
"angular-mock": "^1.0.0",
"angular-mocks": "^1.8.2",
"angularjs-jest": "^0.1.4",
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"jest": "^26.6.3",
"ts-jest": "^26.4.4",
...
}
}
solution for my issue was adding angular-cookies to tsconfig.test.json file.
I still do not understand why angular-cookies since source code and production build is taking types and definitions from angular package (and through IDE I can link to angular module rather than angular-cookies).
But that's life is all about - mysteries.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"types": [
"node",
"jest",
"angular-cookies" --> THIS VERY LINE SOLVED MY ISSUE
]
},
"include": [
"index.d.ts",
"**/*.test.ts"
]
}
I'm new to React Native and am trying to organize my React Native classes into modules to get rid of the "import from '../../../" mess. Here's my very simple folder structure:
Following the tutorial at here, I've structured my package.json as this for each folder:
{
"name": "#foldername"
}
Now, I'm trying to import Page (which is just a component superclass at this time, exported as default in the file):
import Page from '#app/components/core';
But it cannot be resolved. I've also tried:
import Page from '#app/#components/#core';
import { Page } from '#app/#components/#core';
import { Page } from '#app/components/core';
import { Page } from 'app/components/core';
None of them seem to be working. I've also tried them all without the # sign (removing it from both the package files and import statement), but no avail.
How can I organize my components to work that way (and it would be great if I knew what that # sign in front does, as I've also seen some tutorials without it)?
Here is my package.json in my root folder if it helps (haven't touched it, it's the way created by react-native init):
{
"name": "redacted",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.3"
},
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"babel-jest": "^24.5.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "16.8.3"
},
"jest": {
"preset": "react-native"
}
}
add babel-plugin-module-resolver to devDependencies.
If you have .babelrc just delete it and add babel.config.js. And add aliases there. It should look like this
function babelConfig(api) {
if (api) {
api.cache(false);
}
const presets = ['module:metro-react-native-babel-preset'];
const plugins = [
[
'module-resolver',
{
alias: {
appColors: './src/Colors',
appConstants: './src/Constants',
components: './src/Components',
screens: './src/Screens',
utils: './src/utils'
},
cwd: 'babelrc'
}
]
];
return {
presets,
plugins
};
}
module.exports = babelConfig;
Then you can use import like this
import { YourComonent } from 'components';
make sure you have exported as default.
Also, don't try to set the alias names with capital letters
This works with the latest react-native (0.59.3).
Here is my devDependencies
devDependencies": {
"#babel/core": "7.4.0",
"#babel/runtime": "7.4.2",
"#react-native-community/eslint-config": "0.0.3",
"babel-eslint": "8.2.2",
"babel-jest": "24.5.0",
"babel-plugin-module-resolver": "^3.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.10.0",
"enzyme-to-json": "^3.3.5",
"eslint": "5.15.3",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.12.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.9.1",
"eslint-plugin-react-native": "3.2.1",
"jest": "24.5.0",
"metro-react-native-babel-preset": "0.53.1",
"react-test-renderer": "16.8.3"
},
If you're using VSCode, Intellisense of the IDE does not recognise just the package.json; include a tsconfig/jsconfig JSON file (TypeScript [ftw]/ JavaScript)
In compilerOptions add :
"paths" : {
"#alias1*" : ["./alias1/*"],
.....
}
For all your aliases. Then the editor should pick up your files.
https://code.visualstudio.com/docs/languages/jsconfig
If you choose not to use VSCode, use Babel:
If your project doesn’t use Webpack - for example if you’re working with React Native, you can use your .babelrc file and a babel plugin to get aliasing set up.
Firstly, you’ll want to install babel-plugin-module-resolver with yarn or npm.
Once you’ve done that, open up your project’s .babelrc file, and under the plugins key, add this:
[
'module-resolver',
{
root: ['./src'],
alias: {
myAlias: './src',
},
},
];
Or use the package.json in root
It was my bad.
Instead of using it like:
import MyComponent from 'package/path/MyComponent'
I was using:
import MyComponent from 'package/path' (without my class file at the end).
I've imported it correctly (also removed the app package and the # prefixes and directly referenced components as a package in its package.json file) (including the component name):
import Page from 'components/core/Page';
It worked perfectly.
In tsconfig.json, add the following :
"compilerOptions": {
"baseUrl": "app"
...
}
I started building a React app (ejected create-react-app) with webpack and babel. However I'm unable to import an external .js file with utility functions.
Whenever I try to call actions.helloOne() I get the following error: TypeError: actions.helloOne is not a function.
I'm still quite new to JS so I might be missing something obvious.
helloActions.js
export function helloOne() {
console.log('one')
}
export function helloTwo() {
console.log('two')
}
actions.js
import { helloOne, helloTwo } from './helloActions'
export {
helloOne,
helloTwo
}
service.js
import * as actions from './actions'
actions.helloOne(); <- undefined
package.json
"babel-core": "6.22.1",
"babel-eslint": "7.1.1",
"babel-jest": "18.0.0",
"babel-loader": "6.2.10",
"babel-preset-react-app": "^2.2.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-stage-2": "6.5.0",
"babel-plugin-transform-decorators-legacy":"1.3.4",
"babel-plugin-transform-class-properties": "6.11.5",
...
"babel": {
"presets": [
"react-app",
"es2015",
"stage-2"
],
"plugins": ["transform-decorators-legacy","transform-class-properties"]
}
I managed to solve my problem, the code was correct as Andrew Li mentioned.
I had a slight mistake in the path to one of the files in the import line (basically missed .js at the end which was causing babel to do weird things without throwing an error).