Comments (5)
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.
Also, maybe it's worth to check with one of source-map-explorer
analogues .
from babel-plugin-direct-import.
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.
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.
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)
- ... provided an invalid property of "indexFile" HOT 1
- error with babel 7 and material-ui@next HOT 4
- TypeError: /src/index.js: path must be a string or Buffer HOT 3
- After adding babel-plugin-import, prettier cannot parse "type modifiers on import(TS4.5 feature)" HOT 3
- Dive into material-ui sub-modules HOT 1
- Allow missing dependencies HOT 4
- "Cannot use import statement outside a module" error HOT 2
- Deprecation notice HOT 1
- Breaks when there is a chain of default+named export (@mui/material ClickAwayListener)
- What about lodash and others? HOT 1
- Confused by new examples in ReadMe HOT 4
- Doesn't work with FontAwesome HOT 1
- Read default indexFile from package.json
- Error if the cwd is not the root of the package that is transpiled with babel HOT 3
- Dependency Dashboard
- Babel 7 support HOT 2
- Action Required: Fix Renovate Configuration
- Tips for getting this to work with `@babel/preset-typescript`? HOT 1
- Error when importing flow types HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-direct-import.