0

I'm trying to build my client with Webpack 3 and babel-loader, and for the life of me, I cannot figure out why it isn't parsing a simple JSX file. It fails immedaitely, giving me the message:

ERROR in ./Client.jsx
Module parse failed: /Users/bfitz/my-webapp/node_modules/babel-loader/lib/index.js??ref--0-0!/Users/bfitz/my-webapp/src/app/Client.jsx Unexpected token (40:8)
You may need an appropriate loader to handle this file type.
|
|     const app = (
|         <Provider store={STORE}>
|             <Router history={HISTORY}>
|                 {ROUTES}
 @ multi ./Client.jsx

Here's my webpack:

const { resolve, join } = require('path')
const webpack = require('webpack')

const assetsPath = join(__dirname, '..', 'public', 'assets')

const contextPath = resolve(__dirname, '..', 'src', 'app/')

module.exports = {
    entry: {
        client: ['./Client.jsx']
    },
    output: {
        path: assetsPath,
        filename: '[name].js',
        publicPath: '/assets/'
    },
    context: contextPath,
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: resolve(__dirname, '..', 'src', 'app/'),
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: ['react', 'es2015', 'stage-0']
                        }
                    }
                ]
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: '10000',
                            mimetype: 'application/font-woff',
                            name: '[name]-[hash:6].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: 'html-loader'
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    }
}

And on the server I have the hot reloading middleware set up like this:

const devClientWebpackConfig = require('../../webpack/webpack-dev-client')

APP.use(webpackMiddleware(webpack(devClientWebpackConfig)))

I am running Webpack 3.4.1 and Babel 6.25. Babel-loader is 7.1.1, and all the plugins are 6.24.1 as well.

Thanks in advance, this is giving me a massive headache.

roborovski
  • 111
  • 1
  • 9
  • If you comment out `include: resolve(__dirname, '..', 'src', 'app/'),` on `babel-loader` does it work? If so your `include` path is wrong. Are you also 100% sure you're actually using Webpack 3.x? Like not only do you have it installed via `package.json` but you're using it properly? If you just run the "webpack" command in the CLI it could use a globally installed version that isn't 3.x. – loganfsmyth Jul 31 '17 at 23:16
  • It might also help if you elaborate on your directory structure. Why the ".." in all your paths? Is your Webpack config not in the application root folder? – loganfsmyth Jul 31 '17 at 23:17
  • No, it's in a separate webpack/ folder. And I'm getting the same error message without the include statement. – roborovski Aug 01 '17 at 13:46
  • Okay. What about the Webpack version? Does it say Webpack 3 in the output from your build? Are you 100% sure you're actually using Webpack 3? – loganfsmyth Aug 01 '17 at 17:13

0 Answers0