am using some code from github and got Errror after using
Any tip ? Am quite new into js and vue ... got problems with modules all the time.
I Tried
npm uninstall webpack
and then
npm install webpack#^4.0.0 --save-dev
It's still not working :( tried even other versions... Thx for help .. btw this is my first post :D sorry if something is wrong
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "50b893d9"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
"exclude": [
null
],
"use": [
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\cache-loader\\dist\\cjs.js",
"options": {
"cacheDirectory": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\.cache\\babel-loader",
"cacheIdentifier": "50b893d9"
},
"ident": "clonedRuleSet-38.use[0]"
},
{
"loader": "C:\\Users\\kopem\\Desktop\\práce\\VueJs\\project-01\\node_modules\\babel-loader\\lib\\index.js",
"options": "undefined",
"ident": "undefined"
}
]
}
at checkResourceSource (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:167:11)
at Function.normalizeRule (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:198:4)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:109:17)
at new RuleSet (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\RuleSet.js:104:24)
at new NormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:636:31)
at Compiler.newCompilationParams (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:653:30)
at Compiler.compile (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:661:23)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\tapable\lib\Hook.js:154:20)
at Watching._go (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:41:32)
at C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Watching.js:33:9
at Compiler.readRecords (C:\Users\kopem\Desktop\práce\VueJs\project-01\node_modules\#vue\cli-service\node_modules\webpack\lib\Compiler.js:529:11)
In vue.js you can declare global or local styles. You should and can use the <style>-tag in vue.js like this:
<style>
/* global styles */
</style>
Styles in this tag, would be valid global in your vue.js app.
<style scoped>
/* local styles */
</style>
Styles in this tag, would only be valid in the component, where you declared this <style scoped>-tag.
For more information, just read this documentation: Scoped CSS
Related
I have my express.js project in monorepo. I want to add custom path alias to it.
The directory structure is:
./
server/
----> jsconfig.json
----> .eslintrc.js
----> src/
--------> index.js
--------> modules/auth
-------------> auth.controller.js
jsconfig.json
{
"compilerOptions": {
"module": "ES6",
"baseUrl": "./",
"paths": {
"#modules/*": [
"src/modules/*"
]
}
},
"exclude": ["node_modules"]
}
.eslintrc.js
module.exports = {
env: {
es2021: true,
node: true,
},
extends: [
'airbnb-base',
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module',
},
rules: {
'no-console': 'error',
'no-debugger': 'error',
},
settings: {
'import/resolver': {
alias: {
map: [
['#modules/*', 'src/modules/*'],
],
extensions: ['.js', '.json'],
},
},
},
};
Simply, I just tried to import auth controller in my index.js file.
import authRoutes from '#modules/auth/auth.routes';
but I get the following error: Unable to resolve path to module '#modules/auth/auth.controller' .eslint import/no-unresolved
please, don't suggest to turn off the rule.
I've alreadyy tried eslint-import-resolver-jsconfig, but I got Cannot resolve jsConfig, SyntaxError } on 150.
Because I used monorepo, there was a problem for ESLint or even lint-staged.
So now I have only one project per repository and:
Added custom paths in jsconfig.json:
"paths": {
"#modules/*": [
"./src/modules/*"
]
}
Installed eslint-import-resolver-jsconfig and added the following configuration to the eslint.json:
"extends": [
"airbnb-base",
"eslint:recommended"
],
"plugins": ["import"],
"settings": {
"import/resolver": {
"jsconfig": {
"config": "jsconfig.json"
}
}
}
Installed the Babel plugin babel-plugin-module-resolver and added the following settings to the .babelrc:
"plugins": [
[
"module-resolver",
{
"alias": {
"#modules": "./src/modules"
}
}
]
]
But, again: This only works if you have one project per repository and all your configuration files (.*rc, package.json, etc) are in the root level.
To achieve the above I use the module-alias package.
After installing it as a normal dependency, npm i --save module-alias, add the following to your package.json:
"_moduleAliases": {
"#modules": "./src/modules"
}
That will basically define the mappings for all the aliases you want to define.
To make it work, you will now need to import the following on top of your application under index.js:
require("module-alias/register"); // If using commonJS
// or
import "module-alias/register"; // If transpiling es6
You are now all set and should be able to import your files with absolute paths looking as:
const authRoutes = require("#modules/auth/auth.routes")
// or
import authRoutes from "#modules/auth/auth.routes";
In case eslint still flags the unresolved path, you may need to update your jsconfig.json or tsconfig.json to contain the below:
"paths": {
"#modules/*": ["src/modules/*"]
}
You can find the package documentation and read more about its usage here.
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'm using now.sh to deploy my nextjs (React) app. And the build is failing due to this error:
Build error occurred
ReferenceError: describe is not defined
Not sure why this started happening, here is my .babelrc
{
"env": {
"development": {
"compact": false,
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"production": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"test": {
"compact": false,
"presets": [
"#babel/preset-typescript",
["next/babel", {"preset-env": { "modules": "commonjs" }}]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true }],
["#babel/plugin-proposal-decorators", { "legacy": true }],
["babel-plugin-sass-vars"]
]
}
}
}
package.json
"engines" : {
"node" : ">=8.10.0 <11.0.0"
},
"scripts": {
"dev": "NODE_ENV=development next -p 7777",
"build": "NODE_ENV=production next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --no-cache",
"test-watch": "NODE_ENV=test jest --watch --no-cache",
"coverage": "NODE_ENV=test jest --coverage",
"update-snap": "NODE_ENV=test jest --updateSnapshot"
},
Full log:
running "npm run now-build"
> moon.holdings#2.0.0 now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE
The first test where the describe is used:
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import About from '../about.tsx'
describe('<About /> component', () => {
describe('rendering', () => {
const wrapper = shallow(<About />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
expect(wrapper.contains(<About/>));
});
});
});
next.config
module.exports = (phase, { defaultConfig }) => {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
// Note: Nextjs provides webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
// ✅ Put the require call here.
const withTypescript = require('#zeit/next-typescript')
const withCSS = require('#zeit/next-sass')
// withCSS({target: 'serverless'})
return withTypescript(withCSS({
webpack(config, options) {
return config
}
}))
}
I removed the tests that covered the /pages directory. NextJS used pages for routing. Not sure why that was causing the problem, ran coverage and looks like pages wasn't necessary to cover.
Hoping for a better answer from someone at the NextJS / Now.sh team, and I'll select that.
Easy fix: https://github.com/zeit/next.js/issues/3728#issuecomment-523789071
pageExtensions: ['page.tsx']
An option that allows the tests inside pages folder:
change webpack settings direct in next.config.js
module.exports = {
webpack: (config, { webpack }) => {
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
}
It is ignoring whatever __tests__ folder found on the build process.
If you are looking to colocate non-page files with pages in the /pages directory, you can use Custom Page Extensions to force your pages to have a file extension of .page.js. Once that is setup, Next.js will ignore any files that don't have .page in the file extension.
next.config.js
module.exports = {
// Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}
I wrote some docs for this use case that have yet to be merged https://github.com/vercel/next.js/pull/22740. The docs link above now contains these changes.
The original Github issue where this was discovered is https://github.com/vercel/next.js/issues/3728#issuecomment-895568757.
I'm using vue-tour in my app, the problem is that when i imported the library my app doesn't work anymore, this the error when i try the command npm run dev:
error in ./~/vue-tour/dist/vue-tour.umd.js
Module build failed: Error: Couldn't find preset "#vue/app" relative to directory "C:\\xampp\\htdocs\\avanttia\\node_modules\\vue-tour"
at C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:46:20)
at Object.module.exports (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:163:20)
# ./resources/assets/js/wizard/main.js 49:15-34
# multi ./resources/assets/js/wizard/main.js
Importing the library like this:
import '#/bootstrap'
import VueDragDrop from 'vue-drag-drop'
import VueTour from 'vue-tour'
import Wizard from '#/wizard/containers/Wizard.vue'
require('/node_modules/vue-tour/dist/vue-tour.css')
const Vue = window.Vue
Vue.use(VueTour)
Vue.use(VueDragDrop)
const vm = new Vue({
el: '#wizard-app',
render: h => h(Wizard)
})
export default vm
Edit:
This is mi .babelrc config file:
{
"presets": [
[ "env", {
"targets": {
"uglify": true,
"node": "current"
},
"modules": false,
"loose": true,
"useBuiltIns": true,
"debug": true,
}]
],
"plugins": [
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]],
["module-resolver", {
"alias": {
"#": "./resources/assets/js"
}
}],
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
}
and the .babelrc config file from the vue-tour library:
{
"presets": [
"#vue/app"
]
}
Why vue can't find #vue/app?, looks like there is a conflict in the alias property, but i have no idea how to change without breaking the project config.
update:
if in the node_modules/vue-tour library i change the .babalrc file to this:
"presets": [
"es2015"
]
it works as expected, but this is undesired as i have to change everywhere i have to deploy this project.
After days struggling with this issue, i finally found a solution for this:
In the webpack.mix.js the es2015 transpilation was done like this:
{
test: /\.js$/,
exclude: /node_modules\/(?!(some-library)\/).*/,
include: [/node_modules\/vue-tour/], // <---Added this line!
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
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.