Compilation Import always empty object with ts-loader

[sunstrikemd]

Hello everyone,i'm using webpack with typescript(ts-loader) instead of babel and i can't get react-data-grid work properly. Bundle compiles without any errors and in my code when i use: import DataGrid from 'react-data-grid', DataGrid is always an empty object instead of react element. Maybe someone faced the same problem?

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const isProduction = process.env.NODE_ENV === 'production';

const postcss = {
    loader: 'postcss-loader',
    options: {
        config: {
            path: `${__dirname}/postcss.config.js`,
        },
    },
};

module.exports = {
    mode: isProduction ? 'production' : 'development',
    devtool: isProduction ? 'none' : 'source-map',
    entry: {
        main: './HUB/src/index.tsx',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/HUB/static',
        publicPath: '/static',
    },
    module: {

        rules: [
            {
                test: /\.(t|j)s(x)?$/,
        exclude:  /node_modules[/\\](?!react-data-grid[/\\]lib)/,
                use: {
                    loader: 'ts-loader',
                },
            },
            {
                enforce: 'pre',
                test: /\.js$/,
                use: 'source-map-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(sa|sc|c)ss$/,
                oneOf: [
                    {
                        resourceQuery: /^\?raw/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    importLoaders: 2,
                                },
                            },
                            postcss,
                            'sass-loader',
                        ],
                    },
                    {
                        use: [
                            MiniCssExtractPlugin.loader,
                            '@teamsupercell/typings-for-css-modules-loader',
                            {
                                loader: 'css-loader',
                                options: {
                                    modules: {
                                        localIdentName: isProduction
                                            ? '[hash:base64]'
                                            : '[path][name]__[local]',
                                    },
                                    sourceMap: !isProduction,
                                },
                            },
                            postcss,
                            'sass-loader',
                        ],
                    },
                ],
            },

            {
                test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    publicPath: '/static',
                },
            },
            {
                test: /\.(eot|com|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader?&mimetype=application/octet-stream',
                options: {
                    publicPath: '/static',
                },
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    publicPath: '/static',
                },
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
        }),
    ],
    optimization: {
        minimize: true,
        minimizer: isProduction
            ? [new TerserPlugin(), new OptimizeCSSAssetsPlugin({})]
            : [],
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    name: 'vendor',
                    test: /[\\/]node_modules[\\/](.(?!.*\.css$))*$/,
                    priority: -10,
                },
            },
        },
    },
    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss'],
    },
};

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "lib": [
      "es6",
      "dom",
      "es2019"
    ],
    "rootDir": "src",
    "module": "commonjs",
    "target": "es2019",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "esModuleInterop": true
  }
}

package.json

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "",
  "scripts": {
    "dev": "NODE_ENV=development webpack --mode development --watch --colors --progress",
    "deploy": "NODE_ENV=production webpack --mode production --colors --progress"
  },
  "devDependencies": {
    "@teamsupercell/typings-for-css-modules-loader": "^2.1.0",
    "@types/react": "^16.9.35",
    "@types/react-dom": "^16.9.8",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-select": "^3.0.8",
    "@types/redux-form": "^8.2.0",
    "autoprefixer": "^9.7.2",
    "css-loader": "^3.2.0",
    "file-loader": "^5.0.2",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "prettier": "^1.19.1",
    "react-router-dom": "^5.1.2",
    "sass-loader": "^8.0.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^4.2.2",
    "ts-loader": "^8.0.4",
    "typescript": "^3.8.3",
    "typescript-plugin-css-modules": "^2.1.0",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.11.2",
    "redux-form": "^8.2.6",
    "axios": "^0.19.0",
    "bootstrap": "^4.4.0",
    "clsx": "^1.1.1",
    "react": "^16.13.1",
    "react-alert": "^6.0.0",
    "react-alert-template-basic": "^1.0.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-collapse": "^5.0.1",
    "react-confirm-alert": "^2.4.1",
    "react-data-grid": "7.0.0-canary.22",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^16.13.1",
    "react-lineicons": "^1.0.0",
    "react-redux": "^7.1.3",
    "react-scrollbars-custom": "^4.0.22",
    "react-select": "^3.0.8",
    "react-swipeable-routes": "^0.6.0",
    "react-transition-group": "^4.3.0",
    "react-virtualized": "^9.21.2",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0"
  },
  "browserslist": [
    "> 0.25%"
  ],
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

I use react-data-grid 7.0.0-canary.22

[amanmahajan7]

Can you try with react-data-grid 7.0.0-canary.30?

[LawrenShin]

I'm using react-data-grid 7.0.0-canary.33. here's link to json I have for better understanding of dependencies I have - https://github.com/gpn-prototypes/vega-rb/blob/develop/package.json

The issue I have: After update from 7.0.0-canary.16 to *33 I've changed import of wrapEvent. I imported wrapEvent from grid/lib/utils as there's index file that exports everything. Ts wasn't marking any error but still build fails with "can't resolve module" error. So I specified it to grid/lib/utils/domUtils. Still same issue. Then I decided to implement wrapEvent and prevent default in my proj instead. Solution worked but the issue appeared in other place.

Now it says - Unable to resolve path to module 'react-data-grid/lib/types' Though if I follow this path I see needed export there, everything seems correct.

[nstepien]

You shouldn't need to transpile react-data-grid anymore. If you still encounter issues, please open a new issue.