I want to be able to use mobx's #observer in my typescript code in a codesandbox. However I am getting this error:
/src/content.tsx: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (6:1):
4 | import { observer } from "mobx-react";
5 |
> 6 | #observer
| ^
7 | export class Particle extends React.Component {
I have already:
1) Added dependencies
2) Add a .babelrc file with these content
but I cannot get rid of the error. How can I fix it?
Add this to tsconfig.json:
"compilerOptions": {
"experimentalDecorators": true
Go to File > Preference > Settings > Search "experimental"
Then check Javascript › Implicit Project Config: Experimental Decorators
Related
When I run use crate::feed; in src/cmdline.rs I expect that to import src/feed.rs, but it doesn't. Instead I get,
error[E0432]: unresolved import `crate::feed`
--> src/cmdline.rs:2:5
|
2 | use crate::feed;
| ^^^^^^^^^^^ no `feed` in the root
Despite the fact that src/feed.rs exists. However, if I panic and change it to mod feed; then I get
error[E0583]: file not found for module `feed`
--> src/cmdline.rs:2:1
|
2 | mod feed;
| ^^^^^^^^^
|
= help: to create the module `feed`, create file "src/cmdline/feed.rs"
Using mod super::
error: expected identifier, found keyword `super`
--> src/cmdline.rs:2:5
|
2 | mod super::feed;
| ^^^^^ expected identifier, found keyword
Or with use super::
error[E0432]: unresolved import `super::feed`
--> src/cmdline.rs:2:5
|
2 | use super::feed;
| ^^^^^^^^^^^ no `feed` in the root
File structure for files in question looks like this,
src/feed.rs
src/cmdline.rs
src/main.rs
I figured it out. The rust module system doesn't permit importing sibling files,
src/a.rs
src/b.rs
Full stop: a.rs can not import b.rs. What it will do is try to source it from
src/a/b.rs
If you're on this answer, none of this probably makes sense to you and you've wasted hours on this. This was a source of my confusion:
src/main.rs
Is actually special. Inside src/main.rs a mod will import a sibling file, (and also with the now deprecated mod.rs; or, with lib.rs). But the point is that your own rust files can't make use of rust code in sibling files.
I was able to make my imports work the way you describe by doing the following.
First in main.rs I import the module cmdline and each module I want to be able to use via crate::.
// file src/main.rs
mod cmdline;
mod feed; // <== import module to be able to use via `crate::feed`
fn main() {
cmdline::do_something();
}
Then in cmdline.rs I use create::feed.
// file src/cmdline.rs
use crate::feed; // <== import sibling module
pub fn do_something() {
feed::do_something_else();
}
And my feed.rs looks something like this.
// file src/feed.rs
pub fn d_something_else() {
// ...
}
From what I understand from experimenting is that you need to first use mod in your main.rs to define which modules are included in your crate.
I want to create an automated script for setting up VS Code.
Part of this is the installation of the extensions and configuring them as necessary.
So I was able to install the extensions via CLI, but can't find how to change the extension settings by only using the command line.
For example - I want to change Jest Runner settings. I found this on their readme:
Jest Runner will work out of the box, with a valid Jest config.
If you have a custom setup use the following options to configure Jest Runner:
| Command | Description |
| --- | --- |
| jestrunner.configPath | Jest config path (relative to ${workFolder} e.g. jest-config.json) |
| jestrunner.jestPath | Absolute path to jest bin file (e.g. /usr/lib/node_modules/jest/bin/jest.js) |
| jestrunner.debugOptions | Add or overwrite vscode debug configurations (only in debug mode) (e.g. `"jestrunner.debugOptions": { "args": ["--no-cache"] }`) |
| jestrunner.runOptions | Add CLI Options to the Jest Command (e.g. `"jestrunner.runOptions": ["--coverage", "--colors"]`) https://jestjs.io/docs/en/cli |
| jestrunner.jestCommand | Define an alternative Jest command (e.g. for Create React App and similar abstractions) |
| jestrunner.disableCodeLens | Disable CodeLens feature
| jestrunner.codeLensSelector | CodeLens will be shown on files matching this pattern (default **/*.{test,spec}.{js,jsx,ts,tsx})
But don't know how to access it via cmd.
Any thoughts on how to do this?
Thanks!
Was able to find a solution now.
So it turns out that the settings are actually stored in:
<userFolder>\AppData\Roaming\Code\User\Settings.json
From there I can open up the json file and add in the commands as specified by the extension's readme.
In my Vue-CLI project, when I tried using the ?? operator, I got this error:
Syntax Error: SyntaxError: /Users/stevebennett/odev/freelancing/v-map/src/components/Map.vue: >Support for the experimental syntax 'nullishCoalescingOperator' isn't currently enabled (30:29):
...
Add #babel/plugin-proposal-nullish-coalescing-operator (https://git.io/vb4Se) to the 'plugins' section of your Babel config to enable transformation.
I installed #babel/plugin-syntax-nullish-coalescing-operator (its name seems to have changed), added it to my babel.config.js:
module.exports = {
presets: ['#vue/app'],
plugins: ['#babel/plugin-syntax-nullish-coalescing-operator'],
};
Now the error message seems to have gone backwards, no reference to the operator name at all:
Module parse failed: Unexpected token (39:35)
You may need an appropriate loader to handle this file type.
| case 8:
| points = _context.sent;
console.log(sheetID ?? 37);
What am I doing wrong?
For me, the #babel/plugin-syntax-nullish-coalescing-operator plugin would not work, which is the one you are using.
I had to use the #babel/plugin-proposal-nullish-coalescing-operator plugin which is the one that the error message suggests you use.
Additionally, I noticed this on the page for the #babel/plugin-syntax-nullish-coalescing-operator plugin:
I can't say for sure if this will fix your problem, but it certainly fixed mine
I'm trying to enable the spread operator in my project using Babel, but since Babel has remove stage presets I'm having no luck getting spread operators to work with: https://www.npmjs.com/package/#babel/plugin-proposal-object-rest-spread
I've installed plugin-proposal-object-rest-spread and added it to my .babelrc:
{
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
But I'm still getting the following error:
Support for the experimental syntax 'objectRestSpread' isn't currently enabled
(28:3):
26 | onClick,
27 | text,
> 28 | ...allProps
| ^
29 | }) => {
30 | let Element = isStatic ? 'span' : renderAs;
31 | const props = modifiers.clean(allProps);
Add #babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.
It suggests I add #babel/plugin-proposal-object-rest-spread. I have, it's in my package.json.
Any ideas?
NOTE: I'm using Quasar framework, so my instructions may be very slightly different, but is mostly the same.
For the others like me who were spending hours on this issue that shouldn't have been in the first place, here's how I solved it:
Go to your directory where you currently have your .babelrc file.
Create a file called babel.config.js and add the following contents:
module.exports = {
"plugins": [
"#babel/plugin-proposal-object-rest-spread"
]
}
Now, do an npm install #babel/plugin-proposal-object-rest-spread --save-dev
Reload your server, running project. It should work now.
In my case, I didn't touch my .babelrc but just left it as it is and added the new config file. But others have had luck just copy pasting all the content in .babelrc into babel.config.js
Just my $0.02, (mods you can probably delete this part):
Honestly, Babel has become a can of worms. I don't understand why they constantly need to keep screwing up perfectly working implementations. I wish we'd be in a future where won't need to touch this time sink as anything wrong with Babel causes atleast 2 hours on average to fix.
I am trying to get flow to type check my code but it is giving me an error when it can't find paths that have been rewritten using babel-plugin-module-alias.
I have unsuccessfully tried to use the resolve_dirname option in the flowconfig.
Can someone please tell me if it is possible to use this babel plugin with flow?
.babelrc
{
"plugins": [
"transform-flow-strip-types",
["module-alias", [
{ "src": "./app", "expose": "app" },
]]
]
}
.flowconfig
[options]
module.system.node.resolve_dirname=app
app/main.js
import bar from 'app/foo';
app/main.js:3
3: import bar from 'app/foo';
^^^^^^^^^^ app/foo. Required module not found
module.system.node.resolve_dirname actually tells Flow where to start resolving things from. If you want Flow to resolve starting from 'app', you need to point it one directory higher than app.
Alternatively, you can probably also use `module.name_mapper='^app/([a-z-A-Z0-9$_/]+)$' -> 'src/\1'
Here is how this can be achieved with module.name_mapper setting in .flowconfig [options]. Works in flow version 0.56.0
module.name_mapper='^app/\([-a-zA-Z0-9$_/]+\)$' -> '<PROJECT_ROOT>/src/\1'