I have .babelrc configured as something like this
{
"env" : {
"test": {
"plugins": [some other plugins...] //but not lodash
}
"plugins": ["lodash", some other plugins ...]
}
but this configuration isn't working. If i gave at cli BABEL_ENV=test <command> still lodash comes with it.
I even tried "exclude": ["babel-plugin-lodash"] in test. what is the correct way to exclude lodash from test enviroment but not in default run ?
I am trying to workaround this issue.
I tried work around suggested there but I want lodash in the default run too.Here default mean without BABEL_ENV=<env> in command line.
You need to ommit "babel-plugin-" when excluding iodash.
exclude": ["Iodash"]
More here: https://github.com/babel/babel/issues/9182
Related
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.
Two things that annoy me. First is the warning Flake8 gives me when I type more than 80 characters on a line. Second is the warnings I get when I haven't yet used a module name that I imported. I've looked at all the documentation on using Flake8 in the terminal. No use.
flake8 --ignore=E402
flake8 --max-line-length=120
This doesn't work. At least VS Code doesn't show any effect.
Add your arguments to your USER SETTINGS json file like this:
"python.linting.flake8Args": [
"--max-line-length=120",
"--ignore=E402,F841,F401,E302,E305",
],
note that flake8 uses
"python.linting.flake8Args": [
whereas black seems to use:
"python.formatting.blackArgs": [
if you're using both (or toggling) these settings maybe helpful:
{
"python.linting.pylintEnabled": false,
"python.linting.flake8Enabled": true,
"python.linting.enabled": true,
"python.formatting.provider": "black",
"python.formatting.blackArgs": [
"--line-length",
"120"
],
"python.linting.flake8Args": [
"--max-line-length=120",
"--ignore=E402",
],
"python.pythonPath": "venv/bin/python"
}
In my case (vscode 1.72.2, flake 5.0.4) it only worked by adding:
"flake8.args": [
"--max-line-length=120"
]
in the settings.json
I prefer editing the Workspace settings, namely <root project folder>/.vscode/settings.json, because I store it in version control. This way it is backed up and everyone working on the project will get it.
What was suggested in most of the other answers:
"python.linting.flake8Args": [
"--max-line-length=120",
],
had no effect for me.
I ran into this problem recently. I ran into problems because I was setting the argument to --config flake8.cfg instead of --config=flake8.cfg. Under the hood, vscode puts the CLI argument in quotes. Adding "--config flake8.cfg" to the flake8 command seems to confuse flake8 into thinking that it's looking at a file path and not a CLI argument.
The solution for me was to either set the args as --config=flake8.cfg (with the equals sign) or the args up into separate items in the array:
"python.linting.flake8Args": [
"--config",
"flake8.cfg"
]
The solution proposed by reka18 is great and was no doubt written specifically for the original question.
From a more general stand point, I would advise against using this kind of trick
if you work on a project that has dedicated configuration files.
You are guaranteed to run into incomprehensible configuration conflicts
and will possibly ignore rules that were purposefully enforced by the project.
In this case, you should use the following instead:
assuming the file is named .flake8 and is present at the project's root folder
// .vscode/settings.json
"python.linting.flake8Args": ["--config", ".flake8"],
Using --config .flake8 ensures only this file will be read (See official doc).
So it is important to use this option, even though it is a default value. Otherwise, a custom user configuration in a parent folder could accidentally be used.
To extend (change) the default Flake8 line length I added the following in my VS Code workspace: project.code-workspace:
{
...
"settings": {
"flake8.args": [
"--max-line-length=120",
]
}
}
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'
I am just getting started with the Jest test framework and while straight up unit tests work fine, I am having massive issues testing any component that in its module (ES module via babel+webpack) requires a HTML file.
Here is an example:
import './errorHandler.scss';
import template from './errorHandler.tmpl';
class ErrorHandler {
...
I am loading the component specific SCSS file which I have set in Jest's package.json config to return an empty object but when Jest tries to run the import template from './errorHandler.tmpl'; line it breaks saying:
/Users/jannis/Sites/my-app/src/scripts/errorHandler/errorHandler.tmpl.html:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<div class="overlay--top">
^
SyntaxError: Unexpected token <
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:284:10)
My Jest config from package.json is as follows:
"jest": {
"setupTestFrameworkScriptFile": "<rootDir>/test/setupFile.js",
"moduleDirectories": ["node_modules"],
"moduleFileExtensions": ["js", "json", "html", "scss"],
"moduleNameMapper": {
"^.+\\.scss$": "<rootDir>/test/styleMock.js"
}
}
It seems that the webpack html-loader is not working correctly with Jest but I can't find any solution on how to fix this.
Does anyone know how I can make these html-loader imports work in my tests? They load my lodash template markup and i'd rather not have these at times massive HTML chunks in my .js file so i can omit the import template from x part.
PS: This is not a react project, just plain webpack, babel, es6.
I encountered this specific problem recently and creating your own transform preprocesser will solve it. This was my set up:
package.json
"jest": {
"moduleFileExtensions": [
"js",
"html"
],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html$": "<rootDir>/test/utils/htmlLoader.js"
}
}
NOTE: babel-jest is normally included by default, but if you specify a custom transform preprocessor, you seem to have to include it manually.
test/utils/htmlLoader.js:
const htmlLoader = require('html-loader');
module.exports = {
process(src, filename, config, options) {
return htmlLoader(src);
}
}
A bit late to the party, but wanted to add that there is also this html-loader-jest npm package out there to do this if you wanted to go that route.
Once you npm install it you will add it to your jest configuration with
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.html?$": "html-loader-jest"
}
For Jest > 28.x.x with html-loader:
Create a custom transformer as documented here.
jest/html-loader.js
const htmlLoader = require("html-loader");
module.exports = {
process(sourceText) {
return {
code: `module.exports = ${htmlLoader(sourceText)};`,
};
},
};
Add it to your jest config.
jest.config.js
...
// A map from regular expressions to paths to transformers
transform: {
"^.+\\.html$": "<rootDir>/jest/html-loader.js",
},
...
It will fix the error : Invalid return value: process() or/and processAsync() method of code transformer found at "<PATH>" should return an object or a Promise resolving to an object.
Maybe your own preprocessor file will be the solution:
ScriptPreprocessor
Custom-preprocessors
scriptpreprocessor: The path to a module that provides a synchronous function from pre-processing source files. For example, if you wanted to be able to use a new language feature in your modules or tests that isn't yet supported by node (like, for example, ES6 classes), you might plug in one of many transpilers that compile ES6 to ES5 here.
I created my own preprocessor when I had a problems with my tests after added transform-decorators-legacy to my webpack module loaders.
html-loader-jest doesn't work for me. My workaround for this:
"transform": {
'\\.(html)$': '<rootDir>/htmlTemplateMock.html'
}
htmlTemplateMock.html is empty file
For Jest 28+ you can use jest-html-loader to make Jest work with code that requires HTML files.
npm install --save-dev jest-html-loader
In your jest config, add it as a transformer for .HTML files:
"transform": {
"^.+\\.html?$": "jest-html-loader"
},
I'm trying to use coffeeify with budo so I do not have to add the extension to my require statements. I have tried passing these commands through budo's browserify options
budo src/app.coffee --live --serve bundle.js -- -t coffeeify --extension=".coffee"
budo src/app.coffee --live --serve bundle.js -- -t [coffeeify --extension=".coffee"]
I also tried inserting the browserify transform into my package.json
"browserify: {
"transform": ["coffeeify", {"extension": ".coffee"}]
}
Here is something that works for me (took me forever to figure it out, the hard part being getting watchify to work with coffeescript). Everything is in the package.yaml. Invoke npm start from your top folder and it will do the trick. npm puts all the locally installed node binaries in your PATH for you (they normally live under node_modules/.bin).
{
"name": "my-package",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "(cd src; budo app.coffee:bundle.js --dir . --live --verbose -- --extension=.coffee | garnish)"
},
"browserify": {
"extension": [ ".coffee" ],
"transform": [ ["coffeeify"], ["brfs"] ]
},
"devDependencies": {
"brfs": "1.4.1",
"browserify": "11.1.0",
"budo": "^5.1.5",
"coffee-script": "latest",
"coffeeify": "^1.1.0",
"garnish": "^3.2.1",
"watchify": "3.4.0"
}
}
I have my source code under the src folder, and a file named app.coffee which includes (or require in node.js terms) my whole application. I have an index.html in my src folder which reference the bundle.js through from an html script tag.
The command to start budo is inside my package.json. It does cd into my src folder first.
The trick is to specify some configuration in the browserify block: the extension .coffee needs to be present, and a list of transforms as well. I tried to have everything on the command line but never got it to work
After npm start is invoked, since I pass the --live argument to budo everything works like magic and edit/saves to my documents do trigger a browser reload/refresh.
To deploy or release you'll probably need another target to minify with uglify.js. I still have a script that does that manually in 2 steps, the first step calls browserify and the second step calls uglify.js explicitely.
As a remark, recent version of budo do the piping into garnish for you I've heard.
Another tip is to look at what the React folks are doing to transform their .jsx files, as it is in theory extremely close to what the coffeescript folks need to do. There seems to be a huge momentum around React so hopefully React people will have figured those build problems first.