avocadowastaken / babel-plugin-direct-import Goto Github PK

Hello,

Babel 7 is behind the doors, and it comes with many nice improvements.
But it aswell comes with some deprecations. Babel 7 doesn't allow arrays as second argument to plugin.

.babelrc:

presets: [
    ['direct-import', ['...options...']]
]

This options has to be an object, not array.
You can find out how babel-plugin-lodash dealt with this:
https://github.com/lodash/babel-plugin-lodash

Thanks!

Is it possible to compile

import { Tab } from 'material-ui/Tabs';

into

import Tab from 'material-ui/Tabs/Tab';

?

 ~/work/nuuz-chrome-extension   react ●✚  yr dev
yarn run v1.3.2
$ node scripts/dev
/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/build-config-chain.js:37
    if (e.code !== "BABEL_IGNORED_FILE") throw e;
                                         ^

Error: .plugins[3][1] must be an object, false, or undefined
    at assertPluginItem (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-assertions.js:127:15)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-assertions.js:104:14
    at Array.forEach (<anonymous>)
    at assertPluginList (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/option-assertions.js:103:9)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/options.js:71:20
    at Array.forEach (<anonymous>)
    at validate (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/options.js:57:21)
    at /home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/build-config-chain.js:172:36
    at cachedFunction (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/caching.js:40:17)
    at ConfigChainBuilder.mergeConfigFile (/home/bjorn/work/nuuz-chrome-extension/node_modules/@babel/core/lib/config/build-config-chain.js:69:17)
Done in 1.38s.

babelrc deps

Hi!

I'm trying to add this plugin to our app. Unfortunately, when I add this plugin, I'm getting the following error:

Details:

    .../node_modules/@mui/material/InputAdornment/InputAdornment.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import React, { useCallback, useMemo, useEffect, forwardRef } from 'react'
        |                                                                           ^
      2 | import { InputAdornment } from '@mui/material'
      3 | import debounce from 'lodash/debounce'
      4 | import cn from 'classnames'

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1449:14)
      at Object.<anonymous> (.../components/InputSearch/InputSearch.tsx:1:75)
      at Object.<anonymous> (.../components/InputSearch/InputSearch.test.tsx:3:1)

Here's our .babelrc file:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": "defaults"
        }
      }
    ],
    ["@babel/preset-typescript"],
    ["@babel/preset-react"]
  ],
  "env": {
    "test": {
      "presets": [
        [
          "@babel/preset-env",
          { "targets": { "node": "current" } }
        ]
      ]
    }
  },
  "plugins": [
    [
      "babel-plugin-direct-import",
      {
        "modules": [
          "@mui/lab",
          "@mui/system",
          "@mui/material",
          "@mui/icons-material"
        ]
      }
    ]
  ]
}

Of course, it works fine (though very slow) without this plugin. babel-plugin-import also works fine.

This might be a very rare edge case, but I'd like to seet his fixed (a PR is on its way) and discuss this.

I have a react-styleguidist setup where I join multiple styleguides into one big styleguide. Each project (each individual style guide) uses babel and babel-plugin-direct-import. The problem is that when I build my big styleguide, babel does run from there and process.cwd() is not the root of every individual component anymore. This causes babel-plugin-direct-import not to find dependencies that are only used by individual components.

Long story short: process.cwd() not being the path of the module that uses babel-plugin-direct-import breaks it.

Sudently I can't run the app anymore.

packages:

 "webpack": "^3.10.0",
 "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-plugin-direct-import": "^0.5.0",

.babelrc

    // Material UI Next, React Router 4, React Virtualized
    // https://www.npmjs.com/package/babel-plugin-direct-import

    // Material UI Next
    ["direct-import", ["material-ui"]],

    // React Virtualized
    ["direct-import", ["react-virtualized"]],

    // React Router 4
    ["direct-import", ["react-router", "react-router-dom"]],

error (note: I changed my path for to show the error )

