I am trying to use the eslint-plugin-simple-import-sort library to sort my imports. I am trying to get my imports to look like this:
import firstAction from 'actions/firstAction';
import secondAction from 'actions/secondAction'
import firstActionTypes from 'actions/firstAction/types'
My .eslintrc.json file looks like this (omitted for clarity):
"plugins": ["react", "simple-import-sort"]
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
And I simply just do not know the correct Regex pattern to get the imports to sort how I need, with the appropriate whitespace. Each [] in the groups array does separate with whitespace automatically, so I really just need the Regex pattern to make the actions/*/types imports come after the actions/* imports.
Thanks in advance!
I actually figured out a way to do it which does what I need:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"rules": {
"simple-import-sort/imports": [
"error",
{
"groups": [
["^(actions)(/.*|$)"],
["^(actions)(/.*)(types)"],
["^(reducers)(/.*|$)"]
]
}
]
}
}
]
Sorry for the premature question post, mods can delete if needed, or leave it if it helps the community.
Thanks!
Related
I'm using babel-plugin-module-resolver to make path alias.
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
[
"module-resolver",
{
"alias": {
"~": "./resources/src"
}
}
]
]
}
But whenever I start to move or modify a file name, the corresponding path in relevant import files are not automatically updated.
Does anyone know how I can make the renaming work with paths aliases?
I'm using Next.js with typescript. I am trying to also use TypeORM, like so:
#Entity()
export class UserModel extends BaseEntity {
#PrimaryGeneratedColumn('uuid')
id: number
}
But I'm getting an error:
Error: [BABEL] /home/aironside/Documents/private/tatooify/pages/api/user.ts: The decorators plugin requires a 'decoratorsBeforeExport' option, whose value must be a boolean. If you want to use the legacy decorators semantics, you can set the 'legacy: true' option.
Here's my .babelrc
{
"presets": ["next/babel"],
"plugins": [
"#babel/plugin-proposal-decorators", {
"legacy": true
},
]
}
And here's the related package.json part
{
"dependencies": {
"#babel/plugin-proposal-decorators": "^7.12.13",
...
},
"devDependencies": {
...
}
}
From what I found, most errors are caused by either not having this plugin installed, or it being in devDep instead of dependencies. What am I missing?
Ok, as shown in the docs (obviously) .babelrc should be like this:
{
"presets": ["next/babel"],
"plugins": [
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
}
Notice the [] around plugin name and options object.
I had Jest tests working under Quasar version 0.14. Currently some simple tests and all snapshot-tests pass but for some tests I keep getting:
1.
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Error in config.errorHandler: "TypeError: Cannot read property 'form' of undefined"
and 2:
console.error node_modules/vue/dist/vue.common.js:1743
TypeError: Cannot read property 'getters' of undefined
and 3:
console.error node_modules/vue/dist/vue.common.js:593
[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
1 and 2 seem to relate to Jest not recognizing a $v.form and the vuex store within the components.
Any suggestions/ best practices how to get this working? I followed along this, and have these settings:
.babelrc:
{
"presets": [
[ "env", {"modules": false} ],
"stage-2"
],
"plugins": ["transform-runtime"],
"comments": false,
"env": {
"test": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
[
"module-resolver",
{
"root": [
"./src"
],
"alias": {
"quasar": "quasar-framework/dist/quasar.mat.esm.js",
"^vue$": "vue/dist/vue.common.js"
}
}
]
]
}
}
}
within package.json:
"jest": {
"testMatch": [
"<rootDir>/src/**/?(*.)(spec).js?(x)"
],
"testPathIgnorePatterns": [
"<rootDir>/src/e2e/"
],
"moduleNameMapper": {
"src/components/([^\\.]*).vue$": "<rootDir>/src/components/$1.vue",
"src/components/([^\\.]*)$": "<rootDir>/src/components/$1.js",
"^vue$": "vue/dist/vue.common.js",
"src/([^\\.]*)$": "<rootDir>/src/$1.js",
"src/([^\\.]*).vue$": "<rootDir>/src/$1.vue",
"(.*)/(.*).vue$": "$1/$2.vue",
"(.*)/(.*)/(.*).vue$": "$1/$2/$3.vue"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"collectCoverageFrom": [
"**/*.{vue}"
],
"coverageDirectory": "<rootDir>/src/components/coverage",
"transformIgnorePatterns": [
"node_modules/core-js",
"node_modules/babel-runtime",
"node_modules/lodash",
"node_modules/vue"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
},
1. The Problem
Your 3rd error occurred because Jest doesn't know what a <q-page-sticky> is. You have to tell it explicitly.
[Vue warn]: Unknown custom element: <q-page-sticky> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
2. The Solution
Its as simple as telling Vue what 'Vuex' is, or what 'vue-router' is. You are probably already familiar with this. The only difference is that we have to use localVue here in the testing environment.
import { shallowMount, createLocalVue } from "#vue/test-utils";
import MyComponent from "#/components/MyComponent";
// I see that you already alias "quasar" in your .babelrc,
// otherwise replace "quasar" with "quasar-framework/dist/quasar.mat.esm.js"
import Quasar, { q-page-sticky } from "quasar";
// or if you are using a lot of Quasar components then do
// import Quasar, * as All from "quasar";
describe("Something Something", () => {
const localVue = createLocalVue();
localVue.use(Quasar, { components: ["q-page-sticky"]});
// or if you are using a lot of Quasar components then do
// localVue.use(Quasar, { components: All, directives: All, plugins: All });
const wrapper = shallowMount(MyComponent, {
localVue,
});
it("works", () => {
expect(wrapper.isVueInstance()).toBe(true);
});
})
3. Reference
The above is a general solution and can be used not just with Quasar framework. You can checkout the following official vue-test-util docs for more information.
Using with Vue Router
Using with Vuex
I had the same warnings (1 and 2). For me, it was using the wrong mount. I used Vue's mount function instead of the one in #vue/test-utils. I don't have the explanation why it works now, but that was it for me.
I have created and ember in-repo-addon. Let's say say-hello. After that I created ember-eninge. Let's say users-engine.
In may main application I can directly use the addon as
//application.hbs
{{say-hello}}
How to use it in the users-engine ?
//lib/users-engines/templates/index.hbs
{{say-hello}} //It is not working also not throwing any error
I found the answer but not sure whether it is correct way or not.
In the users-engine/package.json add relative path to addons
{
"name": "users-engine",
"keywords": [
"ember-addon",
"ember-engine"
],
"dependencies": {
"ember-cli-htmlbars": "*"
},
"ember-addon": {
"paths": [
"../say-hello"
]
}
}
and now you can use in-repo-addon in ember-engine directly.
//lib/users-engines/templates/index.hbs
{{say-hello}} //It is working now.
Maybe somebody can help me with this.
I try to publish npm package with the following configuration:
webpack:
production: {
entry: [
'./src',
'./src/app.scss',
'draft-js/dist/Draft.css'
],
devtool: "source-map",
output: {
path: path.join(__dirname, 'lib'),
filename: 'stewie-editor.js',
library: 'stewie-editor',
libraryTarget: 'umd',
umdNamedDefine: true
}
},
package.json section dealing with library publishing
"main": "lib/stewie-editor.js",
"files": [
"lib",
"src"
],
My src/index.js file looks like this
import EditorComponent from 'EditorComponent';
import EditorFactory from 'EditorFactory';
export {
EditorFactory,
EditorComponent
}
.babelrc
{
"presets": ["es2015", "stage-2", "react"],
"plugins": ["babel-plugin-add-module-exports"],
"env": {
"test": {
"plugins": [
["css-modules-transform", {
"generateScopedName": "[name]__[local]",
"extensions": [".css", ".scss"]
}]
]
},
"dev": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
I looked at the following example and there everything is working.
strangely with my setup things don't work
In a different project when I install stewie-editor npm package and import exported classes from the package like so:
import { EditorFactory } from 'stewie-editor';
I get undefined. When I try to look at the contents of the whole package importing it like so:
import stewie from 'stewie-editor';
I get an empty Object.
Your help will be very appreciated.
The empty object is as a result of a missing keyword in your index.js file: default.
You can fix this by rewriting the index.js file to:
export default {
EditorFactory,
EditorComponent
}
Well I figured out what was the problem. Adding scss and .css in webpack entry point resulted in an empty object. So I removed them from entry point and added as imports inside my EditorComponent.js file. That fixed the issue. Everything got exported.