Git Product home page Git Product logo

Comments (5)

avocadowastaken avatar avocadowastaken commented on September 24, 2024

Hello @Graham42 !

This plugis was built for material-ui@next in first place. So it should work with zero-configuration.

Please check you dependency graph with webpack analyze tool.

from babel-plugin-direct-import.

avocadowastaken avatar avocadowastaken commented on September 24, 2024

Also, maybe it's worth to check with one of source-map-explorer analogues .

from babel-plugin-direct-import.

Graham42 avatar Graham42 commented on September 24, 2024

I tried those 3 tools and they all reported the same result.

I've narrowed this down to the TextField component. I've created a minimal case you can verify for yourself if you like. https://github.com/Graham42/bug-babel-direct-import-material-ui-next
Just run

npm run build
npm run stats

If you import just Button for example, the plugin works correctly. It's just once I have the TextField that it bundles a bunch extra.

from babel-plugin-direct-import.

avocadowastaken avatar avocadowastaken commented on September 24, 2024

Here my result:
image

From this we can see that not all modules included, but only (I will skip obvious ones):

  • ButtonBase
  • List
  • Modal
  • Form
  • Select
  • Popover
  • Menu

I checked TextField dependencies:

import React from 'react';
import warning from 'warning';
import type { ChildrenArray, Node } from 'react';
import Input, { InputLabel } from '../Input';
import FormControl from '../Form/FormControl';
import FormHelperText from '../Form/FormHelperText';
import Select from '../Select/Select';

Now trail leads to Select component dependencies:

import React from 'react';
import type { ChildrenArray, Element } from 'react';
import warning from 'warning';
import SelectInput from './SelectInput';
import withStyles from '../styles/withStyles';
import Input from '../Input'; // Import to enforce the CSS injection order
import { isMuiElement } from '../utils/reactHelpers';

And SelectInput dependencies:

import React from 'react';
import type { Element, Node } from 'react';
import classNames from 'classnames';
import keycode from 'keycode';
import warning from 'warning';
import Menu from '../Menu/Menu';
import { isDirty } from '../Input/Input';
import ArrowDropDownIcon from '../svg-icons/ArrowDropDown';

And finally Menu dependencies:

import React from 'react';
import type { Node } from 'react';
import { findDOMNode } from 'react-dom';
import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
import withStyles from '../styles/withStyles';
import Popover from '../Popover';
import MenuList from './MenuList';
import type { TransitionCallback } from '../internal/transition';

With MenuList dependencies:

import React from 'react';
import type { Node } from 'react';
import { findDOMNode } from 'react-dom';
import keycode from 'keycode';
import contains from 'dom-helpers/query/contains';
import activeElement from 'dom-helpers/activeElement';
import ownerDocument from 'dom-helpers/ownerDocument';
import List from '../List';

I wish this example will help you understand why you have unimported code in your app.

Have a nice hacking!

from babel-plugin-direct-import.

Graham42 avatar Graham42 commented on September 24, 2024

That's unfortunate that components unrelated to my simple use case are getting pulled in. Thanks for your help. I've open mui/material-ui#9262 to hopefully improve this.

from babel-plugin-direct-import.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.