在构建reactjs项目时无法弄清楚错误

时间：2017-03-18 01:32:11

标签： reactjs webpack babeljs

我按照教程设置了我的ReactJs项目，但由于我是新手，因此我无法解决错误。我无法弄清楚出现的语法错误，任何帮助赞赏。

的package.json 

{
  "name": "website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build" : "webpack",
    "start" : "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "babel-preset-react": "^6.23.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-react": "^6.23.0",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  }
}

webpack.config.js 

var HTMLWebpackPlugin=require('html-webpack-plugin')
var HTMLWebpackPluginCongif=new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename : 'index.html',
inject: 'body'
});
module.exports={
entry: __dirname + '/app/index.js',
module :{
    loaders:[
    {
        test:/\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }
    ]
},
output:{
    filename:'transformed.js',
    path:__dirname  +'/build'
},
plugins:[HTMLWebpackPluginCongif]
};

index.js 

var React=require('react');
var ReactDOM=require('react-dom');
var App=require('./components/App');

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

的index.html 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
 <title>My first Local App</title>
</head>
<body>
      <div id="app"></div>
</body>
</html>

App.js 

var React=require('react')
var ReactDOM=require('react-dom')

var x=React.createClass({
 render:function(){
    return <h1> Hello World </h1>;
}
});

module.exports={comp:x}

这是错误日志：

     > website@1.0.0 build C:\Users\sujit\Desktop\website
     > webpack

     Hash: b51693bc620c8a95d39b
     Version: webpack 2.2.1
     Time: 554ms
         Asset     Size  Chunks             Chunk Names
     transformed.js   3.4 kB       0  [emitted]  main
     index.html  3.02 kB          [emitted]
     [0] ./app/index.js 771 bytes {0} [built] [failed] [1 error]

     ERROR in   Error: Child compilation failed:
     Entry module not found: Error: Can't        
     resolve 'C:\Users\sujit\Desktop\website\app\index.html'    
      in 'C:\Users\sujit\Desktop\website':
      Error: Can't resolve 'C:\Users\sujit\Desktop\website\app\index.html' 
      in 'C:\Users\sujit\Desktop\website'

     - compiler.js:76
      [website]/[html-webpack-plugin]/lib/compiler.js:76:16

     - Compiler.js:280 Compiler.<anonymous>
       [website]/[webpack]/lib/Compiler.js:280:10

     - Compiler.js:480
       [website]/[webpack]/lib/Compiler.js:480:13

     - Tapable.js:138 next
       [website]/[tapable]/lib/Tapable.js:138:11

     - CachePlugin.js:62 Compiler.<anonymous>
       [website]/[webpack]/lib/CachePlugin.js:62:5

     - Tapable.js:142 Compiler.applyPluginsAsyncSeries
       [website]/[tapable]/lib/Tapable.js:142:13

     - Compiler.js:477
       [website]/[webpack]/lib/Compiler.js:477:10

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries
       [website]/[tapable]/lib/Tapable.js:131:46

     - Compilation.js:640 self.applyPluginsAsync.err
       [website]/[webpack]/lib/Compilation.js:640:19

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries
       [website]/[tapable]/lib/Tapable.js:131:46

     - Compilation.js:631 self.applyPluginsAsync.err
       [website]/[webpack]/lib/Compilation.js:631:11

     - Tapable.js:131 Compilation.applyPluginsAsyncSeries
       [website]/[tapable]/lib/Tapable.js:131:46

     - Compilation.js:626 self.applyPluginsAsync.err
       [website]/[webpack]/lib/Compilation.js:626:10

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [website]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:622 sealPart2
    [website]/[webpack]/lib/Compilation.js:622:9

  - Tapable.js:131 Compilation.applyPluginsAsyncSeries
    [website]/[tapable]/lib/Tapable.js:131:46

  - Compilation.js:570 Compilation.seal
    [website]/[webpack]/lib/Compilation.js:570:8

  - Compiler.js:474
    [website]/[webpack]/lib/Compiler.js:474:16

  - Tapable.js:225
    [website]/[tapable]/lib/Tapable.js:225:11

  - Compilation.js:472 _addModuleChain
    [website]/[webpack]/lib/Compilation.js:472:11

  - Compilation.js:365 Compilation.errorAndCallback
    [website]/[webpack]/lib/Compilation.js:365:4

  - Compilation.js:382 moduleFactory.create
    [website]/[webpack]/lib/Compilation.js:382:12

  - NormalModuleFactory.js:234
    [website]/[webpack]/lib/NormalModuleFactory.js:234:19

  - NormalModuleFactory.js:59 onDoneResolving
    [website]/[webpack]/lib/NormalModuleFactory.js:59:20

  - NormalModuleFactory.js:126
    [website]/[webpack]/lib/NormalModuleFactory.js:126:20

  - async.js:3694
    [website]/[async]/dist/async.js:3694:9

  - async.js:359
    [website]/[async]/dist/async.js:359:16

  - async.js:933 iteratorCallback
    [website]/[async]/dist/async.js:933:13

  - async.js:843
    [website]/[async]/dist/async.js:843:16

  - async.js:3691
    [website]/[async]/dist/async.js:3691:13



