Babel-core not working: A bunch of 'Module not found' messages

Question

I need to parse a JSX string in react, just like this other thread

The only response was to use babel-core, which unfortunately is not working and have no idea where to go from here. Here is the error trace that I get whenever I use require('babel-core') in my file:

2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: WARNING in ./~/babel-core/lib/transformation/file/index.js
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: Critical dependencies:
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: 510:24-39 the request of a dependency is an expression
2016-10-27 16:07:38,914 [INFO] vm-agent.webpack: 709:16-34 the request of a dependency is an expression
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/transformation/file/index.js 510:24-39 709:16-34
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/api/node.js
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/api
2016-10-27 16:07:38,915 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/api/node.js 58:10-23
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/transformation/file/options/build-config-chain.js
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/transformation/file/options
2016-10-27 16:07:38,922 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/transformation/file/options/build-config-chain.js 31:10-23
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: ERROR in ./~/babel-core/lib/helpers/resolve.js
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'module' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/babel-core/lib/helpers
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack:  @ ./~/babel-core/lib/helpers/resolve.js 34:14-31
2016-10-27 16:07:38,923 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: ERROR in ./~/convert-source-map/index.js
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/convert-source-map
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack:  @ ./~/convert-source-map/index.js 2:9-22
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: ERROR in ./~/debug/node.js
2016-10-27 16:07:38,924 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'fs' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/debug
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack:  @ ./~/debug/node.js 163:15-28
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: 
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: ERROR in ./~/debug/node.js
2016-10-27 16:07:38,925 [INFO] vm-agent.webpack: Module not found: Error: Cannot resolve module 'net' in /opt/.pyenv/versions/3.5.2/envs/vma/ui_cache/node/node_modules/debug

In case necessary, here is my webpack file:

module.exports = {
    entry: './src/app.js',
    output: {
        path: './react',
        filename: 'main.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015', 'react']
            }

        },
        { test: /\.json$/, loader: 'json-loader' },
        ]
    },
    resolve: {
        extensions: ['', '.js', '.json']
    }
};

Martin Ziserman · Answer 1 · 2017-08-17T09:30:57.047

I had the same issue when using it on the front-end. Now I am using it server side and converting the result to json with :

JSON.stringify(require("babel-core").transform(code, {
  presets: ["react"]
}))

And it works, but I can't eval the result.

edit: So I managed to eval the result by using answers of this thread Specify scope for eval() in JavaScript?

var evalReact = function(React) {
  var React = React
  return function(str) {return eval(str)}
}

let fnEvalReact = evalReact(React)
var Compo = fnEvalReact(JSON.parse(component).code)

score 0 · Answer 2 · answered Nov 28 '20 at 22:33

this is quite an old question but I ran into a similar issue and found this question. It seems one solution is to update your webpack file with:

module.exports = {
  //...
  node: {
    fs: 'empty',
  }
};

all credit to Melchia for the explanation: "You could also run into this issue when your platform doesn't support file-system. SO try add this line to your webpack.config.js to add the corresponding pollyfills"

Babel-core not working: A bunch of 'Module not found' messages

2 Answers2