Ad

ReferenceError: [BABEL] Unknown Option: Base.__esModule

- 1 answer

i am trying react lazy component loading ,that will load component separately and then I got

unexpected token import 

i changed my babel file and now error is

ReferenceError: [BABEL] E:\projectSir\latestProject1\tools\startMsg.js: Unknown option: base.__esModule. Check out http://babeljs.io/docs/usage/options/ for more info
    at Logger.error (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\logger.js:43:11)
    at OptionManager.mergeOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:307:20)
    at OptionManager.init (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\options\option-manager.js:506:10)
    at File.initOptions (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:243:89)
    at new File (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\file\index.js:159:72)
    at Pipeline.transform (E:\projectSir\latestProject1\node_modules\babel-core\lib\transformation\pipeline.js:49:16)
    at Object.transformFileSync (E:\projectSir\latestProject1\node_modules\babel-core\lib\api\node.js:152:10)
    at compile (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:129:20)
    at loader (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:158:14)
    at Object.require.extensions.(anonymous function) [as .js] (E:\projectSir\latestProject1\node_modules\babel-register\lib\node.js:168:7)

my babel file is

{
"plugins": ["syntax-dynamic-import"],
"presets": ["env","react","es2015"],
"env": {
    "development": {
                                    "presets": [
                                                            "react-hmre"
                                                            ]
                                }
                }
}

my react code for this is

async loadLazyComponent ()  {

    if(this.state.animation == null){
        try{
            const LazyComponent = await import('./animation.js')

            this.setState({animation:React.createElement(LazyComponent.default)})
        }catch(e){
            this.setState({animation:<div>`failed ${e}`</div>})
        }
    }
}

and package.json file is

"babel-polyfill": "6.8.0",
    "babel-preset-env": "^1.6.1",

and devDependencies are

"babel-cli": "^6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",

and webpack.confg.dev.js file is

import webpack from 'webpack';
import path from 'path';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    path.resolve(__dirname, 'src/index')
  ],
  target: 'web',
  output: {
    path: __dirname + '/dist', // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'src')
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
        loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src'), exclude: /node_modules/, loaders: ['babel','babel-loader']},
      {test: /(\.css)$/, loaders: ['style', 'css']},    
            {test: /\.(jpe?g|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  },
    node: {
  fs: 'empty',
    child_process:'empty'
    }
};

i am in just learning phase so any help will be appreciated.

Ad

Answer

**

the error was that i am using older version of webpack, upgrading it solved my issue.

** i think code splitting was not allowed or syntax import('./someModule.js') is not allowed in webpack 1.X version
now i have webpack 3.X and error is resolved

Ad
source: stackoverflow.com
Ad