jsx file parse error.

[coding-pangolin256]

Webpack Version: 1.15.0

Babel Core Version: 6.4.5

Babel Loader Version: 6.4.1

Windows 10

Current behavior:

ERROR in ./~/react-file-viewer/src/components/file-viewer.jsx Module parse failed: E:\code-bucket\university\node_modules\react-file-viewer\src\components\file-viewer.jsx Unexpected token (74:6) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (74:6)

webpack.config.js

{
var path = require('path');
module.exports = {
    entry: './client/js/app.js',
    output: {
        path: path.resolve('www/build/js'),
        filename: 'app.bundle.js',
        pathinfo: false
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react'],
                    plugins: ['transform-object-rest-spread']
                },
                exclude: /node_modules/
            },
            {
                test:   /\.css$/, // Transform all .css files required somewhere within an entry point...
                loaders: ['style-loader', 'css-loader', 'postcss-loader'] // ...with PostCSS
            }
        ]
    },
    postcss: function() {
        return [
          require('postcss-import')({ // Import all the css files...
            onImport: function (files) {
                files.forEach(this.addDependency); // ...and add dependecies from the main.css files to the other css files...
            }.bind(this) // ...so they get hot–reloaded when something changes...
          }),
          require('postcss-simple-vars')(), // ...then replace the variables...
          require('postcss-focus')(), // ...add a :focus to ever :hover...
          require('autoprefixer')({ // ...and add vendor prefixes...
            browsers: ['last 2 versions', 'IE > 8'] // ...supporting the last 2 major browser versions and IE 8 and up...
          }),
          require('postcss-reporter')({ // This plugin makes sure we get warnings in the console
            clearMessages: true
          })
        ];
    },
    target: "web", // Make web variables accessible to webpack, e.g. window
    stats: {
        colors: true
    },
    devtool: 'source-map'
};
}

package.json

{
  "name": "university",
  "version": "1.0.0",
  "description": "Sample Application with React and the Lightning Design System",
  "engines": {
    "node": "4.2.1"
  },
  "main": "server.js",
  "scripts": {
    "webpack": "webpack",
    "start": "node server.js",
    "bundle": "build-bundle src/apps/ -o dist -v 1.0.0"
  },
  "author": "Christophe Coenraets <ccoenraets@gmail.com> (http://coenraets.org/)",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^7.1.4",
    "babel-plugin-transform-object-rest-spread": "^6.3.13",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.14.2",
    "build-bundle": "^2.0.8",
    "compression": "^1.6.1",
    "connect-busboy": "0.0.2",
    "connect-multiparty": "^2.0.0",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "express": "^4.13.4",
    "file-loader": "^0.11.2",
    "filesize": "^3.5.10",
    "fine-uploader": "^5.15.0",
    "fontfaceobserver": "^2.0.13",
    "fs": "0.0.1-security",
    "fs-extra": "^4.0.2",
    "gulp": "^3.9.1",
    "json2csv": "^3.11.4",
    "loader-utils": "^1.1.0",
    "method-override": "^2.3.5",
    "moment": "^2.11.2",
    "multer": "^1.3.0",
    "mysql": "^2.14.1",
    "object.assign": "^4.0.4",
    "path": "^0.12.7",
    "pg": "^4.4.4",
    "postcss-cssnext": "^3.0.2",
    "postcss-focus": "^2.0.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.6",
    "postcss-reporter": "^5.0.0",
    "react-addons-css-transition-group": "^15.6.2",
    "react-addons-transition-group": "^15.6.2",
    "react-animate-height": "^0.10.3",
    "react-bootstrap": "^0.31.3",
    "react-csv": "^1.0.8",
    "react-file-download": "^0.3.5",
    "react-file-viewer": "^0.3.48",
    "react-fileupload": "^2.4.0",
    "react-fine-uploader": "^1.0.7",
    "react-html-table-to-excel": "^2.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^2.0.0-rc5",
    "react-strap": "0.0.1",
    "react-swipeable-views": "^0.12.8",
    "react-transition-group": "^2.2.1",
    "react-upload-file": "^2.0.0-beta.6",
    "reactstrap": "^4.8.0",
    "reactstrap-tether": "^1.3.4",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "sass": "^1.0.0-beta.2",
    "style-loader": "^0.18.2",
    "write": "^1.0.3",
    "write-file": "^1.0.0",
    "write-file-p": "^1.0.6"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "history": "^1.17.0",
    "postcss": "^6.0.12",
    "postcss-simple-vars": "^4.1.0",
    "react": "^0.14.9",
    "react-addons-linked-state-mixin": "^0.14.7",
    "react-dom": "^0.14.9",
    "react-onclickoutside": "^4.5.0",
    "react-router": "^1.0.3",
    "webpack": "^1.15.0"
  }
}

