Tag Archives: es6

[Solved] SyntaxError: Cannot use import statement outside a module

SyntaxError: Cannot use import statement outside a module

Problem: When debugging js code with vs code, I get “SyntaxError: Cannot use import statement outside a module”

import express from "express";

const app=express();
app.listen(9527,function(){
    console.log(9527);
})

Solution:

npm init -y
Add type(“type”:”module”,) in package. json

{
  "name": "serve",
  "version": "1.0.0",
  "description": "Server-side interface building for js phase projects",
  "main": "index.js",
   "type":"module",
  "scripts": {
    "node":"node app.js",
    "dev":"nodemon ./app.js"
  },
  "keywords": [
    "shop"
  ],
  "author": "wff",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.3",
    "nodemon": "^2.0.15"
  }
}

The terminal runs node index.js or vs Code F5 can be run.

Canvas generates poster todataurl with error [Solved]

WeChat official account H5 page, creating the idea of two-dimensional code posters with parameters.

1. Generate QR code with parameters
use the plug-in phpqrcode, which has been recorded in previous articles. No more details.

2. Generate canvas canvas
draw the poster content through cavans first. Then convert the canvas picture to Base64 encoding using todataurl. Then, copy the base64 encoding to the picture and display it.

var canvas = document.getElementById("myCanvas");
var imgBase64=canvas.toDataURL("image/png");
                var oimg = document.getElementById("img");
                oimg.src=imgBase64;

3. The displayed pictures can be stored by long-pressing save
note: all elements in the canvas need to be loaded, otherwise an error will be reported in todataurl
therefore, crossorigin = “anonymous” should be added to the attributes of all pictures or documents

errorThrown:ReferenceError: data is not defined [How to Solve]

Ajax request

error:function(jqXHR,textStatus,errorThrown)
{
	console.log(jqXHR.); 
	console.log(textStatus);
	console.log(errorThrown);
}

The error function has an error of errorthrown: referenceerror: data is not defined
after investigation, the problem is caused by datatype

datatype:“json”

Change to

datatype:“text”

Problem solving.

[Solved] Parsing error: The keyword ‘import‘ is reserved

Q: parsing error: the keyword ‘import’ is reserved

Answer:
analysis:
this is because we have not configured parseroptions in the configuration file. Eslintrc to specify the language version and module type
add the following configuration in. Eslintrc

{
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module"
  }
}

[How to Solve] TypeError: XXX is read-only

The reason is that the defined variable is defined by const, and it should be changed to let

Anti card limited Drag Based on react draggable drag

Recently, a project requirement is to click the question mark to display the prompt window. The window is fixed, does not scroll with the scroll bar, and can be dragged within the scope. It does not affect the lower form input.

I think of using anti card combined with react draggable. Record the implementation code here:

import React from 'react';
import { Modal, Button, Card, Icon } from 'antd';
import Draggable from 'react-draggable';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            cardShow: false,
            disabled: true,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 }, // Initialize drag boundary
        };
        this.draggleRef = React.createRef();
    }

    onStart = (event, uiData) => {
        const { clientWidth, clientHeight } = window.document.documentElement;
        const targetRect = this.draggleRef.current.getBoundingClientRect();
        this.setState({
            // Set the drag boundary to limit the dragging distance from the top, bottom, left and right of the initial position, the following setting is draggable in the browser window
            // If the page has a fixed display header, it must be draggable below the header, you can set top: -targetRect.top + uiData.y + height of the header.
            bounds: {
                left: -targetRect.left + uiData.x,
                right: clientWidth - 300,
                top: -targetRect.top + uiData.y,
                bottom: clientHeight - (targetRect.bottom - uiData.y),
            },
        });
    };

    onClickShow = () => {
        this.setState({
            cardShow: true,
        })
    }

    onClickClose = () => {
        this.setState({
            cardShow: false,
            bounds: { left: 0, top: 0, bottom: 0, right: 0 },
        })
    }

    render() {
        const {disabled, bounds, cardShow} = this.state;
        return (
            <div style={{width: '100%'}}>
                <Draggable
                    disabled={disabled}
                    bounds={bounds}
                    onStart={(event, uiData) => this.onStart(event, uiData)}
                >
                    <div ref={this.draggleRef}>
                        {cardShow &&
                        <Card
                            title={
                                <div
                                    style={{
                                        width: '100%',
                                        cursor: 'move',
                                    }}
                                    onMouseOver={() => {
                                        this.setState({
                                            disabled: false,
                                        });
                                    }}
                                    onMouseOut={() => {
                                        this.setState({
                                            disabled: true,
                                        });
                                    }}
                                    onFocus={() => {}}
                                    onBlur={() => {}}
                                >
                                    {'Title'}
                                </div>
                            }
                            extra={
                                <span onClick={() => this.onClickClose()}>
                                    <Icon type={'close'} style={{fontSize:'16px'}}/>
                                </span>
                            }
                            style={{ width: 300, position: 'fixed', zIndex: 999 }}>
                            <p>Conetent</p>
                        </Card>}
                    </div>
                </Draggable>
                <span >{'Help'}</span><Icon onClick={() => this.onClickShow()} type="question-circle" />
            </div>
        );
    }

}

