Javascript React CKeditor Jest错误:SyntaxError:无法在模块外部使用导入语句
应用程序是使用带弹出的CreateReactApp创建的。 根据这份文件,我正在尝试使用CKeditor 几个小时后,它工作正常,但更多的时间试图修复测试中的错误却没有成功! 当我运行Javascript React CKeditor Jest错误:SyntaxError:无法在模块外部使用导入语句,javascript,reactjs,webpack,jestjs,ckeditor,Javascript,Reactjs,Webpack,Jestjs,Ckeditor,应用程序是使用带弹出的CreateReactApp创建的。 根据这份文件,我正在尝试使用CKeditor 几个小时后,它工作正常,但更多的时间试图修复测试中的错误却没有成功! 当我运行npm测试时出现以下错误: node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10 import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
npm测试时
出现以下错误:
node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js:10
import Editor from '@ckeditor/ckeditor5-core/src/editor/editor';
SyntaxError: Cannot use import statement outside a module
1 | import React, { useState, useEffect } from 'react';
2 | import CKEditor from '@ckeditor/ckeditor5-react';
> 3 | import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
my package.json:
{
"private": true,
"dependencies": {
"@babel/core": "7.4.3",
"@ckeditor/ckeditor5-alignment": "^16.0.0",
"@ckeditor/ckeditor5-basic-styles": "^16.0.0",
"@ckeditor/ckeditor5-dev-utils": "^12.0.5",
"@ckeditor/ckeditor5-dev-webpack-plugin": "^8.0.5",
"@ckeditor/ckeditor5-editor-classic": "^16.0.0",
"@ckeditor/ckeditor5-essentials": "^16.0.0",
"@ckeditor/ckeditor5-heading": "^16.0.0",
"@ckeditor/ckeditor5-link": "^16.0.0",
"@ckeditor/ckeditor5-list": "^16.0.0",
"@ckeditor/ckeditor5-paragraph": "^16.0.0",
"@ckeditor/ckeditor5-react": "^2.0.0",
"@ckeditor/ckeditor5-theme-lark": "^16.0.0",
"@svgr/webpack": "4.1.0",
"@typescript-eslint/eslint-plugin": "1.6.0",
"@typescript-eslint/parser": "1.6.0",
"axios": "^0.18.1",
"babel-eslint": "10.0.1",
"babel-jest": "24.7.1",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.2",
"babel-preset-react-app": "^8.0.0",
"base64url": "^3.0.1",
"blueimp-load-image": "^2.21.0",
"case-sensitive-paths-webpack-plugin": "2.2.0",
"cleave.js": "^1.4.10",
"css-loader": "2.1.1",
"dotenv": "6.2.0",
"dotenv-expand": "4.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"file-loader": "3.0.1",
"fingerprintjs2": "^2.1.0",
"flow-typed": "^2.5.2",
"fs-extra": "7.0.1",
"google-map-react": "^1.1.4",
"history": "^4.9.0",
"html-react-parser": "^0.10.0",
"html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"lint-staged": "^8.1.5",
"mini-css-extract-plugin": "0.5.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
"pnp-webpack-plugin": "1.2.1",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-normalize": "7.0.1",
"postcss-preset-env": "6.6.0",
"postcss-safe-parser": "4.0.1",
"qs": "^6.7.0",
"raw-loader": "^3.1.0",
"rc-slider": "^8.6.9",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.0",
"react-avatar-editor": "^11.0.7",
"react-dates": "^20.2.2",
"react-dev-utils": "^9.0.0",
"react-dom": "^16.8.6",
"react-modal": "^3.8.1",
"react-onclickoutside": "^6.8.0",
"react-places-autocomplete": "^7.2.1",
"react-redux": "^7.0.3",
"react-responsive": "^6.1.2",
"react-router-dom": "^5.0.0",
"react-select": "^2.4.3",
"react-slick": "^0.24.0",
"react-test-renderer": "^16.8.6",
"react-truncate": "^2.4.0",
"react-with-direction": "^1.3.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"resolve": "1.10.0",
"sass-loader": "7.1.0",
"semver": "6.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "0.23.1",
"stylelint": "^10.0.1",
"stylelint-config-standard": "^18.3.0",
"terser-webpack-plugin": "1.2.3",
"url-loader": "1.1.2",
"webpack": "4.29.6",
"webpack-dev-server": "3.2.1",
"webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "4.2.0"
},
"husky": {
"hooks": {
"pre-commit": "npm run test && flow"
}
},
"proxy": "https://getrenty-qa.devopsready.tools",
"scripts": {
"start": "node scripts/start.js",
"precommit": "npm test && lint-staged",
"build": "node scripts/build.js",
"test:lint:js": "eslint src/**/*.{js,jsx}",
"test:lint:scss": "stylelint --config=.stylelintrc \"**/*.scss\"",
"test:lint": "npm run test:lint:js && npm run test:lint:scss",
"test:unit": "node scripts/test.js --env=jsdom",
"test": "npm run test:lint && npm run test:unit",
"test:ci": "node scripts/test.js --env=jsdom --ci --reporters=default --reporters=jest-junit --coverage",
"flow": "flow"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-config-react-app": "^4.0.1",
"eslint-loader": "^2.2.1",
"eslint-plugin-flowtype": "^3.11.1",
"eslint-plugin-import": "^2.18.0",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.0.1",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^1.6.1",
"flow-bin": "^0.98.0",
"jest-junit": "^7.0.0",
"prettier": "^1.17.0",
"redux-devtools": "^3.5.0",
"redux-devtools-extension": "^2.13.8",
"stylelint-scss": "^3.6.1",
"husky": "^2.1.0"
},
"jest": {
"coverageReporters": [
"text",
"cobertura"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"modulePaths": [
"src/"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
},
"babel": {
"presets": [
"react-app"
]
}
}
{
“私人”:没错,
“依赖项”:{
“@babel/core”:“7.4.3”,
“@ckeditor/ckeditor5对齐方式”:“^16.0.0”,
“@ckeditor/ckeditor5基本样式”:“^16.0.0”,
“@ckeditor/ckeditor5 dev-utils”:“^12.0.5”,
“@ckeditor/ckeditor5开发网页包插件”:“^8.0.5”,
“@ckeditor/ckeditor5编辑器经典版”:“^16.0.0”,
“@ckeditor/ckeditor5 essentials”:“^16.0.0”,
“@ckeditor/ckeditor5标题“^16.0.0”,
“@ckeditor/ckeditor5链接”:“^16.0.0”,
“@ckeditor/ckeditor5列表”:“^16.0.0”,
“@ckeditor/ckeditor5段落”:“^16.0.0”,
“@ckeditor/ckeditor5 react”:“^2.0.0”,
“@ckeditor/ckeditor5主题云雀”:“^16.0.0”,
“@svgr/webpack”:“4.1.0”,
“@typescript eslint/eslint插件”:“1.6.0”,
“@typescript eslint/parser”:“1.6.0”,
“axios”:“^0.18.1”,
“babel eslint”:“10.0.1”,
“巴别塔笑话”:“24.7.1”,
“巴别塔加载器”:“8.0.5”,
“名为资产导入的巴别塔插件”:“^0.3.2”,
“巴别塔预设反应应用程序”:“^8.0.0”,
“base64url”:“^3.0.1”,
“blueimp加载映像”:“^2.21.0”,
“区分大小写的路径网页包插件”:“2.2.0”,
“cleave.js”:“^1.4.10”,
“css加载器”:“2.1.1”,
“dotenv”:“6.2.0”,
“dotenv扩展”:“4.2.0”,
“酶”:“^3.9.0”,
“酶-适配器-反应-16”:“^1.12.1”,
“文件加载器”:“3.0.1”,
“JS2”:“^2.1.0”,
“流类型”:“^2.5.2”,
“fs额外”:“7.0.1”,
“谷歌地图反应”:“^1.1.4”,
“历史记录”:“^4.9.0”,
“html反应分析器”:“^0.10.0”,
“html网页包插件”:“4.0.0-beta.5”,
“身份obj代理”:“3.0.0”,
“is wsl”:“^1.1.0”,
“笑话”:“24.7.1”,
“jest环境jsdom十四”:“0.1.0”,
“玩笑解决”:“24.7.1”,
“jest watch typeahead”:“0.3.0”,
“lint staged”:“^8.1.5”,
“迷你css提取插件”:“0.5.0”,
“时刻”:“^2.24.0”,
“节点sass”:“^4.12.0”,
“优化css资产网页包插件”:“5.0.1”,
“pnp网页包插件”:“1.2.1”,
“POSTSS flexbugs修复程序”:“4.1.0”,
“postcss加载程序”:“3.0.0”,
“邮政编码规范化”:“7.0.1”,
“邮政编码预设环境”:“6.6.0”,
“POSTSS安全解析器”:“4.0.1”,
“qs”:“^6.7.0”,
“原始加载程序”:“^3.1.0”,
“rc滑块”:“^8.6.9”,
“反应”:“^16.8.6”,
“react应用程序polyfill”:“^1.0.0”,
“反应化身编辑器”:“^11.0.7”,
“反应日期”:“^20.2.2”,
“反应开发工具”:“^9.0.0”,
“react dom”:“^16.8.6”,
“反应模式”:“^3.8.1”,
“单击外部进行反应”:“^6.8.0”,
“反应位置自动完成”:“^7.2.1”,
“react redux”:“^7.0.3”,
“反应灵敏”:“^6.1.2”,
“反应路由器dom”:“^5.0.0”,
“反应选择”:“^2.4.3”,
“反应平滑”:“^0.24.0”,
“反应测试渲染器”:“^16.8.6”,
“反应截断”:“^2.4.0”,
“按方向反应”:“^1.3.0”,
“redux”:“^4.0.1”,
“redux thunk”:“^2.3.0”,
“解决”:“1.10.0”,
“sass加载器”:“7.1.0”,
“semver”:“6.0.0”,
“光滑转盘”:“^1.8.1”,
“样式加载器”:“0.23.1”,
“stylelint”:“^10.0.1”,
“stylelint配置标准”:“^18.3.0”,
“简洁的网页包插件”:“1.2.3”,
“url加载器”:“1.1.2”,
“网页包”:“4.29.6”,
“网页包开发服务器”:“3.2.1”,
“网页包清单插件”:“2.0.4”,
“workbox网页包插件”:“4.2.0”
},
“哈士奇”:{
“挂钩”:{
“预提交”:“npm运行测试和流”
}
},
“代理”:https://getrenty-qa.devopsready.tools",
“脚本”:{
“开始”:“节点脚本/start.js”,
“预调试”:“npm测试和lint阶段化”,
“build”:“节点脚本/build.js”,
“test:lint:js”:“eslint src/***.{js,jsx}”,
“test:lint:scss”:“stylelint--config=.stylelintrc\”***.scss\”,
“测试:lint”:“npm运行测试:lint:js&&npm运行测试:lint:scss”,
“test:unit”:“节点脚本/test.js--env=jsdom”,
“测试”:“npm运行测试:lint&&npm运行测试:单元”,
“test:ci”:“节点脚本/test.js--env=jsdom--ci--reporters=default--reporters=jest-junit--coverage”,
“流”:“流”
},
“eslintConfig”:{
“扩展”:“反应应用程序”
},
“浏览者”:{
“生产”:[
">0.2%",
“没有死”,
“不是全部”
],
“发展”:[
“上一个chrome版本”,
“上一个firefox版本”,
“最后1个safari版本”
]
},
“依赖性”:{
“eslint”:“^5.16.0”,
“eslint配置airbnb”:“^17.1.0”,
“eslint配置美观”:“^4.2.0”,
“eslint配置反应应用程序”:“^4.0.1”,
“eslint加载程序”:“^2.2.1”,
“eslint插件流类型”:“^3.11.1”,
“eslint插件导入”:“^2.18.0”,
“eslint-plugin-jsx-a11y”:“^6.2.3”,
“eslint插件更漂亮”:“^3.0.1”,
“eslint插件反应”:“^7.14.2”,
“eslint插件反应挂钩”:“^1.6.1”,
“流动箱”:“^0.98.0”,
“jest junit”:“^7.0.0”,
“更漂亮”:“^1.17.0”,
“redux开发工具”:“^3.5.0”,
“redux开发工具扩展”:“^2.13.8”,
“stylelint scss”:“^3.6.1”,
“哈士奇”:“^2.1.0”
},
“笑话”:{
“搬运工”:[
“文本”,
“科贝图拉”
],
“CollectionCoverage from”:[
“src/***.{js,jsx,ts,tsx}”,
“!src/***.d.ts”
],
“设置文件”:[
“react应用程序polyfill/jsdom”
],
“SetupFileAfterEnv”:[
“/src/setupTests.js”
],
“测试匹配”:[
“/src/**/\\\\\\\\/**.{js,jsx,ts,tsx}”,
“/src/***.{spec,test}.{js,jsx,ts,tsx}”
],
“测试环境”:“jest environment jsdom 14”,
“转变”:{
“^.+\.(js | jsx | ts | tsx)$”:“/node_modules/babel jest”,
“^.+\.css$”:“/config/jest/cstransform.js”,
“^(?。*\(js | jsx | ts | tsx | css | json)$):”/config/jest/fileTransform.js”
},
“transformIgnorePatterns”:[
“[/\\\\\]节点单元模块[/\\\\].+\\.(js | jsx | ts | tsx)$”,
“^.+\\.mod
import React, { useState, useEffect } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import styles from './rtf.module.scss';
const editorConfig = {
plugins: [
Essentials,
Alignment,
Bold,
Italic,
Paragraph,
Heading,
Link,
List,
],
toolbar: [
'heading',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'alignment',
],
};
type Props = {
initialData?: string,
onSave: Function,
title?: string,
savingStatus?: string,
};
const Editor = ({ initialData, onSave, title, savingStatus }: Props) => {
const [editorData, setData] = useState(initialData || '');
useEffect(() => {
setData(initialData);
}, [initialData]);
const handleChange = (event, editor) => {
const data = editor.getData();
setData(data);
};
const resetEdit = () => {
setData(initialData);
};
const handleSave = () => {
onSave(editorData);
};
return (
<div>
<div className={styles.title_row}>
<h5 className={styles.title}>{title}</h5>
<button
type="button"
className={`button_small ${styles.to_right}`}
onClick={resetEdit}
>
Reset
</button>
<button
type="button"
className="button_green_dark_short"
onClick={handleSave}
>
Save
</button>
</div>
<div className={styles.saving_status}>{savingStatus}</div>
<div className={styles.rtf_wrapper}>
<CKEditor
config={editorConfig}
editor={ClassicEditor}
onChange={handleChange}
data={editorData}
/>
</div>
</div>
);
};
Editor.defaultProps = {
initialData: '',
title: '',
savingStatus: '',
};
export default Editor;
{
moduleNameMapper: {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
},
transformIgnorePatterns: ['/node_modules/(?!@ckeditor)/.+\\.js$']
}
jest: {
configure(config) {
config.moduleNameMapper = {
'^~/(.*)': '<rootDir>/src/$1',
'\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
};
...
config.transformIgnorePatterns = ['/node_modules/(?!@ckeditor)/.+\\.js$'];
return config;
},
},