In the Jest tests for my React app in WebStorm, the following line
const { createMemoryHistory } = require("history");
has the following warning:
Module is not listed in package.json dependencies
The tests run as expected, they pass and fail as expected. createMemoryHistory works. And when I hover on history WebStorm actually shows me the documentation for the library.
(strike this:) But history is a native JS library, like fs, is it not? How do I fix this pesky warning?
UPDATE: Okay, I understand that fs is not a native JS library, it's a core node.js module. I was wrong and thanks for setting me straight on that.
I see that my package-lock.json does include an entry for "node_modules/history". It looks like it's two indents deep, but the lockfile is too complex for me to really tell, or get breadcrumbs, or fold the branch to see where this line falls in the tree.
So I guess the real question is, Webstorm is saying that I don't have the dependency, but the lockfile implies that I do. Unless I'm misunderstanding further.
Again, how do I fix this pesky warning? (or what other fact am I missing? Remember, everything does actually work).
fs is a core Node.js module, i.e. its code is compiled into Node.js binary and doesn't have to be installed. history library is a usual NPM module that is not a part of Node.js core and has to be added with npm i history(see https://github.com/remix-run/history/blob/main/docs/installation.md). The IDE just tells you that you are importing a module that is not listed among dependencies in your package.json
Related
I have created a minimal reproducable example with a detailed README here.
In my expo app, I was having trouble using the babel module-resolver to use path aliases. My Metro bundling would fail when I used path aliases.
I learned that when I changed my babel.config file extension from .cjs to .js, the problem was resolved.
However, I do not understand why that would have any effect on whether the module-resolver plugin would work.
As described on babel's documentation, "Babel can be configured using any file extension natively supported by Node.js", with cjs specifically enumerated. And as I understand it, Expo by default creates a CommonJS babel.config file as it uses module.exports.
I have never created a GitHub issue, but perhaps this question is better suited as a babel-plugin-module-resolver issue, or I need to narrow down this issue further to determine whether Expo, or other babel plugins are relevant.
In short:
I tried creating a new expo app with npx create-expo-app to see if something about my project was effecting this issue. I then added a path alias to a test component and imported the component with the path alias. I ran expo which resulted in a bundle success. I then renamed babel.config.cjs and ran expo again with --clear, which resulted in a bundle failure "Unable to resolve [path alias]..."
I expected the cjs file extension to have no effect on whether the module-resolver caused an error.
What resulted was the module-resolver being fixed once I renamed babel.config.cjs to babel.config.js
I'm struggling to implement AppsFlyer on Android using Java.
I have looked into a couple of posts already such as this, this.
Here is the entire error message: [org.gradle.api.Project] AGPBI: {"kind":"error","text":"Program type already present: com.appsflyer.AFExecutor","sources":[{}],"tool":"D8"}
The version
AppsFlyer SDK: 5.+
Android Studio: 3.5.2
Situation
I have done till 4.1 of this guide so far so good.
On AndroidManifest.xml, the main class name of AF has implemented with android.name attribute.
On AndroidManifest.xml, receiver tag commented out (because in this phase I don't believe I do not need a precise data tracking feature.)
What I have tried.
./gradlew app:dependencies | less To find out AFExecutor in other dependencies
To exclude the program
implementation ('com.appsflyer:af-android-sdk:5.+'){
exclude module: 'com.appsflyer'
}
implementation ('com.appsflyer:af-android-sdk:5.+'){
exclude module: 'AFExecutor'
}
If you have any insights, I'd love to hear that.
Try ./gradlew clean, clean project and invalidate caches and restart. If does not help than delete all build and .idea folders, .iml files.
After exploring a bunch of dependencies, I found the solution. The reason was there was a conflict between com.appsflyer:af-android-sdk:5.+ and AF-Android-SDK.jar which had installed manually. After removing the JAR file and built again, I could make it at last! Thank you so much for sharing your experiences, however, the solution was simple!
I'm using WebStorm 2017.1.3, although also tried with latest EAP, and i can't get import from statement to work. I just keep getting the following error:
import Utils from './utils'
^^^^^^
SyntaxError: Unexpected token import
In my packages.json i have babel-cli, babel-preset-env and babel-preset-es2015 defined. I have followed various blog posts and videos but still get same error.
ES6 is enabled in settings and i tried adding Babel file watch as per documentation but nothing seems to work. This feels like it should be a lot easier and just work, so i must be missing a important part of the jigsaw.
Does anyone have a working step by step, from fresh project, how to guide in configuring webstorm to work with import ?
Some places say use file watch, others say just to change project configuration interpreter to use babel-node. Other say must use Gulp... very confusing.
Thank you.
fLo
To make things clear: this is not about configuring WebStorm, error comes from Node.js interpreter that runs your code. Node.js still doesn't support ES6 modules natively (actually, no JavaScript runtime currently supports them - ECMAScript does not define a "Loader" specification which determines how Modules are inserted into the runtime. The Loader spec is being defined by WHATWG, but is not yet finalized). So, to get ES6 imports/exports accepted, you need using transpilers. Current industry standard is Babel
The most simple way to make it work is the following:
install babel in your project using npm install --save-dev babel-cli babel-preset-env
create a .babelrc file in project root dir:
{ "presets": ["env"] }
in your Node.js Run configuration, pass -r babel-register to Node:
With this configuration, your code will be transpiled on-the-fly by Babel, no file watchers, etc. are needed
I'm writing an Ember.js application using Ember Cli, and I want to include a non-bower dependency - basically a dependency from my vendor folder.
The instructions on doing so is telling me to add the following line into my ember-cli-build.js file:
app.import('vendor/dependency-to-include.js');
That would work fine with a normal ES5 flavored dependency, but what if I want to add a dependency written in ES6?
Right now it just delivers it to the browser untouched, which produces an error like:
Uncaught SyntaxError: Unexpected reserved word
because my ES6 flavored dependency uses the following syntax:
import Util from './util
I'm guessing that I need to tell ember-cli-build to transpile this particular dependency before passing it on to the browser, but how do I go about doing that?
Thanks
For transpiling imported dependencies you need to run the imported file(s) through the broccoli addon broccoli-babel-transpiler. For a basic example, checkout this file: https://github.com/thefrontside/ember-impagination/blob/2fa38d26ef1b27a3db7df109faa872db243e5e4c/index.js. You can adapt this addon to an in-repo addon for your project.
See this link for the background discussion and #rwjblue and #cowboyd on the actual fix: https://github.com/ember-cli/ember-cli/issues/2949
Are you currently including Babel within your project? I would have thought that it checks your vendor directory the same as it does everything else and converts the ES6 code to ES5.
The other option would be to just convert the file to ES5 manually whenever you need to include a vendor file with ES6 syntax. Not necessarily ideal, but if it's a static file then it's something you'll need to do once and then forget about.
Let's say I want to use Immutable in my project (or any given npm package). I have npm installed it, so it is in node_modules. Of course, it has CommonJS exports there. I, however, want to use es6 modules in my project.
I am using Webpack to compile it all together, with the 6to5-loader to deal with es6 module syntax.
In my source file, I say import Immutable from 'immutable'; --- but this causes a problem because the es6 import is looking for an es6 default to have been exported, which isn't the case (for Immutable or probably almost any other npm package). The compiled code ends up looking like this: var Immutable = require('immutable')["default"]; --- which of course throws an error, since there is no default property to find.
Can I consume the npm packages with es6 modules?
Babel.js contributor here. You're looking for the following:
import * as Immutable from 'immutable';
// compiles to:
var Immutable = require('immutable');
Interactive demo
Note: This is with either the common or commonInterop modules option. For others, see: https://babeljs.io/docs/usage/modules/
Just figured it out. (The solution is tool-specific --- but es6 modules only exist now insofar as they are tool-enabled, so I think that's enough of an "answer".)
6to5's default module transpilation uses the common option, which results in the very problem I griped about above. But there is another option: commonInterop --- which must have been built to deal with exactly the situation I'm dealing with. See https://6to5.github.io/modules.html#common-interop
So three cheers for 6to5.