Configure eslint in vscode to automatically repair and save the code

In the file & gt; > > > Preferences Settings> > > > > Search for eslint

* in Settings. Json and add the following code to the outer braces.

   "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "eslint.autoFixOnSave" : true,
    },

After the file is saved, you can fix the code automatically.

Click the button to use in the react project window.open Methods open a new page and click the data again

Problem description
When use the react to do background management program, there is a demand, a list can be according to the conditions of the query, there is a printing function, print is the data of the current query conditions, click on the print button, use the window. The open () method to open the new page, and set the position of open the window, to print the data in a new window display, the real printing function is realized in a new window.

at this time there is a problem, to print the data I am existing in localstorage, when the first open new window, click on the print button to print the data is correct, but if I open the window, not closing new from the previous page to change the terms of the query, click print again, open the last failed to shut down the page, the page does not automatically refresh, also won’t get the latest localstorage inside the value of the printed data is not new.

When I wrote window.location.href directly in componentDidMount, since componentDidMount is the life cycle that executes after the page has been loaded, and the page refresh cycle will be infinite, so this method does not work. I want to try to add a judgment condition, such as whether a value exists in localStorage is equal, but after the value in localStorage changes, both pages will change, so it will always be equal.
Finally, I changed an idea and found a way to listen for changes in the value of localStorage. In a new window, I can listen for changes in the value of localStorage stored in the previous page. If there is any change, I will perform the operation of refreshing the page.

window.addEventListener("storage", function(e) {
    console.log(e)
    window.location.reload()
});

Different files in the same domain will detect changes in stored values. Same file, store value changes, cannot be monitored.
the operation to store the data can be placed at the click of the print button to open the new page, so that the data in the new window does not change until after the click
For this problem, there should be other solutions, thank you added.

Module build failed: error: cannot find module ‘node sass’ error

NPM run dev error message is as follows:

Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-c221866a","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/Index.vue 4:14-424 13:3-17:5 14:22-432
 @ ./src/page/Index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/addPerson.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-485da622","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/addPerson.vue 4:14-428 13:3-17:5 14:22-436
 @ ./src/page/addPerson.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/callPolice.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-31d77fd3","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/callPolice.vue 4:14-429 13:3-17:5 14:22-437
 @ ./src/page/callPolice.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
 
 error  in ./src/page/passenger.vue
 
Module build failed: Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.sassLoader (E:\trip_user_ui\node_modules\sass-loader\lib\loader.js:46:72)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-9a9a079a","
scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vux-loader/src/style-loader.js!./node_modules/vu
e-loader/lib/selector.js?type=styles&index=0!./src/page/passenger.vue 4:14-428 13:3-17:5 14:22-436
 @ ./src/page/passenger.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js

says you can’t find node-sass, so just think install a node-sass. But the result is not!! Enter the command NPM install node-sass –save-dev

error as follows:

