VueJS: Uncaught SyntaxError: Unexpected token import - vue.js

thanks for reading this. I am building a web app using vuejs and flask as server. Do you guys have any recommendation for why it does not recognize "import"? im trying to use this.$http.get . why it is not recognizing it? thanks in advance
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.component( 'button-labels', {
props : ['labelbtn'],
template : `<div class="button-container"><button class="button-app" v-for="label in labelbtn" v-on:click="clickHandler(label)" >{{label.label}}</button></div>`,
methods : {
clickHandler : function(label) {
if (label.id === 1)
{
this.$emit('event_child', 'search-template')
}
},
}
})
Vue.component( 'search-template', {
props: ['searchdata'],
data : {
entries : []
},
template : `<div><input class="searchBar"><div class="response-list"><button class="entries"></button></div>
<audio class="audio" controls></audio><button class="button-back" v-on:click="backHandler"> Return</button></div>` ,
methods : {
backHandler : function(){
this.$emit('event_child', 'button-labels');
},
},
created : function(){
this.$http.get('https://google.com', (data) => {
console.log( data );
})
.error((err) => console.log(err))
},
})
new Vue({
el: '#app',
data : {
labels : [
{ id : 1, label : "Search" } , { id : 2, label: "Categories" }, { id : 3, label: "Favorites" }, {id : 4, label: "Settings"}
],
currentView : "button-labels",
},
methods : {
eventChild : function(label)
{
this.currentView = label;
}
}
})
this is my package.json
{
"scripts": {
"transpile-es2015": "babel src -d lib"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-runtime": "^6.0.14",
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"vue-hot-reload-api": "^1.2.1",
"vue-html-loader": "^1.0.0",
"vue-loader": "^7.0.1",
"webpack": "^1.12.3",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"bootstrap": "^3.3.5",
"vue-resource": "^0.1.17",
"vue-router": "^0.7.5",
"vue": "^1.0.7"
}
}

Related

vuejs token error when implementing auth0

