mhaagens / react-mobx-react-router4-boilerplate

React, React-Router 4, MobX and Webpack 2-boilerplate with async routes.
560 stars 137 forks source link

You may need an appropriate loader to handle this file type. (help) #18

Closed yjose closed 7 years ago

yjose commented 7 years ago

I use your new configuration for my old application and I have this problem when I run " npm run start "

ERROR in ./src/index.js
Module parse failed: /media/youssouf/66AEA57AAEA54381/Work/editorv2/src/index.js Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
| 
| ReactDOM.render(
|   <AppContainer>
|     <App />
|   `</AppContainer>,`

I update your config to be like this :

var path = require("path");
var webpack = require("webpack");
var precss = require("precss");
var autoprefixer = require("autoprefixer");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    entry: [
        "react-hot-loader/patch",
        "babel-polyfill",
        "whatwg-fetch",
        "webpack-dev-server/client?http://localhost:8888",
        "webpack/hot/only-dev-server",
        "./src/index.js"
    ],
    resolve: {
        extensions: ['.js', '.jsx']
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/",
        filename: "app.[hash].js"
    },
    devtool: "eval",
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                include: path.join(__dirname, "src"),
                loader: "babel-loader",
                query: {
                    presets: [
                        [
                            "es2015", {
                                modules: false
                            }
                        ],
                        "stage-0",
                        "react"
                    ],
                    plugins: [
                        "react-hot-loader/babel",
                        "transform-async-to-generator",
                        "transform-decorators-legacy",
                        'transform-class-properties',
                        'react-html-attrs',
                        'lodash', 
                        [
                            'lodash', {
                                'id': 'semantic-ui-react'
                            }
                        ]
                    ]
                }
            }, {
                test: /\.scss$/,
                loader: "style-loader!css-loader!postcss-loader!resolve-url-loader!sass-loader?sourceMap"
            }, {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: ["file-loader?hash=sha512&digest=hex&name=assets/images/[hash].[ext]", "image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false"]
            }
        ]
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({hash: false, template: "./src/index.html", title: 'PicsRush Photo Editor'}),
        //new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /nb/),
        new webpack.LoaderOptionsPlugin({
            test: /\.scss$/,
            debug: true,
            options: {
                postcss: function() {
                    return [precss, autoprefixer];
                },
                context: path.join(__dirname, "src"),
                output: {
                    path: path.join(__dirname, "dist")
                }
            }
        })
    ]
};
mhaagens commented 7 years ago

Can you try

query: {
   babelrc: false,
   ...
}
mhaagens commented 7 years ago

@yjose Did you figure it out?