search

liferay / liferay-js-toolkit

GNU Lesser General Public License v3.0
52 stars 41 forks source link

liferay-npm-bundler cannot use new react preset #491

Closed rahulahoop closed 4 years ago

rahulahoop commented 4 years ago

I have a mixed java and javascript portlet that i want to deploy to my liferay instance.

here below is my .npmbundlerrc

{
    "output": "target/classes/META-INF/resources",
    "sources": ["src/main/resources/META-INF/resources"],
    "verbose": true,
    "create-jar": {
        "features":{
            "js-extender": true,
            "manifest": "target/classes/META-INF/resources/manifest.json"
        }
    },
    "rules": [
        {
            "test": "\\.js$",
            "exclude": "node_modules",
            "use":[
                {
                    "loader": "babel-loader",
                    "options":
                    {
                        "presets": ["@babel/preset-env", "@babel/preset-react"],
                                                "plugins": ["@babel/plugin-transform-react-constant-elements","@babel/plugin-transform-react-inline-elements","@babel/plugin-transform-react-jsx", "@babel/plugin-transform-runtime"]
                    }
                }
            ]
        }
    ]

}

and this is the error im getting because the babel loader is looking for api variable from the babel config. Perhaps api keyword or pointing to a babel.config.json needs to be added

[INFO] TypeError: Loader 'undefined' failed: Cannot read property 'assertVersion' of undefined [INFO] at /Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/@babel/helper-plugin-utils/lib/index.js:10:14 [INFO] at /Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler-loader-babel-loader/lib/index.js:78:40 [INFO] at Array.map () [INFO] at loadBabelPlugins (/Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler-loader-babel-loader/lib/index.js:57:28) [INFO] at Object.default_1 [as exec] (/Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler-loader-babel-loader/lib/index.js:40:27) [INFO] at runLoaders (/Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler/lib/steps/rules.js:96:25) [INFO] at processFile (/Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler/lib/steps/rules.js:76:12) [INFO] at /Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler/lib/steps/rules.js:55:108 [INFO] at /Users/rahul_workspace/Documents/projects/baw/code/benefit-at-work/modules/react-form-portlet/node_modules/liferay-npm-bundler/lib/steps/util.js:85:42 [INFO] at Array.map ()

izaera commented 4 years ago

Hi @rahulahoop

The problem is that the babel-loader you are using is calling Babel 6 under the hood (see https://github.com/liferay/liferay-js-toolkit/blob/v2.17.0/packages/liferay-npm-bundler-loader-babel-loader/package.json#L12 ) and the presets and plugins under @babel/.... are designed for Babel 7+.

The solution would be finding the equivalent plugin for Babel 6 or creating a babel-loader that calls Babel 7.

We have plans to upgrade to Babel 7, but we haven't committed to any timeframe yet...