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模块

回答

相关问题