Babel plugin that can convert semantic-ui-react module imports to default imports and add semantic-ui-css/-less imports.

Home Page: https://www.npmjs.com/package/babel-plugin-transform-semantic-ui-react-imports

License: MIT License

JavaScript 100.00%

babel-plugin-transform-semantic-ui-react-imports's People

Contributors

Stargazers

Watchers

Forkers

reeganexe bluetab js-veryhappy

babel-plugin-transform-semantic-ui-react-imports's Issues

Jest errors

Hi! I have Test suite failed to run

node_modules/semantic-ui-react/dist/es/elements/Segment/Segment.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _extends from "@babel/runtime/helpers/extends";
                                                                                                    ^^^^^^^^

    SyntaxError: Unexpected identifier

      14 |
      15 | @inject('rootStore')
    > 16 | @observer
         |                    ^
      17 | class ProjectPage extends Component {
      18 | 	render() {
      19 | 		const { rootStore } = this.props

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)

My config:

[
			"transform-semantic-ui-react-imports",
			{
				"convertMemberImports": true,
				"importType": "es",
				"addCssImports": true,
				"importMinifiedCssFiles": true,
				"addLessImports": false,
				"addDuplicateStyleImports": false
			}
		]

If i set convertMemberImports and addCssImports to false - test work fine )

Some module dependency is not loaded

Hi, thanks for this great plugins.

So, for example dropdown or search didn't work correctly without importing transition and menu component from react.

so I had to modify index.js to be like this:

/**
 * Import the global LESS files. Imports for component LESS files are added by
 * babel-plugin-transform-semantic-ui-react-imports depending on which components from semantic-ui-react are used.
 */

/* Global */
import 'semantic-ui-less/definitions/globals/reset.less';
import 'semantic-ui-less/definitions/globals/site.less';

import 'semantic-ui-less/definitions/modules/transition.less';
import 'semantic-ui-less/definitions/collections/menu.less';

Plugin doesn't work with babel 7

I can't find any documentation for breaking changes to the options babel passes to plugins, but I'm fairly certain the structure of these options has changed and it is causing this plugin to no longer work. The problem occurs in the "pre" function:

pre: function(state) {
        addedCssImports = {};
        addedLessImports = {};

        multipleStyleImportsChecked = false;

        foundLodashPluginWithIdSemanticReactUi = false;
        babelPluginLodashChecked = false;

        const lodashPlugins = state.opts.plugins.filter(function(plugin) {
            return plugin[0].key === 'lodash' || plugin[0].key === 'babel-plugin-lodash';
        });

Specifically this last part:

const lodashPlugins = state.opts.plugins.filter(function(plugin) {
        return plugin[0].key === 'lodash' || plugin[0].key === 'babel-plugin-lodash';
});

The error I'm getting is this:

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: Cannot read property 'key' of undefined
    at /[path hidden for privacy]/node_modules/babel-plugin-transform-semantic-ui-react-imports/index.js:234:34
    at Array.filter (<anonymous>)

Logging the 'plugin' values in that loop shows that it is an object, not an array. The object does indeed have a 'key' property. If I modify the code to no longer treat the resulting 'plugin' value as an array, the error goes away:

return plugin.key === 'lodash' || plugin.key === 'babel-plugin-lodash';

skleeschulte / babel-plugin-transform-semantic-ui-react-imports Goto Github PK

babel-plugin-transform-semantic-ui-react-imports's People

Contributors

Stargazers

Watchers

Forkers

babel-plugin-transform-semantic-ui-react-imports's Issues

Jest errors

Some module dependency is not loaded

Plugin doesn't work with babel 7

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs