Build fail after upgrading to 1.0.8

[simontol]

Module not found: Error: Can't resolve './scroll' in '/home/simone/Work/elite_local/EOP/client/node_modules/react-window-decorators/dist/esm'
Did you mean 'scroll.js'?
BREAKING CHANGE: The request './scroll' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./source/js/client.jsx 4:0-56 29:4-17

ERROR in ./node_modules/react-window-decorators/dist/esm/index.js 4:0-34
Module not found: Error: Can't resolve './window' in '/home/simone/Work/elite_local/EOP/client/node_modules/react-window-decorators/dist/esm'
Did you mean 'window.js'?
BREAKING CHANGE: The request './window' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./source/js/client.jsx 4:0-56 29:4-17

ERROR in ./node_modules/react-window-decorators/dist/esm/index.js 5:0-45
Module not found: Error: Can't resolve './window-manager' in '/home/simone/Work/elite_local/EOP/client/node_modules/react-window-decorators/dist/esm'
Did you mean 'window-manager.js'?
BREAKING CHANGE: The request './window-manager' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./source/js/client.jsx 4:0-56 29:4-17

I get this errors after upgrading from 1.0.7 to 1.0.8

[Stanko]

Hi @simontol,
Can you please provide me with more information like - which bundler are you using and are you using "type": "module" in your package.json?

I can't replicate it nor figure it out solely on the error output.

My guess is that your bundler expects .mjs extension instead of .js for esm modules, so it can probably be fixed by changing configuration on your side.

Cheers!

[simontol]

Hi @Stanko,
I'm not using "type": "module" in package.json
I'm building with webpack 5.74

webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const UnusedWebpackPlugin = require('unused-webpack-plugin');

const path = require('path');
const devServer = require('./webpack/dev-server');

const {
  paths,
  entry,
  outputFiles,
} = require('./webpack/config');

module.exports = {
  entry,
  output: {
    path: paths.build,
    publicPath: '/',
    pathinfo: false,
    filename: outputFiles.client,
    crossOriginLoading: 'anonymous',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './source/index.html',
      path: './build',
      filename: 'index.html',
      chunksSortMode: 'none',
      minify: {
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true,
        removeComments: true,
        useShortDoctype: true,
      },
    }),
    new CopyPlugin({
      patterns: [
        { from: paths.assets, to: 'assets' },
      ],
    }),
    new UnusedWebpackPlugin({
      directories: [paths.src],
      exclude: [
        '*.test.js',
        'browserconfig.xml',
        'favicon.ico',
        'robots.txt',
      ],
      root: __dirname,
    }),
  ],
  devServer,
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.(png|gif|jpg|svg)$/,
        include: paths.images,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              context: paths.src,
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        include: paths.fonts,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              context: paths.src,
            },
          },
        ],
      },
      {
        test: /\.(js|jsx|css)$/,
        include: paths.navigation,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
              context: paths.src,
            },
          },
        ],
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              url: false,
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                  ],
                ],
              },
            },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
      {
        test: /\.css$/,
        exclude: paths.navigation,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [
      'node_modules',
      paths.javascript,
      paths.assets,
      paths.css,
    ],
    alias: {
      '@app': path.resolve(__dirname, './source/app'),
      '@src': path.resolve(__dirname, './source'),
      oneplatform: path.resolve(__dirname, './source/js/oneplatform'),
      membership: path.resolve(__dirname, './source/js/oneplatform/membership'),
    },
  },
};

[Stanko]

Check if this works for you
https://stackoverflow.com/a/69519812/8237921

You can also try importing cjs module directly
For example:
import { withScroll } from 'react-window-decorators/dist/cjs'

In general I don't think this is a problem with the library.