1
我一直在用這種方式敲打頭幾個小時,而且我仍然無法解決問題。我想我已經嘗試了幾乎所有的實現,但我仍然沒有得到它的工作。使用webpack時無法解析文件,反應,反應 - dom
錯誤消息
ERROR in ./app/main.js
Module parse failed: /Users/DS/Code/tryouts/react-boilerplate/app/main.js Unexpected token (5:16)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:16)
at Parser.pp.raise (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.parseExprAtom (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12)
at Parser.pp.parseExprSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19)
at Parser.pp.parseMaybeUnary (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17)
at Parser.pp.parseExprOps (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19)
at Parser.pp.parseMaybeConditional (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19)
at Parser.pp.parseMaybeAssign (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19)
at Parser.pp.parseExprList (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:660:23)
at Parser.pp.parseSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:252:29)
這是我webpack.config.js
var webpack = require("webpack");
path = require('path');
var config = {
context: path.join(__dirname, 'app'),
entry: [
'./main.js',
],
output: {
path: path.join(__dirname, 'www'),
filename: 'bundle.js',
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /src\/.+.js$/,
exclude: /node_modules/,
// loaders: ['babel', 'babel-loader?presets[]=react,presets[]=es2015'],
loaders: ['babel', 'babel-loader']
}
],
},
resolveLoader: {
root: [
path.join(__dirname, 'node_modules'),
],
},
resolve: {
root: [
path.join(__dirname, 'node_modules')
],
},
};
module.exports = config;
這是我的package.json
{
"name": "react-boilerplate",
"version": "1.0.0",
"description": "This is just a simple folder structure template to use for my `React` projects.",
"keywords": [],
"scripts": {
"compile": "webpack",
"start": "node server.js",
"test": "jest"
},
"repository": {
"type": "git",
"url": "git+https://github.com/dantesolis/react-boilerplate.git"
},
"author": "D/S",
"license": "MIT",
"main": "index.js",
"bugs": {
"url": "https://github.com/dantesolis/react-boilerplate/issues"
},
"homepage": "https://github.com/dantesolis/react-boilerplate#readme",
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-react": "^6.11.1",
"jest-cli": "^13.2.3",
"webpack": "^1.13.1"
},
"jest": {
"scriptPreprocessor": "./tools/preprocessor.js",
"unmockedModulePathPatterns": [
"react"
],
"testPathDirs": [
"./src/",
""
]
},
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"express": "^4.14.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-router": "^2.6.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1"
}
}
Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('app')); <= OFFENDING LINE
App.js
import React from 'react';
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router';
import Counter from './Counter';
export default class App extends React.Component {
render() {
return (
<div>
<Counter />
</div>
);
}
}
感謝您的幫助
謝謝@Alexander T,與'主要的東西; js'是一個錯字。真正解決這個問題的是改變'test:/ \。js $ /,'。我以爲那只是測試文件?再次感謝我在最近的+3小時裏一直在盯着我的腦袋 – intercoder