I'm new to vuejs and have implemented this example:
Auth0 vuejs and api example
It works just fine, but I run into some issues when trying to merge the vuejs code to my own project.
When loading the page requiring authentication, I get this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure property 'getAccessTokenSilently' of 'Object(...)(...)' as it is undefined.
The code for my page, looks like this:
<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "#/services/message.service";
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
const message = ref("");
const getMessage = async () => {
const { getAccessTokenSilently } = useAuth0();
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
export default {
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none'))
{
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
};
</script>
<template>
<Layout>
<p id="page-description">
<span
>This page retrieves a <strong>protected message</strong> from an
external API.</span
>
<span
><strong
>Only authenticated users can access this page.</strong
></span
>
</p>
<CodeSnippet title="Protected Message" :code="message" />
</Layout>
</template>
I've tried the example from the documentation provided here enter link description here
<script>
import Layout from "../../../layouts/main.vue";
//import { getProtectedResource } from "#/services/message.service";
//import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const { loginWithRedirect } = useAuth0();
return {
login: () => {
loginWithRedirect();
}
};
},
components: {
Layout
},
data() {
return {
};
},
methods: {
rightcolumn() {
if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) {
document.querySelector('.layout-rightside-col').classList.remove('d-none')
} else {
document.querySelector('.layout-rightside-col').classList.add('d-none')
}
}
}
}
</script>
But still receives this error:
index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure
property 'loginWithRedirect' of 'Object(...)(...)' as it is undefined.
at setup (index.vue?4db4:11:1)
I'm registrering the plugin this way in main:
createApp(App)
.use(store)
.use(router)
.use(VueApexCharts)
.use(BootstrapVue3)
.component(VueFeather.type, VueFeather)
.use(Maska)
.use(Particles)
.use(i18n)
.use(
createAuth0({
domain: 'xyz.auth0.com',
client_id: 'secret',
redirect_uri: 'http://localhost:4040/callback',
audience: 'https://audience',
})
)
.use(vClickOutside).mount('#app');
My package.json file:
{
"name": "vuejs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#auth0/auth0-vue": "^1.0.2",
"#ckeditor/ckeditor5-build-classic": "^32.0.0",
"#ckeditor/ckeditor5-vue": "^2.0.1",
"#fullcalendar/bootstrap": "^5.10.1",
"#fullcalendar/core": "^5.10.1",
"#fullcalendar/daygrid": "^5.10.1",
"#fullcalendar/interaction": "^5.10.1",
"#fullcalendar/list": "^5.10.1",
"#fullcalendar/timegrid": "^5.10.1",
"#fullcalendar/vue3": "^5.10.1",
"#j-t-mcc/vue3-chartjs": "^1.2.0",
"#popperjs/core": "^2.11.2",
"#simonwep/pickr": "^1.8.2",
"#vue-leaflet/vue-leaflet": "^0.6.1",
"#vueform/multiselect": "^2.3.1",
"#vueform/slider": "^2.0.8",
"#vueform/toggle": "^2.0.1",
"#vuelidate/core": "^2.0.0-alpha.34",
"#vuelidate/validators": "^2.0.0-alpha.26",
"#zhuowenli/vue-feather-icons": "^5.0.2",
"aos": "^2.3.4",
"apexcharts": "^3.33.0",
"axios": "^0.27.2",
"bootstrap": "^5.2.1",
"bootstrap-vue-3": "^0.3.3",
"chart.js": "^3.7.0",
"click-outside-vue3": "^4.0.1",
"core-js": "^3.6.5",
"echarts": "^5.3.0",
"feather-icons": "^4.28.0",
"firebase": "^9.6.6",
"highlight.js": "^11.4.0",
"leaflet": "^1.7.1",
"lottie-web": "^5.8.1",
"maska": "^1.5.0",
"moment": "^2.29.1",
"node-sass": "6.0.1",
"particles.vue3": "^1.40.2",
"prismjs": "^1.26.0",
"sass-loader": "^10.2.1",
"simplebar": "^5.3.6",
"simplebar-vue3": "^0.1.5",
"sweetalert2": "^11.4.32",
"swiper": "^6.8.4",
"vue": "3.2.36",
"vue-router": "^4.0.15",
"vue-draggable-next": "^2.1.1",
"vue-easy-lightbox": "^1.3.0",
"vue-feather": "^2.0.0",
"vue-flatpickr-component": "^9.0.5",
"vue-i18n": "^9.2.0-beta.15",
"vue-prismjs": "^1.2.0",
"vue3-apexcharts": "^1.4.1",
"vue3-count-to": "^1.1.2",
"vue3-echarts": "^1.0.4",
"vue3-google-map": "^0.8.3",
"vue3-quill": "^0.2.6",
"vuevectormap": "^1.0.8",
"vuex": "^4.0.2",
"yarn": "^1.22.17"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Using #auth0/auth0-vue has a limitation. useAuth0 must be used in the setup hook. Read the documentation for info.
To add login to your application, use the loginWithRedirect function that is exposed on the return value of useAuth0, which you can access in your component's setup function.
<script>
import { ref } from "vue";
import { useAuth0 } from "#auth0/auth0-vue";
export default {
setup() {
const message = ref("");
const { getAccessTokenSilently } = useAuth0();
const getMessage = async () => {
const accessToken = await getAccessTokenSilently();
const { data, error } = await getProtectedResource(accessToken);
if (data) {
message.value = JSON.stringify(data, null, 2);
}
if (error) {
message.value = JSON.stringify(error, null, 2);
}
};
getMessage();
return {
message
}
},
...
}
</script>
<template>...</template>

Rails Vue2 Jest SyntaxError: Cannot use import statement outside a module

I have a Rails application with Vue and when I installed Jest and tried to run my Menu_Filter.test.js test, I got this error. I tried many solutions, but nothing worked.
Error:
My package.json in which I configured Jest:
{
"name": "immomapper-frontend",
"version": "0.1.0",
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.3",
"#vue/composition-api": "^1.2.4",
"#vueform/multiselect": "^2.2.0",
"#vueform/slider": "^2.0.5",
"babel": "^6.23.0",
"babel-jest": "^27.2.5",
"jest": "^27.2.5",
"leaflet": "^1.7.1",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"vue2-leaflet": "^2.7.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#vue/babel-preset-app": "^4.5.14",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0",
"vue-jest": "^3.0.7",
"webpack-dev-server": "^3"
},
"scripts": {
"test": "jest"
},
"jest": {
"roots": [
"app/javascript/spec"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$'": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"testEnvironment": "jsdom"
}
}
My test file:
import { mount, shallowMount } from '#vue/test-utils'
import Filter from '../components/Menu_filter'
test('Filter exists', () => {
const wrapper = mount(Filter);
expect(wrapper.is(Filter)).toBe(true)
})
Lastly, my babel.config.js:
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: auto,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'#babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
I don't use Typescript, I did add the yarn add babel-core#bridge --dev, I used transform, I also tried to change the jest version to 26.x.x, I added type="module" to my vue component... I don't know what the problem is.

"Maximum call stack size exceeded" in Nuxt/Content

I've tried setting up a very simple nuxt content example, but even for that I'm running into an Maximum call stack size exceeded error when opening localhost:port/
pages/_slag.vue:
<template>
<nuxt-content :document="doc" />
</template>
<script>
export default {
async asyncData({ $content, params }) {
const doc = await $content(params.slug || 'index');
return { doc }
}
};
</script>
content/index.md:
# Hello #nuxtjs/content!
Super fast HMR!
nuxt-config.js:
export default {
vue: {
config: {
// https://vue-loader.vuejs.org/options.html#cachedirectory-cacheidentifier
},
},
target: 'static',
buildModules: [
],
modules: [
'#nuxt/content'
],
content: {
},
build: {
},
generate: {
concurrency: 2000,
}
}
package.json:
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#nuxtjs/tailwindcss": "^4.2.1",
"#nuxt/content": "1.14.0",
"core-js": "^3.18.0",
"nuxt": "^2.15.8",
"vue-inline-svg": "^2.0.0"
},
"devDependencies": {
"#vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.0.5",
"jest": "^27.0.5",
"postcss": "^8.3.5",
"vue-jest": "^3.0.4"
},
"optionalDependencies": {
"fsevents": "^2.3.2"
}
What am I doing wrong?
You are not fetching the data you query for. Update your $content to be as follows: $content(params.slug || 'index').fetch()

