I tried to use Vue3+ElementPlus in front-end development. It raised the error Module parse failed: Unexpected token (3:27),
error in ./src/web/login/Login.vue?vue&type=template&id=7ae6281f&ts=true
Module parse failed: Unexpected token (3:27)
File was processed with these loaders:
* ./node_modules/vue-loader/dist/templateLoader.js
* ./node_modules/vue-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
while running the following snippet codes provided by Input | Element Plus,
<template>
<el-input v-model="input" placeholder="Please input" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
I guess the error occurred at the line <script lang="ts" setup>. It compiled successfully and the input showed up after I changed it to <script scope setup>.
Question: Did I solve the problem?
I imported Element Plus in main.js,
import {createApp} from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/dark/css-vars.css'
import router from './web/router/Router.js'
const app = createApp(App)
app.use(ElementPlus, { locale: zhCn }) //size: 'small', zIndex: 3000,
app.use(router)
app.mount('#app')
Related
I am using Next.js App and trying to add jquery in the application but the issue is sometimes it work sometimes not, I already added it to top of the script.
import React from 'react';
import Head from 'next/head'
import Script from 'next/script';
const LoadCss = () => {
return ( <>
<Head>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"/>
</Head>
</>
);
}
export default LoadCss;
import React from 'react';
import Script from 'next/script';
const LoadJs = () => {
return ( <>
<Script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></Script>
<Script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></Script>
<Script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></Script>
</> );
}
export default LoadJs ;
and rest are loaded after this but still facing the issue.
I also try to load it via local folder but still no success.
Kinldy help
As per the official documentation,
defineProps and defineEmits are compiler macros only
usable inside <script setup>. They do not need to be
imported and are compiled away when <script setup> is
processed.
The problem definition
I'm not able to use defineProps and defineEmits in <script setup> without importing it. Please refer to the error screenshot attached below.
The vue code which I'm executing
<!-- HelloWorld.vue -->
<template>
<h1>{{ props.message }}</h1>
</template>
<script setup>
// import { defineProps } from 'vue';
const props = defineProps({
message: {
type: String,
required: true,
}
});
</script>
The environment details for reference:
vue
^3.2.6 (3.2.19)
vue-cli
#vue/cli 5.0.0-beta.4
node:
v14.16.1
npm
6.14.12
We can resolve this issue with one of the below solutions.
Create Vue project with Vite. Follow this link for more information.
yarn create vite <project-name> --template vue
Add below rules in your eslint configuration file. Follow this link for more information.
// .eslintrc.js
module.exports = {
extends: ['plugin:vue/base'],
rules: {
'vue/script-setup-uses-vars': 'error',
}
}
I'm messing around with next.js. I have a CSV with some data that I would like to display in a table. I'm getting a curious error when I try and import the csv.
./static/data.csv 1:66
Module parse failed: Unexpected token (1:66)
You may need an appropriate loader to handle this file type.
Character 66 is a space
When I remove the space, it errors on the next space. I'm not sure what I should be doing differently.
Code:
import Link from 'next/link';
import React from 'react';
import Head from 'next/head';
import Header from '../components/Header';
import NavBar from '../components/NavBar';
export default () => (
<div>
<title>Test</title>
<div class="title">
<p>
<img className="logo" src="/static/logo.png" />
<h1>Test</h1>
</p>
<br/>
</div>
<hr/>
</div>
)
const data = import('../static/data.csv');
Try this in next.config.js file
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
})
return config
}
}
I am looking at LevelUpTuts Meteor+React for everybody series.
I am having " Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. " error but I don't know where the problem is.
client/Main.html
<head>
<title>myResolutions</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="target-render"></div>
<script src="./App.js"></script
</body>
In my App.jsx
client/App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
render() {
return (
<h1> Hello World </h1>
)
}
}
if(Meteor.isClient){
Meteor.startup(function(){
ReactDOM.render(<App />,document.getElementById("render-target"));
});
}
It looks like in the html you have the id as "target-render", and in the javascript you have the id as "render-target". They need to match.
I guess the problem is coming from this line:
It shouldn't be here.
and I highly recommend you to use official Meteor tutorials instead of anything else:
https://www.meteor.com/tutorials/react/creating-an-app
First of, you need to import Meteor, import { Meteor } from 'meteor/meteor'; and then you don't need to include <script src="./App.js"></script> in your html. Note you have a typo on that line, you didn't properly close the script tag
I am using Angular 2.0.0-beta.0 with typescript. I was able to make ajax call with window['fetch'] out of the box without any problem (and I did not need to use any of the workarounds required in earlier versions.)
But I could not make the same ajax call working with angular2's http.
Here is the code to demo the issue. There are three files, index.html in the project folder, and boot.ts and app.component.ts in a subfolder called app.
app.component.ts:
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {Component} from 'angular2/core';
#Component({
selector: 'my-app',
providers: [HTTP_PROVIDERS],
template: '<h1>My First Angular 2 App</h1><button (click)="getTasks()">click</button>{{tasks}}'
})
export class AppComponent {
http: Http;
tasks = [];
constructor(http: Http) {
alert(http == null);
this.http = http;
}
getTasks(): void {
this.http.get('http://localhost:3000/tasks/norender');
//.map((res: Response) => res.json())
//it is important to have this subscribe call, since the
//request is only made if there is a subscriber
.subscribe(res => this.tasks = res);
}
}
boot.ts:
import {bootstrap} from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [HTTP_PROVIDERS]);
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. Load libraries -->
<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {emitDecoratorMetadata: true},
packages: {'app': {defaultExtension: 'ts'}}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
You should add an Http provider. You have two options:
On bootstrap:
import {HTTP_PROVIDERS} from 'angular2/http';
and:
ng.bootstrap(src.SomeComponent, [HTTP_PROVIDERS]);
On the component using the service:
import {HTTP_PROVIDERS} from 'angular2/http';
#Component({
...
providers: [HTTP_PROVIDERS]
...
})
I had a similar problem when I used an old version of the TypeScript compiler. I fixed it by changing the constructor argument from http: Http to #Inject(Http) http: Http. Of course, you need to import Inject to use it.
I'd try using the SystemJS release at https://code.angularjs.org/tools/system.js instead of the release at rawgithub.com.