I have a vuex-orm model called Profile.js
import { Model } from '#vuex-orm/core'
export default class Profile extends Model {
static entity = 'profile'
static fields () {
return {
id: this.uid(),
// etc...
}
}
}
When I run ionic serve I get the following output:
Build finished at 14:20:05 by 0.000s
[INFO] Browser window opened to http://localhost:4200!
ERROR in
[vue-cli-service] /home/user/IonicProjects/ionic/iloveu/src/store/models/Profile.js
[vue-cli-service] 4:19 error Parsing error: Unexpected token =
[vue-cli-service]
[vue-cli-service] ✖ 1 problem (1 error, 0 warnings)
[vue-cli-service]
[vue-cli-service] webpack compiled with 1 error
So it complains about this line
static entity = 'profile'
which is perfectly valid javascript or ecmascript.
What can I do so this valid code is not being tagged as erroneous?
my .eslintrc
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/vue3-essential',
'prettier'
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'vue/no-deprecated-slot-attribute': 'off'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}
reference to the vuex-orm documentation
Seems like this is the culprint
parserOptions: {
ecmaVersion: 2020
},
changing it to
parserOptions: {
ecmaVersion: 2022
},
does not return this error anymore, which is weird because the Quasar framework uses ecmaVersion: 2018 and does not have this error.
Related
I'm using stenciljs to build my project via prerendering. However, the hydration happens below error.
package.json
"build": "stencil build --prerender --config stencil.config.ts",
output
[ ERROR ] Hydrate Error
ReferenceError: Cannot access 'getRenderingRef' before initialization at stencilSubscription$1
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:4996:5) at createStore$2
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5138:13) at createRouter
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5148:42) at hydrateAppClosure
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:5529:1) at hydrateFactory
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34029:3) at render
(C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34296:9) at
C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34228:62 at new Promise (<anonymous>) at
Object.hydrateDocument (C:\Users\aleung\Desktop\project\dist\hydrate\index.js:34220:33) at prerenderWorker
(C:\Users\aleung\Desktop\project\node_modules\#stencil\core\compiler\stencil.js:9988:46)
stencil.config.ts
import { Config } from '#stencil/core';
import nodePolyfills from 'rollup-plugin-node-polyfills';
export const config: Config = {
namespace: 'project',
globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
taskQueue: 'async',
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
},
],
plugins: [],
rollupPlugins: {
after: [nodePolyfills()],
},
devServer: {
reloadStrategy: 'pageReload',
openBrowser: false,
},
};
I expect the hydrate can be generated.
According to the docs, your output target needs a prerenderConfig property:
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null,
baseUrl: 'https://myapp.local/',
prerenderConfig: './prerender.config.ts'
},
],
And that file needs to export a PrerenderConfig not Config:
import { PrerenderConfig } from '#stencil/core';
export const config: PrerenderConfig = {
...
};
See https://stenciljs.com/docs/prerender-config
I would like to import an icon from package carbon-icons-svelte to my svelte component. It works very well in browser but I can't test this component. Testes worked good before import of carbon icons.
This is my configuration:
svelte.config.test.cjs
const preprocess = require('svelte-preprocess');
require('dotenv').config()
module.exports = {
preprocess: preprocess({
replace: [[/import.meta.env.([A-Z_]+)/, (importMeta) =>
{ return JSON.stringify(eval(importMeta.replace('import.meta', 'process')))} ]]
})
};
jest.config.cjs
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');
module.exports = {
transform: {
'^.+\\.svelte$': [
'svelte-jester',
{
preprocess: './svelte.config.test.cjs'
}
],
"^.+\\.(js)$": "babel-jest",
'^.+\\.(ts)$': [require.resolve('jest-chain-transform'),
{ transformers: ['../../../build-utils/importMetaTransformer.cjs', 'ts-jest'] }
]
},
testMatch: ["**/spec/**/*.js"],
moduleFileExtensions: ['js', 'ts', 'svelte'],
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {prefix: '<rootDir>/'})
};
tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"module": "es2020",
"lib": ["es2020", "DOM"],
"target": "es2019",
"importsNotUsedAsValues": "error",
"allowSyntheticDefaultImports": true,
"isolatedModules": true,
"resolveJsonModule": true,
"sourceMap": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"baseUrl": ".",
"allowJs": true,
"checkJs": true,
"paths": {
"$/*": ["src/*"]
}
},
"include": [
"src/**/*.d.ts",
"src/**/*.js",
"src/**/*.ts",
"src/**/*.svelte",
"src/**/*.svelte-kit",
"./jest-setup.ts"
],
"exclude": ["node_modules"]
}
I have this information about an error in jest:
Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Details:
/home/dev/src/iroco-app-client/node_modules/carbon-icons-svelte/lib/Information32/Information32.svelte:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){<script>
^
SyntaxError: Unexpected token '<'
9 | import { createPopper } from '#popperjs/core';
10 | import Information32 from 'carbon-icons-svelte/lib/Information32/Information32.svelte';
> 11 |
| ^
I added to jest.config.test.cjs
transformIgnorePatterns: ["<rootDir>/node_modules/(?!(carbon-icons-svelte))"]
after moduleNameMapper but still it doesn't work.
Thanks for your help.
running on node 16, i changed my babel to cjs and it worked for me, this is what it looks like
module.export = {
presets: [['#babel/preset-env', { targets: { node: 'current' } }], '#babel/preset-typescript']
};
my jest.config.js
const config = {
testEnvironment: 'jsdom',
transform: {
'^.+\\.js$': 'babel-jest',
'^.+\\.ts$': 'ts-jest',
'^.+\\.svelte$': ['svelte-jester', { preprocess: true }]
},
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!(carbon-icons-svelte))',
'<rootDir>/node_modules/(?!(carbon-components-svelte))'
],
moduleFileExtensions: ['js', 'ts', 'svelte']
};
export default config;
I want to integrate Material UI into my Svelte project.
I tried to follow the official documentation from here, but I don't know why I'm getting a strange error while trying to run my project:
loaded rollup.config.js with warnings
(!) Unused external imports
default imported from external module 'rollup-plugin-postcss' but never used
rollup v1.27.13
bundles src/main.js → public/build/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/views/App.css (1:0)
1: .footer.svelte-1xl6ht0{position:fixed;left:0;bottom:0;width:100%;background-color:#569e3e;color:white;text-align:center;height:15px}.footer.us.svelte-1xl6ht0,.footer.europe.svelte-1xl6ht0,.footer.central.svelte-1xl6ht0,.footer.south.svelte-1xl6ht0,.footer.apac.svelte-1xl6ht0,.footer.baldr.svelte-1xl6ht0{background-color:#ca4a4a}.footer
....
The problem seems to be related to CSS.
In my src directory I have a directory called theme which contains a file called _smui-theme.scss and this is the content of the file:
#import "#material/theme/color-palette";
// Svelte Colors!
$mdc-theme-primary: #ff3e00;
$mdc-theme-secondary: #676778;
// Other Svelte color: #40b3ff
$mdc-theme-background: #fff;
$mdc-theme-surface: #fff;
$mdc-theme-error: $material-color-red-900;
And here is my rollup.config.json file:
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import json from '#rollup/plugin-json';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
},
plugins: [
json(),
svelte({
// Enables run-time checks when not in production.
dev: !production,
// Extracts any component CSS out into a separate file — better for performance.
css: css => css.write('public/build/bundle.css'),
// Emit CSS as "files" for other plugins to process
emitCss: true,
}),
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
// In dev mode, call `npm run start` once the bundle has been generated
!production && serve(),
// Watches the `public` directory and refresh the browser on changes when not in production.
!production && livereload('public'),
// Minify for production.
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
In order to solve this issue a postcss plugin is needed for rollup.
I have also added a svelte preprocessor (I think this is optional, but I wanted to be sure).
Make sure you install this packages with npm or yarn:
rollup-plugin-postcss and svelte-preprocess
Then the plugins should be added in rollup.config.js like this:
import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import postcss from 'rollup-plugin-postcss'; <<<------------- Add this
import autoPreprocess from 'svelte-preprocess'; <<<------------- Add this
import json from '#rollup/plugin-json';
const production = !process.env.ROLLUP_WATCH;
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js',
},
plugins: [
json(),
svelte({
// Enables run-time checks when not in production.
dev: !production,
// Extracts any component CSS out into a separate file — better for performance.
css: css => css.write('public/build/bundle.css'),
// Emit CSS as "files" for other plugins to process
emitCss: true,
preprocess: autoPreprocess() <<<------------- Add this
}),
resolve({
browser: true,
dedupe: importee => importee === 'svelte' || importee.startsWith('svelte/')
}),
commonjs(),
postcss({ <<<------------- Add this
extract: true,
minimize: true,
use: [
['sass', {
includePaths: [
'./src/theme',
'./node_modules'
]
}]
]
}),
// In dev mode, call `npm run start` once the bundle has been generated
!production && serve(),
// Watches the `public` directory and refresh the browser on changes when not in production.
!production && livereload('public'),
// Minify for production.
production && terser()
],
watch: {
clearScreen: false
}
};
function serve() {
let started = false;
return {
writeBundle() {
if (!started) {
started = true;
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
}
}
};
}
Now everything should be working right with the css and Material UI can be used.
I try to set up rollup with karma and babel for test.
I face two problems.
First, it cause error Uncaught TypeError about default.
Uncaught TypeError: Cannot use 'in' operator to search for 'default' in undefined
Second, it doesn't find external dependency.
Treating 'chai' as external dependency
What's wrong in my settings?
rollup conf
import babel from "rollup-plugin-babel";
import babelrc from "babelrc-rollup";
import istanbul from "rollup-plugin-istanbul";
import nodeResolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import builtins from "rollup-plugin-node-builtins";
import globals from "rollup-plugin-node-globals";
// import uglify from 'rollup-plugin-uglify'
let pkg = require('./package.json');
let external = Object.keys(pkg.dependencies);
export default {
entry: 'src/index.js',
plugins: [
babel(babelrc()),
istanbul({
exclude: ['test/**/*', 'node_modules/**/*']
}),
globals(),
builtins(),
nodeResolve({
module: true,
jsnext: true,
main: true,
browser: true,
extensions: ['.js']
}),
commonjs({
include: 'node_modules/**'
}),
//uglify(),
],
external: external,
targets: [
{
dest: pkg.main,
format: 'umd',
moduleName: 'sketchbook',
sourceMap: true
},
{
dest: pkg.module,
format: 'es',
sourceMap: true
}
]
};
karma conf
module.exports = function (config) {
config.set({
files: [
// Watch src files for changes but
// don't load them into the browser.
{pattern: 'src/**/*.js', included: false},
'test/**/*.spec.js',
],
browsers: ['Chrome'],
preprocessors: {
'src/**/*.js': ['rollup'],
'test/**/*.spec.js': ['rollup'],
},
rollupPreprocessor: {
plugins: [
require('rollup-plugin-buble')(),
],
format: 'umd', // Helps prevent naming collisions.
moduleName: 'sketchbook', // Required for 'iife' format.
sourceMap: 'inline', // Sensible for testing.
},
customPreprocessors: {
// Clones the base preprocessor, but overwrites
// its options with those defined below.
rollupBabel: {
base: 'rollup',
options: {
// In this case, to use
// a different transpiler:
plugins: [
require('rollup-plugin-babel')(),
],
}
}
}
// frameworks: ['mocha'],
// client: {
// mocha: {
// opts: 'test/mocha.opts'
//
// // // change Karma's debug.html to the mocha web reporter
// // reporter: 'html',
// //
// // // require specific files after Mocha is initialized
// // require: [require.resolve('bdd-lazy-var/bdd_lazy_var_global')],
// //
// // // custom ui, defined in required file above
// // ui: 'bdd-lazy-var/global',
// }
// }
});
};
source
I'm trying to set up a local testing environment for my Dojo project. I've decided on Karma as the test runner and Jasmine as the suite. I've found a few example karma.config files on how to set it up and that works fine.
But when I try to set up the dojo.config in main test file to point to a local version of dojo it just breaks.
This works:
var dojoConfig = {
packages: [
{
name: 'dojo',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo'
}, {
name: 'dojox',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojox'
}, {
name: 'dijit',
location: 'http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit'
}
],
async: true
};
But as soon as I do something like this:
var dojoConfig = {
packages: [
{
name: 'dojo',
location: 'base/lib/dojo'
}, {
name: 'dojox',
location: 'base/lib/dojox'
}, {
name: 'dijit',
location: 'base/lib/dijit'
}
],
async: true
};
This is the error log:
ERROR: 'There is no timestamp for /base/lib/dojo/domReady.js!'
ERROR: 'There is no timestamp for /base/lib/dojo/_base/array.js!'
WARN [web-server]: 404: /base/lib/dojo/domReady.js
Then it runs through and outputs the same for all dojo modules.
That's an odd error... I can't give you much more than a Google search (You did google your error right?), but have you seen these questions?
test not running on karma/jasmine/require.js 'There is no timestamp for *lib*!' error
karma error 'There is no timestamp for'