I'm having a issue getting the kendo-ui charts for angular2 up and running.
I have installed kendo-angular-charts 0.8.2
The error message shown is:
(index):30 Error: SyntaxError: Unexpected token <(…)
my app.module.ts:
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
NavBarComponent,
LoginComponent,
UserToolComponent,
ResultStatsComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
routing,
ButtonsModule,
LayoutModule,
GridModule,
AccordionModule,
ChartsModule
When i leave out the imports: Chartsmodule the website just runs fine.
I have setup my system.config.js like this:
(function(global) {
var paths = {
'npm:': '/node_modules/'
};
var map = {
'app': 'app',
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
"ng2-accordion": "node_modules/ng2-accordion",
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#progress/kendo-angular-buttons': 'npm:#progress/kendo-angular-buttons',
'#progress/kendo-angular-grid': 'npm:#progress/kendo-angular-grid',
'#progress/kendo-angular-intl': 'npm:#progress/kendo-angular-intl',
'#progress/kendo-angular-layout': 'npm:#progress/kendo-angular-layout',
'#progress/kendo-data-query': 'npm:#progress/kendo-data-query',
//from here is new
'#progress/kendo-angular-buttons': 'npm:#progress/kendo-angular-buttons',
'#progress/kendo-angular-charts': 'npm:#progress/kendo-angular-charts',
'#progress/kendo-charts': 'npm:#progress/kendo-charts',
'#progress/kendo-angular-popup': 'npm:#progress/kendo-angular-popup',
'#progress/kendo-angular-resize-sensor': 'npm:#progress/kendo-angular-resize-sensor',
'#progress/kendo-angular-intl': 'npm:#progress/kendo-angular-intl',
'#progress/kendo-popup-common': 'npm:#progress/kendo-popup-common',
'#progress/kendo-drawing': 'npm:#progress/kendo-drawing',
'#telerik/kendo-intl': 'npm:#telerik/kendo-intl',
'#telerik/kendo-draggable': 'npm:#telerik/kendo-draggable',
'rxjs': 'npm:rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
"ng2-accordion": { "main": "index.js", "defaultExtension": "js"
},
'npm:#progress/kendo-angular-buttons': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-grid': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-data-query': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-intl': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'npm:#telerik/kendo-intl': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
app: { main: 'main.js', defaultExtension: 'js' },
rxjs: { defaultExtension: 'js' },
'npm:#progress/kendo-angular-layout': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
//new from here
'npm:#progress/kendo-angular-buttons': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-charts': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-angular-resize-sensor': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'npm:#progress/kendo-charts': {
main: './dist/npm/js/main.js',
defaultExtension: 'js'
},
'#progress/kendo-angular-popup': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#progress/kendo-popup-common': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#progress/kendo-drawing': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
},
'#telerik/kendo-draggable': {
defaultExtension: 'js',
main: "./dist/npm/js/main.js"
}
};
var config = {
paths: paths,
map: map,
packages: packages
};
System.config(config);
})(this);
Anybody who can help me with this?
How can you debug errors like this?
After debugging some more.......this is the error I see:
Error: SyntaxError: Unexpected token <
at eval (<anonymous>)
at Object.81 (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:330:19)
at __webpack_require__ (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:21:30)
at Object.75 (http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js:116:18)
Evaluating http://localhost:3000/node_modules/chroma-js#1.2.1
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/path-node.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas/arc-node.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/canvas.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/drawing.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-drawing/dist/npm/js/main.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/core/box.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/core.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-charts/dist/npm/js/main.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/chart/chart-auto-theme.component.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/chart.directives.js
Evaluating http://localhost:3000/node_modules/#progress/kendo-angular-charts/dist/npm/js/main.js
Evaluating http://localhost:3000/app/app.module.js
Evaluating http://localhost:3000/app/main.js
Error loading http://localhost:3000/app/main.js
Thanks,
In my case it had to do with chroma-js not being loaded.
Added this to your system.config.js:
map:
'chroma-js':'npm:chroma-js#1.2.1',
and in the packages:
'npm:chroma-js': {
defaultExtension: 'js',
main: "./chroma.js"
},
After adding this this solved my issue.
When looking at the plunkers from the demo website I don't see chroma-js added like described above. I don't know why they don't need to do this.
Related
I am using Vue 3 + Jest 28.
I've decided do try vue-pdf-embed, which worked great.
The problem is when I run jest.
It says
Inline worker is not supported
With this I can't proceed and got stuck.
My jest.config.ts looks like this:
const esModules = ['quasar', 'quasar/lang', 'lodash-es', 'cnpj'].join('|');
module.exports = {
verbose: true,
testEnvironment: 'jsdom',
testEnvironmentOptions: {
url: 'http://localhost/',
customExportConditions: ['node', 'node-addons'],
},
globals: {
'ts-jest': {
tsconfig: '<rootDir>/tests/tsconfig.json',
isolatedModules: true,
},
},
collectCoverageFrom: ['src/**/*.{vue,js,ts}', '!src/*.{js,ts}', '!**/typings/**', '!src/**/definitions/*.ts'],
coverageProvider: 'v8',
setupFiles: [
'<rootDir>/tests/jest.init.ts',
],
setupFilesAfterEnv: ['<rootDir>/tests/setupTests.ts'],
moduleFileExtensions: [
'vue',
'js',
'ts',
'json',
'jsx',
'tsx',
],
transform: {
// See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
[`^(${esModules}).+\\.js$`]: 'babel-jest',
'^.+\\.(ts|js|html)$': 'ts-jest',
// vue-jest uses find-babel-file, which searches by this order:
// (async) .babelrc, .babelrc.js, package.json, babel.config.js
// (sync) .babelrc, .babelrc.js, babel.config.js, package.json
// https://github.com/tleunen/find-babel-config/issues/33
'.*\\.vue$': '#vue/vue3-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
'jest-transform-stub',
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
moduleNameMapper: {
'#/(.*)$': '<rootDir>/src/$1',
'^quasar$': 'quasar/dist/quasar.esm.prod.js',
'lodash-es': 'lodash',
},
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
};
I've tried so far to add it to the esModules variable I have in my jest config but no success
I came with a reasonable answer: mock the component:
In jest.init.ts, which I refer to in my jest.config.ts above, I put the following:
jest.mock('vue-pdf-embed', () => () => '<mock-vue-pdf-embed/>');
and now everything works just fine ;)
When running watch-development I am plagued with so many errors from my node modules and I'm not sure where to begin to even resolve some of them. Maybe something is wrong with my webpack configuration but I have tried looking for a solution for days now and have found nothing
Some of the errors:
TS2307: Cannot find module 'rxjs-compat/operators/multicast'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\observeOn.ts(1,15)
TS2307: Cannot find module 'rxjs-compat/operators/observeOn'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\onErrorResumeNext.ts(1,15)
TS2307: Cannot find module 'rxjs-compat/operators/onErrorResumeNext'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\rxjs\src\operators\pairwise.ts(1,15)
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(37,3)
TS2552: Cannot find name 'expect'. Did you mean 'expected'?
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(40,1)
TS2582: Cannot find name 'it'. Do you need to install type definitions for a test runner? Try `npm i #types/jest` or `npm i #types/mocha`.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(42,3)
TS2304: Cannot find name 'expect'.
ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts
[tsl] ERROR in D:\Projects\Hospitality\content\Hospitality\node_modules\vue-functional-data-merge\__test__\array-merge.test.ts(45,3)
I have hundreds of errors like this all coming from my node modules, Mostly complaining it can't find a module, but also some complaining it cannot find name 'x'
this is my webpack config:
/// <binding />
"use strict";
module.exports = (env, options) => {
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoader = require("vue-loader");
let pathsToClean = ['dist/*.*', 'dist/fonts/*.*', 'dist/images/*.*'];
let cleanOptions = {
root: __dirname + '/wwwroot/',
verbose: true,
dry: false
};
return {
mode: 'development',
entry: {
app: './wwwroot/VueApp/Home/app.ts',
mainCss: './wwwroot/VueApp/CSS/site.scss'
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new webpack.ProvidePlugin({
Popper: ['popper.js', 'default'],
moment: 'moment',
vueResource: 'vue-resource',
vueRouter: 'vue-router',
vuex: 'vuex'
}),
new VueLoader.VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].bundle.css"
})
],
output: {
publicPath: "/dist/",
path: path.join(__dirname, '/wwwroot/dist/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: [
['env', { targets: { uglify: true } }]
]
}
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { minimize: true, sourceMap: false } },
{
loader: 'sass-loader', options: { sourceMap: false } }
],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './images/[name].[ext]'
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './fonts/[name].[ext]'
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.ts', '.js', '.vue', '.json']
}
};
};
this is what my file structure looks like:
https://ibb.co/xjQMCX0
Trying to add vue (and SFCs) to my webpack app. The <template> and <script> blocks work fine, but for some reason the styles in the <style> block are not being extracted for production build.
In the dev build, it's extracting the .vue <style> block to a separate css file (named for the entrypoint). Which is OK but I'd prefer they went into my main stylesheet.
But no matter what I try, I can't get any .vue styles to show up (in any file) for the production build.
This is an abbreviated version of my webpack config:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
...
module.exports = (env) => {
return {
entry: {
app: ["./src/polyfills.js", "./src/scss/styles.scss", "./src/app.js"],
...
testview: "./src/js/views/TestView.js"
},
output: {
path: assets,
filename: "[name].[hash].js",
publicPath: "/static/"
},
resolve: {
modules: ["node_modules", "src"],
alias: {
vue$: "vue/dist/vue.esm.js"
},
extensions: ["*", ".js", ".vue"]
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: "babel-loader",
options: {
presets: [
[
"#babel/preset-env",
{
targets: {
browsers: ["> 1%", "last 2 versions", "ie >= 11"]
}
}
]
],
plugins: ["#babel/plugin-proposal-class-properties"],
code: true,
comments: true,
cacheDirectory: true,
babelrc: false
}
}
]
},
{
test: /\.s?[ac]ss$/,
use: [
"vue-style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: ifNotProduction()
}
},
{
loader: "postcss-loader",
options: {
ident: "postcss",
sourceMap: ifNotProduction(),
plugins: () =>
ifProduction([
require("autoprefixer")({
preset: "default"
}),
require("cssnano"),
require("css-mqpacker")
])
}
},
{
loader: "sass-loader",
options: {
sourceMap: ifNotProduction()
}
}
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2,
minSize: 0
},
styles: {
name: "styles",
test: /\.css$/,
chunks: "all",
enforce: true
}
}
},
occurrenceOrder: true
},
plugins: [
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "style.[hash].css"
}),
new HtmlWebpackPlugin({
hash: true,
inject: false,
template: "./src/jinja-templates/base.html.j2",
filename: `${templates}/base.html.j2`,
})
]
};
};
The .vue file I'm using is this demo one. I'm trying to import it into the entrypoint called 'testview' which contains simply:
import Vue from "vue";
import MainContent from "../components/main-content";
let MainComponent = Vue.extend(MainContent);
new MainComponent().$mount("#mainContent");
Did figure it out. I had to remove sideEffects: false from my package.json. This issue explains it further.
Still would like to know how to extract the .vue styles to my main stylesheet As it is now, the .vue styles are extracting to a separate stylesheet (dev and production).
I try to configure my environment to run tests on node.
This my my webpack.config.test.js
const serverConfig = {
module: {
loaders: [
{test: /\.tsx?$/, loader: 'ts-loader' }
]
},
target: 'node',
externals:[nodeExternals()],
resolve: {
extensions: ['.ts', '.tsx', '.js']
}
};
module.exports = serverConfig;
karma.config.js
// Karma configuration
// Generated on Tue Jun 27 2017 07:20:43 GMT-0500 (Hora est. Pacífico, Sudamérica)
const webpackConfig=require('./config/webpack/webpack.test');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['mocha','es6-shim'],
plugins:[
require("karma-es6-shim"),
'karma-webpack',
'karma-jsdom-launcher',
'karma-mocha',
'karma-spec-reporter',
'karma-jsdom-launcher',
'karma-coverage',
'karma-chrome-launcher',
"karma-phantomjs-launcher",
'karma-htmlfile-reporter'
],
files: [
'test/**/*.spec.ts'
],
coverageReporter: {
webpackMiddleware: {
stats: "errors-only"
},
dir: 'build/coverage/',
reporters: [
{ type: 'html' },
{ type: 'text' },
{ type: 'text-summary' }
]
},
// list of files to exclude
exclude: [
],
preprocessors: {
'test/**/*.spec.ts':["webpack","coverage"]
},
webpack:webpackConfig,
reporters: ['spec','progress','html'],
htmlReporter: {
outputFile: 'tests/units.html',
// Optional
pageTitle: 'Unit Tests',
subPageTitle: 'A sample project description',
groupSuites: true,
useCompactStyle: true,
useLegacyStyle: true
},
// web server port
port: 9876,
colors: true,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}
test1
import { DBCONFIG } from './../src/config/db.config';
import { CONEXION } from './../src/config/database/mongo';
import { expect } from 'chai';
describe("#DATABASE",()=>{
it("Esta conectado",()=>{
CONEXION("hola",DBCONFIG.MONGO_URL_LOCAL)
.then(()=>{
expect(1).to.be("1");
})
.catch((e)=>{
expect(1).to.be(e);
})
})
});
test2
import { expect } from 'chai';
describe("#User",()=>{
it("use2r",()=>{
expect(1).to.equal("1");
})
})
When I run mocha + webpack with mocha-webpack, there is no problem the tests are running.
package.json
"test-server": "mocha-webpack --timeout 1000 --webpack-config config/webpack/webpack.test.js test/**/*.spec.ts",
"test":"karma start"
When I do it from karma depending on which browser I use to display the messages I throw similar errors, when I throw it with jsdom or PhantomJS I throw the following
require is not defined o Cannot find
Looking in git, the only answer that solved the problem, is to put in the processors of karma the following.
'test/**/*.spec.ts':["webpack","coverage"]
It is the same way and I have varied, but the error continues.
I'm using Plunker Editor to show demos. My demo is an angular 2 project with my opensource npm package called ng-ui-application which is already published.
It worked when I bound the npm package in the config.js.
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'ng-ui-application': {
main: './index.js',
defaultExtension: 'js'
}
}
});
The problem is when I published an update of ng-ui-application on https://www.npmjs.com/, the Plunker Editor doesn't get this update.
I found a solution...
I changed in config.js
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
'ng-ui-application': {
main: './index.js',
defaultExtension: 'js'
}
}
By this :
map: {
'app': './src',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript#2.0.2/lib/typescript.js',
'ng-ui-application': 'npm:ng-ui-application/index.js' <--- here !
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
<--- I deleted it !
}