Vue3 Testing Library - vue-i18n not loading text

I can't seem to get the following example to work with vue3 and testing library.
https://github.com/testing-library/vue-testing-library/blob/main/src/tests/translations-vue-i18n.js
I've even tried to modify the example like so to get $t to be recognized by injecting messages into a mock but no luck.
Does anyone have an example that works with vue 3?
Here are the details ...
Translations.spec.js
import '#testing-library/jest-dom'
import {render, fireEvent} from '#testing-library/vue'
import Vuei18n from 'vue-i18n'
import Translations from '#/components/Translations'
const messages = {
en: {
Hello: 'Hello!',
message: {
hello: 'Hello!'
}
},
ja: {
Hello: 'こんにちは',
message: {
hello: 'こんにちは'
}
},
}
test('renders translations', async () => {
const {queryByText, getByText} = render(Translations, {
global: {
mocks: {
$t: (messages) => messages
}
}
}, vue => {
// Let's register and configure Vuei18n normally
vue.use(Vuei18n)
const i18n = new Vuei18n({
locale: 'ja',
fallbackLocale: 'ja',
messages,
})
// Notice how we return an object from the callback function. It will be
// merged as an additional option on the created Vue instance.
return {
i18n,
}
})
//expect(getByText('Hello!')).toBeInTheDocument()
//await fireEvent.click(getByText('Japanese'))
expect(getByText('こんにちは')).toBeInTheDocument()
//expect(queryByText('Hello!')).not.toBeInTheDocument()
})
Translations.vue
<template>
<div>
<h2>{{ $t("Hello") }}</h2>
<h2>{{ $t("message.hello") }}</h2>
<button #click="switchLocale('en')">English</button>
<button #click="switchLocale('ja')">Japanese</button>
</div>
</template>
<script>
export default {
name: 'Translations',
methods: {
switchLocale(locale) {
this.$i18n.locale = locale
},
},
}
</script>
package.json
{
"name": "mc",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^3.0.0-4",
"#popperjs/core": "^2.9.2",
"bootstrap": "^5.0.2",
"core-js": "^3.6.5",
"es6-promise": "^4.2.8",
"vue": "^3.1.4",
"vue-hotjar": "^1.4.0",
"vue-i18n": "^9.1.6",
"vue-loader": "^16.2.0",
"vue-router": "^4.0.10",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/core": "^7.14.8",
"#babel/preset-env": "^7.14.8",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/vue": "^6.4.2",
"#vue/cli-plugin-babel": "^4.5.13",
"#vue/cli-plugin-eslint": "^4.5.13",
"#vue/cli-plugin-router": "^4.5.13",
"#vue/cli-plugin-unit-jest": "^4.5.13",
"#vue/cli-plugin-vuex": "^4.5.13",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.1.4",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/test-utils": "^2.0.0-rc.9",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.0.0",
"flush-promises": "^1.0.2",
"prettier": "^2.3.2",
"typescript": "^4.3.5",
"vue-jest": "^5.0.0-alpha.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Error
FAIL tests/unit/Translations.spec.js
● renders translations
TestingLibraryElementError: Unable to find an element with the text: こんにちは. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
<body>
<div>
<div>
<h2>
Hello
</h2>
<h2>
message.hello
</h2>
<button>
English
</button>
<button>
Japanese
</button>
</div>
</div>
</body>
47 | //await fireEvent.click(getByText('Japanese'))
48 |
> 49 | expect(getByText('こんにちは')).toBeInTheDocument()
| ^
50 |
51 | //expect(queryByText('Hello!')).not.toBeInTheDocument()
52 | })
I had the same problem and solved it like this:
I am using the next version of #vue/test-utils and vue-jest ("#vue/test-utils": "^2.0.0-rc.16" + "vue-jest": "^5.0.0-alpha.10").
I created a file called jest.init.js (u can call it anything u like)
import { config } from '#vue/test-utils';
import translations from '#/locales/en';
config.global.mocks = {
$t: (msg) => translations[msg],
};
and then initiate it as setup file in jest.config.js
module.exports = {
...
setupFiles: [
'./tests/unit/jest.init.js',
],
...
};
This answer is for everyone stumbling across that question when using Composition API where there's no global $t to mock.
I've solved it by exporting a function createConfiguredI18n in src/plugins/i18n.ts:
import { createI18n, I18nOptions } from 'vue-i18n'
import deDE from '#/locales/de-DE.json'
import enUS from '#/locales/en-US.json'
// Type-define 'de-DE' as the master schema for the resource
type MessageSchema = typeof deDE
export function createConfiguredI18n(locale: string, fallbackLocale: string) {
return createI18n<I18nOptions, [MessageSchema], 'de-DE' | 'en-US'>({
locale: locale || 'en-US',
fallbackLocale: fallbackLocale || 'en-US',
messages: {
'de-DE': deDE,
'en-US': enUS,
},
})
}
export const i18n = createConfiguredI18n('de-DE', 'en-US')
Then in the unit test you can do the following to initialize vue-i18n with your translations:
import {flushPromises, mount, VueWrapper} from '#vue/test-utils'
import {nextTick} from 'vue'
import {createConfiguredI18n} from '#/plugins/i18n'
...
describe('SubjectUnderTest', () => {
it('should display translation "FooBar"', async () => {
const locale = 'de-DE'
const fallbackLocale = 'en-US'
const wrapper = await createWrapper({locale, fallbackLocale})
...
}
async function createWrapper(options: {
locale: string
fallbackLocale: string
}): Promise<VueWrapper> {
const i18n = createConfiguredI18n(options.locale, options.fallbackLocale)
const wrapper = mount(sut, {
global: {
plugins: [i18n],
},
})
await nextTick()
await flushPromises()
return wrapper
}
}
If you don't want the translations but instead mock them and check for the keys only, you can do the following in your unit test instead:
import {flushPromises, mount, VueWrapper} from '#vue/test-utils'
import {nextTick} from 'vue'
import {i18n} from '#/plugins/i18n'
...
i18n.global.t = (key) => key
describe('SubjectUnderTest', () => {
it('should display translation for key "foo.bar"', async () => {
const wrapper = await createWrapper()
...
}
async function createWrapper(): Promise<VueWrapper> {
const wrapper = mount(sut, {
global: {
plugins: [i18n],
},
})
await nextTick()
await flushPromises()
return wrapper
}
}

Webpack 2 bundle typescript files with same namespace into a single file

I am new to Webpack and bundling typescript files into a single file. I got the following setup where I would like to achieve a single JS files with all my typescript bundled.
tsconfig.json:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"noEmitOnError": true,
"noImplicitAny": false,
"removeComments": true,
"sourceMap": true,
"target": "es6",
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"libs"
]
}
Webpack.config.js
var path = require("path");
const { CheckerPlugin } = require('awesome-typescript-loader');
const config = {
entry: {
Bootstrap: "./Bootstrapper.ts"
},
output: {
//output file naming conventions https://webpack.js.org/configuration/output/#output-filename when having more different configs with outputs
filename: "[name].bundle.js",
path: path.resolve(__dirname, "wwwroot/dist")
},
context: path.resolve(__dirname, "App"),
devtool: "inline-source-map",
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
}
]
},
plugins: [
new CheckerPlugin()
]
}
module.exports = config;
Bootstrap typescript file where I incude some node_module that actually work. JQuery works for instance. But If I try to use the class and subclasses that I use from a single namespace I walk against a wall.
Bootstrapper.ts
import * as $ from "jquery";
import * as Konva from "konva";
import * as SignalR from "#aspnet/signalr";
import * as ko from "knockout";
//How do I use these classes that are in different files
import App = Project.Web.Core.App;
$("document").ready(() => {
let app = new App();
alert("This works if I leave the App reference out!");
});
This is the App.ts that I try to use (import App = Project.Web.Core.App;)
namespace Project.Web.Core {
export class App {
pageId: number = 0;
pageRequestId: string = "";
//drawingManager = new Managers.KonvaDrawManager();
signalRmanager = new Managers.SignalRmanager("");
constructor() {
$("document").ready(() => {
this.pageId = $("#container").data("pageid");
this.pageRequestId = $("#container").data("pagerequestid");
this.signalRmanager.pageRequestId = this.pageRequestId;
//this.signalRmanager.setupSignalRConnection(this.drawingManager);
this.loadCanvasData();
});
window.onresize = () => {
//this.drawingManager.rescale();
};
window.onunload = () => {
this.signalRmanager.notifyPageUnloaded();
}
}
loadCanvasData() {
this.pageId = $("#container").data("pageid");
$.get({
dataType: "json",
url: `api/page/${this.pageId}/stage`,
success: (data: any) => {
//this.drawingManager.initializeStage(data);
},
complete: (data: any) => {
if (data.status === 200) {
this.signalRmanager.notifyPageLoaded();
}
}
});
}
}
}
Packages I use
{
"name": "Project.Web_core",
"private": true,
"version": "0.0.0",
"scripts": {
"build": "./node_modules/.bin/webpack -d",
"build:prod": "./node_modules/.bin/webpack -p",
"watch": "./node_modules/.bin/webpack --watch",
"dev": "./node_modules/.bin/webpack-dev-server"
},
"devDependencies": {
"#types/jquery": "^3.3.1",
"#types/knockout": "^3.4.53",
"#types/knockout.mapping": "^2.0.33",
"#types/webpack-env": "1.13.5",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.3",
"awesome-typescript-loader": "^5.0.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"event-source-polyfill": "0.0.12",
"json-loader": "0.5.7",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "0.20.1",
"typescript": "2.7.1",
"uglifyjs-webpack-plugin": "^1.2.4",
"webpack": "^4.5.0",
"webpack-cli": "^2.0.14",
"webpack-dev-middleware": "^3.1.2",
"webpack-dev-server": "^3.1.3",
"webpack-merge": "4.1.1"
},
"dependencies": {
"#aspnet/signalr": "^1.0.0-preview1-update1",
"es5-shim": "^4.5.10",
"es6-shim": "^0.35.3",
"jquery": "3.3.1",
"knockout": "^3.4.2",
"knockout-mapping": "^2.6.0",
"konva": "^2.0.2",
"watchpack": "^1.4.0"
}
}
I hope someone can help me out clearify my wrong way of thinking.
There are several things:
Typescript config, you can copy. With your types
change import export and remove namespace
export class App { ... }
import { App } from '/path/to/your/file';
class needs a destroyer
and finally in webpack.config.js you can set properties
entry: {
Bootstrap: "./Bootstrapper.ts",
namespace: "./path-to-your-namespace.ts",
anotherNamespace: "./path-to-your-anotherNamespace.ts"
},
resolve: {
extensions: ['.js', '.ts', '.json']
}