Module parse failed: Unexpected token

babel / babel-loader

📦 Babel loader for webpack

MIT License

4.82k stars 450 forks source link

Module parse failed: Unexpected token #746

Open evik89 opened 5 years ago

evik89 commented 5 years ago

webpack-dev-server Version: webpack 4.27.1 Entrypoint main = bundle.js [25] ./main.js 58 bytes {0} [built] [26] ./App.js 320 bytes {0} [built] [failed] [1 error] [27] ./Home.js 245 bytes {0} [built] [failed] [1 error]

13 hidden modules
I get the following error:

ERROR in ./App.js 188:13 Module parse failed: Unexpected token (188:13) You may need an appropriate loader to handle this file type. | //console.log(filter); | if(isHomePage) | return | return ( | <div className={App ${isDetailPage ? 'detail-page' : 'landing-page'}}

@ ./main.js 1:0-27 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js

ERROR in ./Home.js 34:8 Module parse failed: Unexpected token (34:8) You may need an appropriate loader to handle this file type. | render() { | return ( | <div className={App}> | hello |

@ ./main.js 2:0-29 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js i ?wdm?: Failed to compile.

My Webconfig

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

module.exports = {
    entry: './main.js',
    output: { path: __dirname, filename: 'bundle.js' },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                include: [
                    path.resolve(__dirname, 'path/to/imported/file/dir')
                ],
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

My package.json

  "dependencies": {
    "missing": "0.0.1",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-router-dom": "^4.3.1",
    "webpack-dev-server": "^3.1.10"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC"
}

What am I missing here?

existentialism commented 5 years ago

<div className={App ${isDetailPage ? 'detail-page' : 'landing-page'} }>

Do you mean:

<div className={`App ${isDetailPage ? 'detail-page' : 'landing-page'}`}>

evik89 commented 5 years ago

yes the actual code:

if (isHomePage)
          return <Home />;
    return (      
      <div className={`App ${isDetailPage ? 'detail-page' : 'landing-page'} `}>

<div className={App ${isDetailPage ? 'detail-page' : 'landing-page'} }>

Do you mean:

<div className={`App ${isDetailPage ? 'detail-page' : 'landing-page'}`}>

loganfsmyth commented 5 years ago

 path.resolve(__dirname, 'path/to/imported/file/dir')

means it will only compile files in a folder called path/to/imported/file/dir, which I'd assume does not exist.

evik89 commented 5 years ago

 path.resolve(__dirname, 'path/to/imported/file/dir')
means it will only compile files in a folder called path/to/imported/file/dir, which I'd assume does not exist. i tried 'root','app-folder','./app.js' neither one works

loganfsmyth commented 5 years ago

What if you remove the include block entirely?

evik89 commented 5 years ago

What if you remove the include block entirely?

It's giving me error for parsing css