skip to Main Content

I’m using rollup to bundle a ui library (to use it in several main apps).
but in bundled esm file I have these imports, which are not acceptable to webpack in main apps:

import { ArrowDropDownCircleOutlined } from '@mui/icons-material/index';
import '@mui/material/CircularProgress';
import '@mui/icons-material/HighlightOff';
import Autocomplete from '@mui/material/Autocomplete';
import Paper from '@mui/material/Paper';
import { grey } from '@mui/material/colors';

this is my rollup.config:

import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import replace from "@rollup/plugin-replace";
import { dts } from "rollup-plugin-dts";

import packageJson from "./package.json";

export default [
  {
    input: "src/index.ts",
    output: [
      {
        file: packageJson.main,
        format: "cjs",
        sourcemap: true,
      },
      {
        file: packageJson.module,
        format: "esm",
        sourcemap: true,
      },
    ],
    plugins: [
      nodeResolve(),
      commonjs(),
      typescript({ tsconfig: "./tsconfig.json" }),
      replace({
        "process.env.NODE_ENV": JSON.stringify("production"),
      }),
    ],
    external: [...Object.keys(packageJson.peerDependencies), "tss-react/mui", 'tss-react/mui', /@mui/],
  },
  {
    input: "src/index.ts",
    output: [{ file: "dist/index.d.ts", format: "es" }],
    plugins: [dts],
  },
];

this is my webpack config created by create-react-app:

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
                resolve: {
                  fullySpecified: false,
                }
            }
        ],
    }
}

and these are errors I have:

Module not found: Error: Can’t resolve ‘@mui/icons-material/index’ in ‘path-to-base/my-app/node_modules/ui-lib/dist/esm’
Did you mean ‘index.js’?
BREAKING CHANGE: The request ‘@mui/icons-material/index’ 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.

I can not find a way to resolve this in webpack config, or in rollup config.

2

Answers


  1. try this config https://webpack.js.org/configuration/module/#resolvefullyspecified.

    When enabled, you should provide the file extension when importing a module in .mjs files or any other .js files when their nearest parent package.json file contains a "type" field with a value of "module", otherwise webpack would fail the compiling with a Module not found error.

    Login or Signup to reply.
  2. we had problem in webpack 4, which bundle all icons when you use import style like this

    import { ArrowDropDownCircleOutlined } from '@mui/icons-material/index';
    

    We must rewrite all our imports for mui icons to

    import ArrowDropDownCircleOutlined from '@mui/icons-material/ArrowDropDownCircleOutlined';
    

    But this seem like problem with esm import. I find this solution for esm

    {
      test: /.m?js/,
      resolve: {
        fullySpecified: false,
      },
    }
    

    Because there was some bug in react scripts. Issue here – https://github.com/facebook/create-react-app/issues/11865

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search