CODEWITHSUNDEEP
node.jsreactjswebpackbabeljs
tony
tony

Reputation: 2392

Babel won't compile a file when there's a nested package.json file

I'm using WebPack, Babel and React. I have a folder structure like the below

node_modules/
.babelrc
package.json
    SomeThirdPartyFolder/
        node_modules/
        package.json  
        src/
           FileA.js

I wanted to use FileA which has jsx content, however it acted as though Babel wasn't there, i.e. it produced a compile error on the below

  return (
      <div className etc

If I remove the package.json in SomeThirdPartyFolder then it does compile

Clearly this isn't a real situation but I'd like to understand what's happening here

Upvotes: 6

Views: 1253

Answers (1)

tony
tony

Reputation: 2392

(Based off loganfsmyth's comments)

I've converted the .babelrc file into a babel.config.js file and it now seems to work. The .babelrc file was

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ]
}

And the replacement file is

module.exports = function (api)
{
    api.cache(true);

    const presets = [
        "@babel/preset-env",
        "@babel/preset-react"
    ];
    const plugins = [
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ];

    return {
        presets,
        plugins
    };
}

Upvotes: 2

Related Questions