I'm stucking with this trouble for days.
import abc from './abc' doesn't work, the abc.xyz() or any function inside it will not be suggested.
Even the file abc.js will not be suggested
I have to use abc = required('./abc.js') and things work fine.
Both file suggestion and method will be available
I've tried to added jsconfig.json and force it to use "module":"es6" but didn't work either.
Already got react native tools installed.
Couldn't get it work eventually.
Edit:
i found out that module.exports = User doesn't work anymore. I have to write export default User if i want to access to all the method, since when and how to get old school export works?
Change your jsconfig.json to
{
"compilerOptions": {
"target": "es6"
},
"exclude": [
"node_modules"
]
}
and then you might need to restart VScode
the option module is used for typescript, more on this here
Related
I've written several npm library projects, and this is the way I import symbols in one JS file from another JS file, but it won't work in the script section of a svelte file:
My 'package.json' file has a name field (e.g. set to '#jdeighan/something`) and an 'exports' section with entries like "./utils": "./src/lib/utils.js". Then in any other JS file I can import symbols from utils.js with "import {somesymbol} from '#jdeighan/something/utils'. It's how to do imports from a library that you've installed with 'npm install', but it also (cleverly) works inside the project itself. But in a svelte file, this won't work - I get the error message "Failed to resolve import "#jdeighan/something/utils" from "src\routes+page.svelte". Does the file exist?". Here is what I have in my svelte file:
<script>
import {somesymbol} from '#jdeighan/something/utils';
</script>
I know that svelte has a handy $lib alias, but I'd prefer to use the npm standard mechanism, but it seems to be broken when using SvelteKit (not sure about using plain svelte)
I'd prefer to use the npm standard mechanism
This is absolutely not the standard mechanism. I have never seen people import from the current project by package name. While this is supported by Node itself, nothing else seems to support it, including e.g. the VS Code language server which will be unable to provide code navigation.
Using the name makes it less clear that the import is local and not a separate dependency and if the name were to be changed it would have to be adjusted everywhere.
I would recommend just not doing that. SvelteKit has $lib predefined as a default to provide essentially the same functionality in a convention-based way that actually works.
If you create a project with just these 3 files, then execute node foo.js in a console window, you get "Hello, World!":
package.json:
{
"name": "#jdeighan/something",
"type": "module",
"version": "1.0.0",
"exports": {
"./utils": "./utils.js"
}
}
foo.js:
import {message} from '#jdeighan/something/utils'
console.log(message);
utils.js
export let message = 'Hello, World!';
When creating a standard vue app (using vue-cli v3.0) and including #feathersjs/feathers in order to implement a connection with a feathers API, I get an error with Internet Explorer 11 (SCRIPT1010: Expected identifier)
The bottom line is to find an easy way to solve issues like this, because on bigger projects one could easily find lots of library issues and sometimes is necessary to support at least one version of Internet Explorer (at least from the business point of view)
I read on feathers site (https://docs.feathersjs.com/api/client.html#module-loaders) that the library uses ES6 so in this case it must be transpiled in order to work in a browser like IE11.
So I tried this but had no luck at all:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathers/commons',
'#feathers/errors',
'#feathers/feathers',
'debug'
]
}
and got errors even in chrome: Uncaught ReferenceError: exports is not defined
I created a project to show this error: https://github.com/riescorp/vue-internet-explorer
One should be able to use IE11 for this app, even if it doesn't work fast or looks nice, but works.
I believe the process should be the same as following the directions on the Vuetify website in the section of this page titled "IE11 & Safari 9 support" (scroll to the bottom): https://vuetifyjs.com/en/getting-started/quick-start
I've not had to do anything else in my projects, that I can remember.
I finally manage to solve this issue.
This is the babel.config.js config that does the trick:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/transform-modules-commonjs']
}
Also there was a typo in my vue.config.js it should look like this:
// vue.config.js
module.exports = {
baseUrl: '/',
transpileDependencies: [
'#feathersjs',
'debug'
]
}
Finally, when using feathers this line wouldn't work:
.configure(restClient.fetch(window.fetch))
so you can use import 'whatwg-fetch' to solve it (remember to install it npm i whatwg-fetch)
Using #now/node-server, I'm trying to achieve this:
const myLocalLibrary = require('#src/lib/myLocalLibrary');
Instead of
const myLocalLibrary = require('../../../lib/myLocalLibrary');
The problem is that I have tried multiple things that won't work, including:
Setting NODE_PATH=src and using require('src/...
Does not work because setting NODE_PATH as env has no effect
Patching require using module-alias (https://www.npmjs.com/package/module-alias)
Works locally, fails on Zeit because node can't find any files using the module.
I used:
require("module-alias").addAlias("~", __dirname);
Is there any way of achieving this?
You can use this
"build": {
"env": {
"NODE_PATH": "src/"
}
}
The reason your solution fails to build on ZEIT Now might be that it
only works runtime, and Now needs to resolve the paths at build time. You can try using babel-plugin-root-import like described here instead.
Or if you just want to use absolute imports with Next.js and ZEIT Now, see this question.
I'm updating an older Webpack2 project to Webpack4 and switching the tests over to Jest but have a seemingly simple problem with a couple of the webpack related bits.
Specifically, the project structure for the troublesome bits look like this:
src
- constants
- index.js
- config
- base.js
- test.js
- dev.js
- dist.js
During testing, the classes under test use import config from 'config' so issue number one is allowing them to find the right config file. With Webpack2 this is subbed in by webpack itself, but obviously not during Jest tests.
I can resolve this by hard coding the specific test config into the moduleNameMapper in the jest config in package.json like so:
"jest": {
"moduleNameMapper": {
"^config$": "<rootDir>/src/config/test.js"
}
}
This appears to work.
The second part of my issue is allowing Jest to find named exports src/constants/index.js using syntax like import { SOME_CONST } from 'constants'.
When I try to use moduleNameMapper I get back undefined from anything that uses the constants and I believe this is because moduleNameMapper is largely used to mock out dependencies rather than supply them.
With this in mind I think I need to use modulePaths or moduleDirectories to allow the constants to be located.
I've tried the following configurations (not simultaneously) without any luck:
"modulePaths": [
"<rootDir>/src/constants",
"src/constants"
],
"moduleDirectories": [
"node_modules",
"src",
"src/constants",
"/src/constants"
"/src/constants/",
"./src/constants"
],
What should the correct config be for Jest to locate my constants?
If it's any help I'm trying to mimic this Webpack2 config in Jest
resolve: {
alias: {
constants: `${this.srcPathAbsolute}/constants/`
}
}
Currently, React Native dynamically requires a file for the running platform with an specific file extension, *.ios.js or *.android.js. However, when running this code inside a test environment, we get a require error because the module require('./module') cannot be found in the file tree, which looks like:
module.ios.js
module.android.js
How can we handle this issues in a test environment?
Adding platform specific extensions to moduleFileExtensions fixed the problem for me with jest.14.1. Credits to : github link
Here is a snippet from sample package.json which will run all files including scene.jest.js(x).
...
"jest": {
"verbose": true,
"preset": "jest-react-native",
"moduleFileExtensions": ["js", "android.js", "ios.js"],
"testRegex": "\\.scene\\.jest\\.jsx$"
}
...
As of Jest 17.0.0 you can use the defaultPlatform configuration for this - see the very bottom of the Jest React Native tutorial.
As it shows there, you would configure something like this:
"haste": {
"defaultPlatform": "ios",
"platforms": ["android", "ios"],
},
Naturally, this will mean your tests only load the iOS version of your component (or only Android, depending how you choose to configure it).
If you find it important to test both versions, you'll probably need to do something more like the solution mentioned in this issue, possibly manipulating Platform.OS and using require.requireActual directly.
(Might also want to track this issue, in case a less hacky solution is eventually found.)
It's kind of ugly and maybe there is a better solution but it seems that you can create a module.js file that will be used in tests but in platform environment it will still use the module.ios.js or module.android.js.
You need to create a custom compiler to resolve the platform specific dependencies in your tests. If you are using mocha, this will probably help you:
http://lidatang.com/setup-mocha-testing-react-native/