5

I'm having problems when building with webpack. This is the error that I see when I'm building...

ERROR in ./node_modules/react-table/src/publicUtils.js 10:35
Module parse failed: Unexpected token (10:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| export const defaultRenderer = ({ value = '' }) => value;
> export const emptyRenderer = () => <>&nbsp;</>;
| 
| export const defaultColumn = {
 @ ./node_modules/react-table/src/plugin-hooks/useRowSelect.js 3:0-9:23 14:0-25 15:0-29 16:0-25 17:0-33 96:22-34 103:22-47 110:22-51 141:22-47 178:22-55 235:2-19 277:35-47 279:2-24 281:23-48 286:30-59 291:30-63 296:36-61 300:22-34 302:40-54 307:44-58 327:34-48
 @ ./src/pages/CustomTableContainer.jsx 34:20-72
 @ ./src/pages/TimeReport.jsx 18:51-88
 @ ./src/pages/MainNavigation.jsx 22:41-64
 @ ./src/App.js 18:45-78
 @ ./src/index.js 11:34-50

Before I added webpack and babel though I had the same problem (basically the problem was the thing that pushed me to start adding webpack and babel in the first place)... the error in that case was the following:

./node_modules/react-table/src/publicUtils.js
SyntaxError: /Users/badu/Workspaces/4D-Projects/time-report/node_modules/react-table/src/publicUtils.js: Support for the experimental syntax 'jsx' isn't currently enabled (10:36):

   8 |
   9 | export const defaultRenderer = ({ value = '' }) => value;
> 10 | export const emptyRenderer = () => <>&nbsp;</>;
     |                                    ^
  11 |
  12 | export const defaultColumn = {
  13 |   Cell: defaultRenderer,

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

Anyways, I'm currently using React to build my app with babel and webpack. Here is my .babelrc file

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties"
  ],
  "env": {
    "production": {
      "only": ["src"],
      "plugins": [
        [
          "transform-react-remove-prop-types",
          {
            "removeImport": true
          }
        ],
        "@babel/plugin-transform-react-inline-elements",
        "@babel/plugin-transform-react-constant-elements"
      ]
    }
  }
}

And here is my webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        index: './src/index.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Output Management',
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    mode: 'development',
    devServer: {
        contentBase: './dist',
        open: true
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react'],
                        include: [
                            path.resolve('node_modules/react-table/'),
                        ],
                        exclude: /node_modules\/(?!react-table).+/
                    }
                }
            },
            ... other loaders
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"],
        modules: [
            'node_modules'
        ]
    }
};

I followed quite a few guides but still couldn't find anything that could solve my problem. The publicUtils.js is coming from an external module. However this module has the dist folder in it which should have the already compiled code(?)

I'm not an expert on webpack and babel yet so I might be missing something

L_Cleo
  • 1,073
  • 1
  • 10
  • 26

1 Answers1

7

Don't know whether to be pissed or what, but check the imports, Visual Studio imported me automatically

import {useRowSelect} from "react-table/src/plugin-hooks/useRowSelect";

while the correct import (working) is

import {useRowSelect} from "react-table";

The error was never on webpack or babel's side Hope this saves a bunch of time to other people

L_Cleo
  • 1,073
  • 1
  • 10
  • 26