ERROR in ./src/index.js
Module build failed: TypeError: <project-path>/src/index.js: path must be a string or Buffer
    at Object.fs.openSync (fs.js:646:18)
    at Object.fs.readFileSync (fs.js:551:33)
    at fulfillConfigExports (<project-path>/node_modules/babel-plugin-direct-import/src/mapper.js:40:41)
    at prepareConfig.reduce (<project-path>/node_modules/babel-plugin-direct-import/src/index.js:11:22)
    at Array.reduce (<anonymous>)
    at _.memoize (<project-path>/node_modules/babel-plugin-direct-import/src/index.js:10:25)
    at memoized (<project-path>/node_modules/lodash/lodash.js:10566:27)
    at PluginPass.Program (<project-path>/node_modules/babel-plugin-direct-import/src/index.js:34:17)
    at newFn (<project-path>/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (<project-path>/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (<project-path>/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (<project-path>/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (<project-path>/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (<project-path>/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (<project-path>/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (<project-path>/node_modules/babel-traverse/lib/index.js:114:17)
 @ multi ./src/index.js webpack/hot/dev-server webpack-dev-server/client?http://localhost:3000/

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: Cannot find preset's package (github>whitesource/merge-confidence:beta)

Hi,

I am trying to set this up with babel for a specific npm library. I am confused by the new example in the README and I'm not sure if I'm doing this right?

    [
      "babel-plugin-direct-import",
      {
        "modules": [
          "@appbaseio/reactivesearch"
        ]
      }
  ]

Whereas in the documentation for appbaseio, they have it written like this:

  [
          "direct-import",
          [
            "@appbaseio/reactivesearch",
            {
              "name": "@appbaseio/reactivesearch",
              "indexFile": "@appbaseio/reactivesearch/lib/index.es.js"
            }
          ]
        ]
    ]

Thanks for clarifying

Is the plan to eventually support lodash and other such libs?

While this is a neat idea, I don't want to end up having multiple import plugins for every few libs. Keeping track of who does what is just fragile and too much overhead than simply writing the imports in a modular way.

Currently it seems I'd need this and babel-transform-imports and babel-plugin-lodash if I'm using lodash, react and material-ui@next (which is a very common setup for many people).

I'd rather have a single plugin that supports all (which is what your tagline seems to imply) or simply write modular imports rather than remember who does what.

Make sense?

Could you elaborate as to why the plugin is now discouraged from being used? Tree shaking in Webpack 4 does not affect material-ui@next because the latter still exports CommonJS modules. So, if someone is using CJS version, and not /es (which most people don't), would you recommend babel-transform-imports instead? Apparently this plugin is still suggested by libraries like mdi-material-ui.

After I installed babel-plugin-import into my project, prettier(on pre-commit hook) starts to raise an parse error about type modifiers on import, which was implemented in TypeScript 4.5 & babel 7.16.0(babel/babel#13802).

The Error Logs

✖ prettier --write:
[error] packages/components/src/XXX.tsx: SyntaxError: ',' expected. (20:8)
[error]   19 | import {
[error] > 20 |   type XXXXType,

Does anyone have some clue to fix this?

Hey, I tried to use this babel-plugin with material-ui@next but the following error was thrown:

Module build failed: Error: Plugin 4 specified in "base" provided an invalid property of "indexFile"

Plugin 4 is direct-import.

const config = {
  presets: ['latest', 'stage-2', 'react'],
  plugins: [
    'transform-decorators-legacy',
    'transform-class-properties',
    'transform-regenerator',
    'direct-import',
    [
      {
        name: 'material-ui',
        indexFile: 'material-ui/index.es'
      },
      {
        name: 'react-router',
        indexFile: 'react-router/es/index'
      },
      {
        name: 'react-router-dom',
        indexFile: 'react-router-dom/es/index'
      }
    ]
  ]
};

// use the following plugins only in production
if (process.NODE_ENV === 'production') {
  [
    'transform-react-constant-elements',
    'transform-react-inline-elements',
    'transform-node-env-inline',
    'remove-debugger',
    'remove-console'
  ].forEach(p => config.plugins.push(p));
}

module.exports = config;

I'm attempting to use this plugin with a Typescript project and it doesn't appear to be reducing the bundle size for me.

babel.config.json

{
    "presets": [
        "@babel/preset-env",
        [
            "@babel/preset-react",
            {
                "runtime": "automatic"
            }
        ],
        "@babel/preset-typescript"
    ],
    "plugins": [
        [
            "babel-plugin-direct-import",
            { "modules": ["@material-ui/core", "@material-ui/icons"] }
        ],
        [
            "@babel/plugin-transform-runtime",
            {
                "useESModules": true,
                "regenerator": false
            }
        ]
    ],
    "env": {
        "test": {
            "presets": [
                [
                    "@babel/preset-env",
                    {
                        "targets": "current node"
                    }
                ]
            ]
        }
    }
}

Relevant package versions

"devDependencies": {
        "@babel/core": "^7.15.0",
        "@babel/eslint-parser": "^7.15.0",
        "@babel/plugin-transform-runtime": "^7.15.0",
        "@babel/preset-env": "^7.15.0",
        "@babel/preset-react": "^7.14.5",
        "@babel/preset-typescript": "^7.15.0",
        "@babel/runtime": "^7.14.8",
        "babel-jest": "^27.0.6",
        "babel-plugin-direct-import": "^1.0.0",
        "babel-plugin-import": "^1.13.3",
        "babel-plugin-transform-imports": "^2.0.0",
        "typescript": "^4.3.5",
        "webpack": "^5.48.0",
        "webpack-cli": "^4.7.2"
    },
    "dependencies": {
        "@material-ui/core": "^4.12.3",
        "@material-ui/icons": "^4.11.2"
    }

To simplify the plugin configuration, it would be cool if this plugin could automatically read the package.json of the package with the given name.

As per this proposal, it may have a module (or also a jsnext:main) field that specifies the path of the index file.

babel-plugin-direct-import version: 0.4.0
material-ui version: 1.0.0-beta.18

I've double and triple checked that my code is not importing the List,Menu, and Popover components but they're still showing up when I run source-map-explorer to investigate bundle size.

When using the Flow type definitions for react-router from flow-typed/npm, webpack builds fail with the following error message:

Module build failed: Error: /Users/.../ToggleableMenuItem.js: babel-plugin-direct-import: react-router does not contain module "ContextRouter"

ToggleableMenuItem.js
import type { ContextRouter } from 'react-router';
see same lodash issue

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): replace dependency @material-ui/core with @mui/material
• chore(deps): replace dependency @material-ui/icons with @mui/icons-material 5.0.0
• chore(deps): replace dependency eslint-plugin-node with eslint-plugin-n 14.0.0
• chore(deps): update dependency @types/babel__core to v7.20.5
• chore(deps): update dependency @types/resolve to v1.20.6
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency prettier-plugin-organize-imports to v3.2.4
• chore(deps): update material-ui monorepo (@material-ui/core, @material-ui/lab, @mui/icons-material, @mui/lab, @mui/material, @mui/system)
• chore(deps): update babel monorepo (@babel/core, @babel/parser, @babel/plugin-syntax-flow)
• chore(deps): update dependency @types/node to v18.19.31
• chore(deps): update dependency @umidbekk/configs to v0.3.0
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency lint-staged to v13.3.0
• chore(deps): update dependency prettier-plugin-packagejson to v2.5.0
• chore(deps): update dependency vite to v4.5.3
• chore(deps): update paambaati/codeclimate-action action to v3.2.0
• chore(deps): update vitest monorepo (@vitest/coverage-c8, vitest)
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency npm to v10
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency prettier-plugin-jsdoc to v1
• chore(deps): update dependency typescript to v5
• chore(deps): update dependency vite to v5
• chore(deps): update dependency vitest to v1
• chore(deps): update node.js to v20 (node, @types/node)
• chore(deps): update paambaati/codeclimate-action action to v5
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): pin dependency @vitest/coverage-c8 to 0.29.2

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

I tried this

.babelrc

{
  "plugins": [
    ["direct-import",
      {
        "modules": [
          "@fortawesome/free-brands-svg-icons",
        ]
      }
    ]
  ]
}

some.js

import { faGithub } from '@fortawesome/free-brands-svg-icons'

It imports entire svg suit.

It works with the other plugin though, however this one poorly handles @material-ui imports. Would be nice to handle everything with one plugin.

    ["transform-imports", {
      "@fortawesome/free-brands-svg-icons":  {
        "transform": "@fortawesome/free-brands-svg-icons/${member}",
        "preventFullImport": true,
        "skipDefaultConversion": true
      }
    }]

this transforms import to

import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'

Not that icon is not a default expor.

When I apply configuration to project, which don't have some dependency from the list, it is crashing.
In example I didn't add @mui/lab to the project.

It would be useful to allow it.

Error:

Module build failed (from ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js):
AssertionError [ERR_ASSERTION]: failed to find entry file of '@mui/lab'.
    at Function.get (node_modules/babel-plugin-direct-import/lib/internal/NodeModule.js:48:14)
    at node_modules/babel-plugin-direct-import/lib/internal/PluginOptions.js:46:34
    at Array.map (<anonymous>)
    at Function.parse (node_modules/babel-plugin-direct-import/lib/internal/PluginOptions.js:37:17)