我已经通过许多线程来解决此问题，但是不幸的是，没有一个正在工作。 我正在尝试像这样导入react-share
TextBox但是我收到
的错误 import {
FacebookShareButton,
GooglePlusShareButton,
TwitterShareButton,
WhatsappShareButton,
FacebookIcon,
TwitterIcon,
WhatsappIcon
} from 'react-share';
"use strict";
require('./../../../assets/styles/components/thread.less');
//var reactShare = require('react-share');
var React = require('react');
var ReactDOM = require('react-dom');
var Fluxxor = require('fluxxor');
var _ = require("lodash");
var FluxMixin = Fluxxor.FluxMixin(React);
var StoreWatchMixin = Fluxxor.StoreWatchMixin;
我已经安装了babel并执行了线程中给出的所有建议，但无法解决问题
作为参考，我的webpack.config.js文件如下所示：
syntaxerro: import declarations may only appear at top level of a module
我的package.json文件看起来像这样
var path = require("path");
var webpack = require("webpack");
module.exports = {
cache: true,
devtool: 'hidden-source-map',
entry: {
microaudio: "./reactFrontend/js/main",
notsupported: "./reactFrontend/js/notsupported",
sharerender: "./reactFrontend/js/shareRender",
privacyDeclaration: "./reactFrontend/js/privacyDeclaration",
legal: "./reactFrontend/js/legal"
},
output: {
path: path.join(__dirname, "dist"),
publicPath: "frontend/",
filename: "[name].js",
chunkFilename: "[chunkhash].js"
},
node: {
fs: "empty"
},
module: {
loaders: [{
test: /\.jsx$/,
loader: "jsx-loader?insertPragma=React.DOM&harmony"
}, {
test: /\.json/,
loader: "json-loader"
}, {
test: /\.less/,
loader: "style-loader!css-loader!autoprefixer-loader?{browsers:['last 3 versions', 'Android >= 4', 'safari >= 4']}!less-loader"
}, {
test: /\.tpl/,
loader: "ejs-loader"
}, {
test: /\.woff(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.woff2(\?\S*)?$/,
loader: "url-loader?prefix=/font&limit=1000&mimetype=application/font-woff"
}, {
test: /\.ttf(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.eot(\?\S*)?$/,
loader: "file-loader?prefix=/font"
}, {
test: /\.svg(\?\S*)?$/,
loader: "url-loader?limit=1000000&mimetype=image/svg+xml"
}, {
test: /\.png$/,
loader: "url-loader?limit=10000&mimetype=image/png"
}, {
test: /\.gif$/,
loader: "url-loader?limit=10000&mimetype=image/gif"
}, {
test: /\.jpg$/,
loader: "url-loader?limit=10000&mimetype=image/jpeg"
}]
},
plugins: [
//setup momentjs context to only include languages we do need!
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|en/)
],
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
alias: {
av: __dirname + "/reactFrontend/js/vendors/aurora/aurora",
"ogg.js": __dirname + "/reactFrontend/js/vendors/aurora/ogg",
"vorbis.js": __dirname + "/reactFrontend/js/vendors/aurora/vorbis"
}
},
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
}
};
我也创建了一个.babelrc文件（通常在webpack.config.js所在的根目录中）
{
"name": "audiyoh-frontend",
"version": "1.0.0",
"main": "./src/js/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"test-martin-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=martin&& gulp test-bs",
"test-robert-local": "SET NODE_ENV=development&& SET NODE_APP_INSTANCE=robert&& gulp test-bs",
"wds": "webpack-dev-server --https --inline --hot --color --history-api-fallback"
},
"author": "atroo GbR",
"contributors": [
{
"name": "Martin Foerster",
"email": "martin@atroo.de"
},
{
"name": "Robert Krüger",
"email": "robert@atroo.de"
}
],
"license": "UNLICENSED",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"blanket": "^1.1.6",
"bootstrap-webpack": "0.0.3",
"chai": "^3.3.0",
"coveralls": "^2.11.2",
"css-loader": "^0.7.0",
"ejs-loader": "^0.1.0",
"file-loader": "^0.8.1",
"glob": "^4.3.5",
"gulp": "^3.8.6",
"gulp-debug": "^2.1.2",
"gulp-mocha": "^2.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rimraf": "^0.2.0",
"gulp-spawn-mocha": "^2.0.1",
"gulp-util": "^3.0.0",
"i18next-resource-store-loader": "0.0.2",
"imports-loader": "^0.6.5",
"json-loader": "^0.5.1",
"jsx-loader": "^0.12.2",
"less": "^2.2.0",
"less-loader": "^2.0.0",
"mocha": "^2.1.0",
"mocha-lcov-reporter": "^0.0.1",
"node-notifier": "^4.4.0",
"run-sequence": "^1.1.5",
"selenium-webdriver": "^2.47.0",
"sha1": "^1.1.1",
"socket.io": "^1.3.7",
"style-loader": "^0.8.3",
"url-loader": "^0.5.5",
"wasm-loader": "1.1.0",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.14.1",
"webpack-merge": "^4.1.4",
"webpack-stream": "^3.0.1",
"worker-loader": "^0.5.7",
"yargs": "^3.26.0"
},
"dependencies": {
"autoprefixer-loader": "^3.2.0",
"av": "^0.4.9",
"backbone": "^1.1.2",
"backbone.wreqr": "^1.3.1",
"bootstrap": "^3.3.2",
"color": "^0.11.3",
"crypto-js": "^3.1.2-5",
"exports-loader": "^0.6.3",
"flux": "^2.0.0",
"fluxxor": "^1.7.3",
"get-user-media-promise": "^1.1.1",
"i18next-client": "^1.7.7",
"jquery": "^2.1.1",
"keymirror": "~0.1.0",
"less-to-json-loader": "^1.0.0",
"lodash": "^3.8.0",
"modernizr": "^3.3.1",
"modernizr-loader": "0.0.4",
"moment": "^2.9.0",
"node-uuid": "^1.4.2",
"normalize.css": "^3.0.2",
"object-assign": "^1.0.0",
"ogg.js": "^0.1.0",
"promise": "^6.1.0",
"react": "^0.14.5",
"react-bootstrap": "^0.21.2",
"react-dom": "^0.14.5",
"react-router": "^2.3.0",
"react-tools": "^0.12.2",
"scriptjs": "^2.5.8",
"socket.io-client": "^1.4.5",
"tunajs": "^0.4.5",
"velocity-animate": "^1.2.1",
"vorbis.js": "^0.1.1",
"web-audio-daw": "^2.3.1"
}
}
我是ReactJs的新手，所以我对这种要求不太了解。请帮忙！谢谢
答案 0 :(得分：0)
jsx-loader has been deprecated for at least 3 years.
如果您需要babel-loader和过去三年中实现的其他ES6语法才能正常工作，则需要对import使用JSX文件。