ES6無法導入Webpack中的JSX模塊

出於某種原因，我似乎無法讓Webpack從.JSX文件導入模塊。每當我嘗試運行Webpack時，我都會收到以下消息：ES6無法導入Webpack中的JSX模塊

ERROR in ./src/Example.jsx 
Module parse failed: /path/to/project/src/Example.jsx Unexpected token (6:12) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (6:12)

事情是; ./src/Example.jsx中沒有太多內容。事實上，這是所有它包含：

import React from 'react'; 


export default class Example extends React.Component{ 
    render() { 
    return (<h2>Hello world!!</h2>); 
    } 
};

的WebPack沒有任何問題，當我在我的index.jsx文件中的類，但是當我移動到它自己的文件的WebPack突然couldn身影了該怎麼辦。我試圖通過使用babel-plugin-transform-react-jsx來解決這個問題，但這似乎並沒有解決我的問題。我需要做什麼才能讓Webpack正確轉換/解析.JSX文件？

/*的package.json */

{ 
    ..., 
    "dependencies": { 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "1.13.1" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "eslint": "^3.1.1", 
    "eslint-plugin-react": "^5.2.2", 
    "jest-cli": "^13.2.3", 
    "react-addons-test-utils": "^15.2.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "scripts": { 
    "build": "webpack -p", 
    "dev": "webpack-dev-server --port 9999", 
    "start": "npm run build && python -m SimpleHTTPServer 9999", 
    "test": "jest --verbose --coverage --config jest.config.json" 
    } 
}

/* webpack.config.js */

var path = require('path'); 
var webpack = require('webpack'); 

var BUILD_DIR = path.resolve(__dirname, 'build/'); 
var SOURCE_DIR = path.resolve(__dirname, 'src/'); 

module.exports = { 
    entry: SOURCE_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /[^\.spec]+\.jsx$/, 
     include: SOURCE_DIR, 
     loader: 'babel' 
     } 
    ] 
    } 
};

/* .baberc */

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

/* SRC/index.jsx */

import React from 'react' 
import ReactDOM from 'react-dom'; 

import Example from './Example' 


ReactDOM.render(<Example />, document.getElementById('floor-plan'));

來源

2016-07-22 Mathijs

我收到了你的設置與這些少量的修改工作。我將問題隔離到您的測試屬性。

var path = require('path'); 
var webpack = require('webpack'); 

var BUILD_DIR = path.resolve(__dirname, 'build/'); 
var SOURCE_DIR = path.resolve(__dirname, 'src/'); 

module.exports = { 
    entry: SOURCE_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: SOURCE_DIR, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     }, 
     } 
    ] 
    } 
};

來源

2016-07-22 15:29:05 Meow

非常感謝！這有助於 – Mathijs

@Meow FYI：[SO Markdown * does *]（http://stackoverflow.com/documentation/proposed/changes/69952?draftId=58400）支持語法高亮顯示。 – ArtOfCode

原因可能是 import Example from './Example'在index.jsx

的WebPack將此視爲js進口，而不是jsx。

嘗試

import Example from './Example.jsx'

來源

2016-07-22 15:17:55

ES6無法導入Webpack中的JSX模塊

回答

相關問題