[hzoo]

Looks like you are trying to use a module in node_modules that is JSX?

university\node_modules\react-file-viewer\src\components\file-viewer.jsx

exclude: /node_modules/ but babel-loader is excluding it so it doesn't read it, you'll need to make an exception for that package in that regex (whitelist or blacklist)

[coding-pangolin256]

I tried exclude: /node_modules\/(?!(react-file-viewer)\/).*/ but new errors occurred.

ERROR in ./~/react-csv/index.js
Module build failed: ReferenceError: Unknown plugin "transform-class-properties" specified in "E:\\code-bucket\\university\\node_modules\\react-csv\\.babelrc" at 4, attempted to resolve relative to "E:\\code-bucket\
\university\\node_modules\\react-csv"
    at E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:158:20)
    at OptionManager.mergeOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:234:36)
    at OptionManager.init (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (E:\code-bucket\university\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:46:20)
    at Object.module.exports (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:163:20)
 @ ./client/js/CourseEnrollmentCard.js 35:16-36

ERROR in ./~/react-upload-file/dist/index.min.js
Module build failed: Error: Couldn't find preset "stage-0" relative to directory "E:\\code-bucket\\university\\node_modules\\react-upload-file"
    at E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
    at OptionManager.mergePresets (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
    at OptionManager.mergeOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
    at OptionManager.init (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (E:\code-bucket\university\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:46:20)
    at Object.module.exports (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:163:20)
 @ ./client/js/TeacherPresentationCard.js 21:23-51

ERROR in ./~/react-file-download/file-download.js
Module build failed: ReferenceError: [BABEL] E:\code-bucket\university\node_modules\react-file-download\file-download.js: Using removed Babel 5 option: E:\code-bucket\university\node_modules\react-file-download\.bab
elrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
    at Logger.error (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\logger.js:41:11)
    at OptionManager.mergeOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:220:20)
    at OptionManager.init (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
    at File.initOptions (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:212:65)
    at new File (E:\code-bucket\university\node_modules\babel-core\lib\transformation\file\index.js:135:24)
    at Pipeline.transform (E:\code-bucket\university\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:46:20)
    at Object.module.exports (E:\code-bucket\university\node_modules\babel-loader\lib\index.js:163:20)
 @ ./client/js/TeacherPresentationCard.js 37:19-49

[hzoo]

Yep reading the error it's trying to read the babelrc of node_modules node_modules\\react-csv\\.babelrc

[coding-pangolin256]

Should I copy the react-file-viewer module outside of node_modules?

[shystruk]

I have the same issue on MacOS. For windows, it works fine. https://github.com/shystruk/create-react-redux-app-structure/blob/master/webpack.config.js

entry: [
        'babel-polyfill', './app/app.jsx'
],
exclude: /node_modules\/(?!(app)\/).*/

[loganfsmyth]

I'm triaging old issues on babel-loader. Since this has been inactive for ages, I'm going to close it. Feel free to re-open if there's still something to discuss, but I'm assuming at this point it's been too long to address in a useful way.