ERROR in ./app/index.js
Module build failed: SyntaxError: C:/Users/sujit/Desktop/website/app/index.js: Unexpected token (5:16)

  3 | var App=require('./components/App');
  4 |
> 5 | ReactDOM.render(<App />,document.getElementById('app'));
    |                 ^
  6 |

Child html-webpack-plugin for "index.html":

    ERROR in Entry module not found: Error: Can't resolve 'C:\Users\sujit\Desktop\website\app\index.html' in 'C:\Users\sujit\Desktop\website'

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! website@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the website@1.0.0 build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the website package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs website
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls website
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\sujit\Desktop\website\npm-debug.log`

1 个答案:

答案 0 :(得分：1)

您有两个错误。第一个来自html-webpack-plugin：

Entry module not found: Error: Can't resolve 'C:\Users\sujit\Desktop\website\app\index.html'

这意味着index.html目录中没有文件app。将您的index.html（现在位置）移动到app目录中。不可否认，错误太大而且噪音很大。

第二个错误是：

Module build failed: SyntaxError: C:/Users/sujit/Desktop/website/app/index.js: Unexpected token (5:16)

  3 | var App=require('./components/App');
  4 |
> 5 | ReactDOM.render(<App />,document.getElementById('app'));
    |                 ^
  6 |

您正在尝试使用JSX并且这不是有效的JavaScript，因此您需要使用babel进行转换。您已将babel-loader添加到webpack配置中，但未将babel-preset-react添加到配置中，这是转换JSX所必需的。您可以将它添加到webpack配置中的加载器，但只使用.babelrc文件更容易。

使用以下内容创建.babelrc文件（在package.json所在的同一目录中）：

{
  "presets": ["react"]
}

现在它将正确编译，您将在运行时遇到问题。在App.js导出组件为module.exports = { comp: x }时，这意味着当您导入它时，您将获得一个对象，并且可以使用App.comp访问React组件。但是因为那不是你想要的，所以直接导出它会更容易。

var React = require('react');

var App = React.createClass({
  render: function() {
    return <h1> Hello World </h1>;
  }
});

module.exports = App;

注意：我给它一个更好的名字（App而不是x）并直接导出它。 ReactDOM只需index.js ReactDOM.render即可使用Mar 18, 2017 3:57:47 PM com.gluonhq.charm.down.Platform <clinit> SEVERE: javafx.platform is not defined. Desktop will be assumed by default. Mar 18, 2017 3:57:48 PM com.gluonhq.impl.charm.a.c.a <clinit> SEVERE: null java.io.IOException: Private storage file not available at com.gluonhq.impl.charm.a.c.a.c(SourceFile:37) at java.util.Optional.orElseThrow(Optional.java:290) at com.gluonhq.impl.charm.a.c.a.<clinit>(SourceFile:37) at com.gluonhq.charm.glisten.application.MobileApplication.a(SourceFile:244) at com.gluonhq.charm.glisten.application.MobileApplication.start(SourceFile:211) at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863) at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326) at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295) at java.security.AccessController.doPrivileged(Native Method) at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294) at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95) at com.sun.glass.ui.win.WinApplication._runLoop(Native Method) at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.java:191) at java.lang.Thread.run(Thread.java:745) 。

相关问题
最新问题