gyp info it worked if it ends with ok
gyp verb cli [ 'C:\\Program Files\\nodejs\\node.exe',
gyp verb cli   'E:\\trip_user_ui\\node_modules\\node-gyp\\bin\\node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library=' ]
gyp info using node-gyp@3.8.0
gyp info using node@10.15.0 | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` failed Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed  python2 { Error: not found: python2
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed   stack:
gyp verb `which` failed    'Error: not found: python2\n    at getNotFoundError (E:\\trip_user_ui\\node_modules\\which\\which.js:13:12)\n    at F (E:\\trip_user_ui
\\node_modules\\which\\which.js:68:19)\n    at E (E:\\trip_user_ui\\node_modules\\which\\which.js:80:29)\n    at E:\\trip_user_ui\\node_modules\\which\\which.js:8
9:16\n    at E:\\trip_user_ui\\node_modules\\isexe\\index.js:42:5\n    at E:\\trip_user_ui\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.
js:154:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb `which` failed Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed  python { Error: not found: python
gyp verb `which` failed     at getNotFoundError (E:\trip_user_ui\node_modules\which\which.js:13:12)
gyp verb `which` failed     at F (E:\trip_user_ui\node_modules\which\which.js:68:19)
gyp verb `which` failed     at E (E:\trip_user_ui\node_modules\which\which.js:80:29)
gyp verb `which` failed     at E:\trip_user_ui\node_modules\which\which.js:89:16
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\index.js:42:5
gyp verb `which` failed     at E:\trip_user_ui\node_modules\isexe\windows.js:36:5
gyp verb `which` failed     at FSReqWrap.oncomplete (fs.js:154:21)
gyp verb `which` failed   stack:
gyp verb `which` failed    'Error: not found: python\n    at getNotFoundError (E:\\trip_user_ui\\node_modules\\which\\which.js:13:12)\n    at F (E:\\trip_user_ui\
\node_modules\\which\\which.js:68:19)\n    at E (E:\\trip_user_ui\\node_modules\\which\\which.js:80:29)\n    at E:\\trip_user_ui\\node_modules\\which\\which.js:89
:16\n    at E:\\trip_user_ui\\node_modules\\isexe\\index.js:42:5\n    at E:\\trip_user_ui\\node_modules\\isexe\\windows.js:36:5\n    at FSReqWrap.oncomplete (fs.j
s:154:21)',
gyp verb `which` failed   code: 'ENOENT' }
gyp verb could not find "python". checking python launcher
gyp verb could not find "python". guessing location
gyp verb ensuring that file exists: C:\Python27\python.exe
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at PythonFinder.failNoPython (E:\trip_user_ui\node_modules\node-gyp\lib\configure.js:484:19)
gyp ERR! stack     at PythonFinder.<anonymous> (E:\trip_user_ui\node_modules\node-gyp\lib\configure.js:509:16)
gyp ERR! stack     at E:\trip_user_ui\node_modules\graceful-fs\polyfills.js:282:31
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:154:21)
gyp ERR! System Windows_NT 10.0.16299
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\trip_user_ui\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libs
ass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd E:\trip_user_ui\node_modules\node-sass
gyp ERR! node -v v10.15.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
Build failed with error code: 1
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.10.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@4.10.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zsm\AppData\Roaming\npm-cache\_logs\2019-01-14T11_48_54_017Z-debug.log

NPM install previously reported a similar error.

search for CNPM install node-sass –save
may be useful, but CNPM needs to be installed first. So NPM I, CNPM is another error.

so use NPM install – g CNPM, registry=https://registry.npm.taobao.org, from taobao mirror the download, then CNPM download success.

enter CNPM install node-sass –save. NPM run Dev is finally running!!

ERROR in static/js/app.xxxxxxx.js from UglifyJs Unexpected token: operator (＞)

:
vue family barrel USES the vue-qrcode-directive component to generate the two-dimensional code in the project. There is no error in using NPM run dev in the development process. To NPM run build packaging ERROR, such as the ERROR in the static/js/app f1ecb9a5673e78cc442b. Js from UglifyJs Unexpected token: operator (& gt;) [./~/_vue – [email protected] @ vue – qrcode – directive/index, js: 4, 0] [static/js/app. F1ecb9a5673e78cc442b. Js: 17412]

analysis reason :
weback default webpack. Optimize. UglifyJsPlugin cannot compress es6 code files. Along the way, we can simply convert es6 code to ES5 using Babel.
the reason must still be on webpack.config.js. After repeated observations. The problem occurred in the loader configuration, where an item was configured for js file transformation.

solution : (the same problem occurs in _quill-image-drop-module, _vue-qrcode-directive)

module: { rules: [ { test: /\.js$/, loader: "babel-loader", include: [ resolve("src"), resolve("test"), resolve( "node_modules/[email protected]@quill-image-drop-module" ), resolve( "node_modules/[email protected]@vue-qrcode-directive" ) ], } ] }

This entry was posted in How to Fix and tagged ECMAScript5678, es6, front end, html, javascript, javascript/TypeScript.. behavior (behavior layer), node.js, vue.js on 2020-10-01 by Robins.

ProgrammerAH

Programmer Guide, Tips and Tutorial