score:1

Accepted answer

Modify your babel-loader config:

  1. Change your test condition to /\.jsx?$/, so .jsx will be also transpiled.
  2. Add options with your react preset under(!) use (not as sibling to use)
  3. If you want to use Babel 6, then you need to install babel-loader v7 (npm i -D babel-loader@7) instead of v8 which is for Babel 7.

Then you should be fine. Here are the relevant parts of configs for Babel 6 (and 7 if you want to change) that worked for me:

Babel 6

webpack:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["react"]
          },
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
}

Babel 7

webpack:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.jsx?$/, 
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react"]
          }
        }
      }
    ]
  }
};

package.json:

{
  ...
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6"
  }
}

Hope, it helps.

score:1

It means your browser is serving un-transpiled or un-transformed code.

This issue comes when somehow those files are left out for the transpilation, please make sure those folders are included in webpack module section under a valid loader, for example - for typescript - ts-loader etc. Spent a lot of hours and got the fix.

You may use another compiler like babel for the same. It's up to you what suits your need.

 module: {
       rules: [
                    {
                        test: /\.ts|\.tsx?$/, loader: 'ts-loader', 
                        options: { onlyCompileBundledFiles: true, configFile: "testing.tsconfig.json", compilerOptions: {
                            noEmit: false, allowTsInNodeModules: false
                          }}, 
                        include: [
                            path.resolve(__dirname, "./src"),
                            path.resolve(__dirname, "./tests")
                          ],
                        exclude: [ 
                            path.resolve(__dirname, './automation/'),
                            path.resolve(__dirname, './src/types/testutils/'),
                            path.resolve(__dirname, './node_modules/')
                      ]
                    }
            ]
   }

Look at this include section:

 include: [
         path.resolve(__dirname, "./src"),
         path.resolve(__dirname, "./tests")
 ],

score:2

You need to add the preset for react to be loadable via babel, and add support for JSX files

module.exports = {
    entry: path.resolve(__dirname, 'src/App.js'),
    watch: true,
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [{
            test: /\.jsx?$/, // change here
            exclude: /(node_modules|bower_components)/,
            options: { // added this
                presets: ['react'],
            },
            use: {
                loader: 'babel-loader',
            }
        ]
    }, 
}

Related Query

More Query from same tag