Question

我有以下问题。我一如既往地在我的ASP.NET核心应用程序中设置了一个React，但现在我有一个恼人的问题，我不知道如何解决它。

当我尝试从'react'导入反应时，没有任何导入。在Chrome开发者工具中，我在sentene下面看到一个红色下划线：“import'反应来自'react';”。我试图将babel预设更改为另一个，更改webpack.config.js文件，但没有任何作用。也许你会有一个想法，哪里有一个bug？这是我的文件：

.babelrc

{
  "presets":["env", "react"]
}

的package.json

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "node-sass": "^4.7.2",
    "prop-types": "^15.6.1",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-dev-server": "^3.1.1"
  },
  "dependencies": {}
}

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
 devtool: 'source-map',
 entry: './ClientApp/index.js',
 output: {
    publicPath: "/js/",
    path: path.join(__dirname, "wwwroot", "js"),
    filename: "index-bundle.js"
 },
 devServer: {
  contentBase: "./dist"
 },
 module: {
   rules: [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      exclude: /node_modules/
  },
     {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
     },
       {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    limit: 50000,
                    name: 'assets/[name]_[hash].[ext]'
                }
            }
        ]
     },
     {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }
   ]
 },
 plugins: [
    new ExtractTextPlugin("./bundle.css")
  ]
}

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './Shared/styles/styles.scss';

import SignIn from './Sign/Shared/Components/Sign'

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {

        }
    }
    render(){
        <div>
            <SignIn />
        </div>
    }
}

ReactDOM.render(<App/>, document.getElementById('App'))

我很乐意为你提供帮助。

Answer 1

import 是es2015功能，我在.babelrc中看不到es2015预设。请参阅：https://www.npmjs.com/package/babel-preset-es2015

Answer 2

将预设添加到babel-loader中。以这种方式更改webpack.config.js。

{{1}}

Answer 3

试试这个：transform-es2015-modules-amd，这个插件将ES2015模块转换为异步模块定义（AMD）。在.babelrc文件中

 {
    presets: ["env", "react"],
    plugins: ["transform-es2015-modules-amd"]
 }

更多transform-es2015-modules-amd

Answer 4

如果您运行以下命令，也会发生这种情况：

节点index.js

代替

npm开始

另请参阅：npm start vs node app.js

无法导入react，Uncaught SyntaxError，Unexpected Identifier

4 个答案: