search

babel / babel-loader

📦 Babel loader for webpack
MIT License
4.82k stars 451 forks source link

React & Plugin/Preset files are not allowed to export objects, only functions. #540

Closed brenwell closed 6 years ago

brenwell commented 6 years ago

Hello all, first off just a quick thanks for all the hard work.

I have a small issues, perhaps someone can guide me in the right direction if this isn't a bug. (which it likely isn't)

I am trying to build a simple app with Webpack 3.8.1, React 16.1.1, Babel 7.0.0-beta.31 and Babel-loader 8.0.0-beta.0 and I am receiving the following error:

Plugin/Preset files are not allowed to export objects, only functions.

.babelrc

{
    "presets": ["@babel/preset-env","react"]
}

webpack.conf.js

   ...
  module: {
    noParse: [/.*(pixi\.js).*/],
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        }
      },
     ...

view.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

package.json

  "dependencies": {
    "c-p": "^1.3.5",
    "ismobilejs": "^0.4.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.31",
    "@babel/preset-env": "^7.0.0-beta.31",
    "babel-loader": "^8.0.0-beta.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "colors": "^1.1.2",
    "css-loader": "^0.28.0",
    "es6-promise-promise": "^1.0.0",
    "eslint": "^3.19.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.28.0",
    "imports-loader": "^0.7.1",
    "jsdoc": "^3.4.3",
    "json-loader": "^0.5.4",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "prompt": "^1.0.0",
    "pug": "^2.0.0-rc.4",
    "pug-loader": "^2.3.0",
    "sqlite3": "^3.1.8",
    "stats.js": "^0.17.0",
    "style-loader": "^0.16.1",
    "webpack": "^3.8.1",
    "webpack-notifier": "^1.5.0",
    "xlsx": "^0.11.8"
  }

Any ideas?

existentialism commented 6 years ago

@brenwell you'll want to make sure your presets are also updated to replace your react preset with @babel/preset-react that matches your @babel/core version (7.0.0-beta.31, in your case).

(Sidenote, since you're using preset-env, you can drop the es2015/es2017 presets from your package.json!)

brenwell commented 6 years ago

Awesome, thanks!

npm i @babel/preset-react

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

Did the trick!

existentialism commented 6 years ago

@brenwell glad to hear! let us know if you run into any additional issues with the 7.0-betas!

francisrod01 commented 5 years ago

@brenwell now the error is React is not defined.

"babel": {
    "presets": [
        "react-app"
    ]
},
"eslintconfig: {
    "extends": "react-app"
}

Before change to @babel/preset-react the error it was:

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/paneladm/projects/website/node_modules/babel-preset-react-app/index.js
    at createDescriptor (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
    at items.map (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:315:26)
    at /home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:278:7
    at buildRootChain (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/config-chain.js:118:22)
    at loadPrivatePartialConfig (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/partial.js:57:55)
    at Object.loadPartialConfig (/home/paneladm/projects/website/node_modules/@babel/core/lib/config/partial.js:82:18)
    at Object.<anonymous> (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:105:26)
    at Generator.next (<anonymous>)
    at step (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:3:221)
    at _next (/home/paneladm/projects/website/node_modules/next/node_modules/babel-loader/lib/index.js:3:409)
    at <anonymous>

 @ multi ./pages/index.js

After update the dependencies:

"babel": {
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

And the bug now is:

ReferenceError: React is not defined
    at module.exports../pages/index.js.__webpack_exports__.default (/home/paneladm/projects/website/.next/server/static/development/pages/index.js:106:3)
    at processChild (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2458:14)
    at resolve (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2384:5)
    at ReactDOMServerRenderer.render (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2706:22)
    at ReactDOMServerRenderer.read (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2680:23)
    at renderToString (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3071:25)
    at renderPage (/home/paneladm/projects/website/node_modules/next/dist/server/render.js:321:26)
    at Function.getInitialProps (/home/paneladm/projects/website/node_modules/next/dist/server/document.js:65:25)
    at _callee$ (/home/paneladm/projects/website/node_modules/next/dist/lib/utils.js:135:30)
    at tryCatch (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)
ReferenceError: React is not defined
    at module.exports../pages/index.js.__webpack_exports__.default (/home/paneladm/projects/website/.next/server/static/development/pages/index.js:106:3)
    at processChild (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2458:14)
    at resolve (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2384:5)
    at ReactDOMServerRenderer.render (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2706:22)
    at ReactDOMServerRenderer.read (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:2680:23)
    at renderToString (/home/paneladm/projects/website/node_modules/react-dom/cjs/react-dom-server.node.development.js:3071:25)
    at renderPage (/home/paneladm/projects/website/node_modules/next/dist/server/render.js:321:26)
    at Function.getInitialProps (/home/paneladm/projects/website/node_modules/next/dist/server/document.js:65:25)
    at _callee$ (/home/paneladm/projects/website/node_modules/next/dist/lib/utils.js:135:30)
    at tryCatch (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /home/paneladm/projects/website/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)
page /home/paneladm/projects/website/.next/server/static/development/pages/index.js
page /home/paneladm/projects/website/.next/server/static/development/pages/index.js.map
^Cgot signal SIGINT, exiting

References: https://github.com/zeit/next.js/issues/5301

victors1681 commented 5 years ago

Make sure .babelrc is deleted and use babel.config.js

top-challenger commented 5 years ago

I am also having this issue. Plugin/Preset files are not allowed to export objects, only functions.

.babelrc

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

package.json

"devDependencies": {
        "@babel/core": "^7.2.0",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.18",
        "babel-eslint": "9.0.0",
        "babel-jest": "23.6.0",
        "babel-loader": "8.0.4",
        "babel-plugin-named-asset-import": "^0.2.2",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-env": "^1.7.0",
        "babel-preset-react": "^6.23.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^3.0.0",
        "lodash": "^4.17.10",
        "quill": "^1.3.6",
        "react": "next",
        "react-dom": "next",
        "react-quill": "^1.3.1",
        "react-router-dom": "^4.3.1"
    },
    "dependencies": {
        "bootstrap": "^4.1.3",
        "font-awesome": "^4.7.0",
        "group-array": "^0.3.3",
        "import": "0.0.6",
        "laravel-echo": "^1.4.0",
        "normalize-scss": "^7.0.1",
        "normalize.css": "^8.0.0",
        "npm": "^6.3.0",
        "prop-types": "^15.6.2",
        "pusher-js": "^4.2.2",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-table-next": "^1.4.0",
        "react-bootstrap-table2-editor": "^0.2.1",
        "react-bootstrap-table2-paginator": "^1.0.3",
        "react-bootstrap-table2-toolkit": "^1.1.1",
        "react-data-grid": "^4.0.7",
        "react-redux": "^6.0.0",
        "react-select": "^1.3.0",
        "react-select2": "^4.0.3",
        "reactable": "^0.14.1",
        "reactstrap": "^6.5.0",
        "redux": "^4.0.1",
        "redux-form": "^7.4.2",
        "redux-thunk": "^2.3.0",
        "select2": "^4.0.6-rc.1"
    }

I will appreciate any guy's help.

eduardoinnorway commented 5 years ago

Omg, never ending story, same happened to me today.

dipakchandranp commented 5 years ago

For me also happened today! while running some test cases!

Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In home/webapp/node_modules/babel-preset-react/lib/index.js

This is my dependency:

  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^22.4.3",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "husky": "^0.14.3",
    "jest": "^24.1.0",
    "jest-junit": "^4.0.0",
    "prettier": "1.16.4",
    "pretty-quick": "^1.10.0",
    "react-test-renderer": "^16.3.2",
    "stylelint": "^9.2.1",
    "stylelint-config-standard": "^18.2.0",
    "stylelint-scss": "^3.5.4",
    "webpack-bundle-analyzer": "^2.12.0",
    "webpack-dev-server": "3.1.4"
  },
  "dependencies": {
    "@rails/webpacker": "3.5",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "jquery": "^3.3.1",
    "materialize-css": "^1.0.0-rc.2",
    "pubsub-js": "^1.7.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-redux": "^5.0.7",
    "react-stripe-elements": "^2.0.1",
    "redux": "^4.0.0",
    "webpack-merge": "^4.1.2"
  }

And in .babelrc

"env": {
    "test": {
      "presets": ["react", "env"],
      "plugins": ["transform-class-properties"]
    }
  },
zeshanshani commented 5 years ago

Same thing happened to me again... This config worked for es2015 module last year, but not working this year with perhaps new babel-loader and babel updates:

{
  "presets": [
    [ "es2015", "es2016" ]
  ]
}

Now, I have tried a lot of solutions given here but getting the same error. Very strange.

andypillip commented 5 years ago

@zeshanshani The yearly presets have all been replaced by env, which you can use along with browserslist or the target config to determine your target platforms.

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": "60"
        }
      }
    ]
  ]
}
andypillip commented 5 years ago

@dipakchandranp If you take a step back, you might notice that babel-core (@babel/core) and babel-preset- major versions are usually aligned.

In your case you have a 7 for core, a 6 for your preset: "babel-preset-react": "^6.24.1",

Upgrading that preset also to version 7 should do the trick.

Otherwise I'm wondering why you have babel in the devDependencies, but it's presets as hard dependencies. That doesn't make sense to me, they should be both in dev, since together they build your transpiler. You will not need them at runtime.

jahnaviv commented 4 years ago

For me also happened today! while running some test cases!

Test suite failed to run
Plugin/Preset files are not allowed to export objects, only functions. In /home/administrator/Projects/emx-slicer-web-app/node_modules/babel-preset-react/lib/index.js

This is my package.json:

  "name": "emx-ad-unit-ui",
  "version": "1.0.0",
  "description": "EMX Ad Unit UI.",
  "author": "Zhen Zheng <zhenxzheng@gmail.com>",
  "main": "src/index.ejs",
  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "dist": "npm run build-prod",
    "build-dev": "NODE_ENV=development webpack --config webpack.dev.js",
    "build-staging": "NODE_ENV=staging webpack --config webpack.prod.js",
    "build-prod": "NODE_ENV=production webpack --config webpack.prod.js",
    "invalidate": "gulp invalidate",
    "upload-index": "gulp upload-index",
    "fix-eslint": "eslint \"./src/js/**\" --fix",
    "test": "jest --verbose",
    "test:watch": "jest --watchAll --verbose",
    "test:coverage": "jest --verbose --coverage"
  },
  "engines": {
    "node": "8.9.1",
    "npm": "5.2.0"
  },
  "license": "ISC",
  "dependencies": {
    "@devexpress/dx-core": "^1.9.0",
    "@devexpress/dx-grid-core": "^1.9.0",
    "@devexpress/dx-react-core": "^1.9.0",
    "@devexpress/dx-react-grid": "^1.9.0",
    "@devexpress/dx-react-grid-material-ui": "^1.9.0",
    "@material-ui/core": "^3.3.2",
    "@material-ui/icons": "^3.0.1",
    "@wojtekmaj/react-daterange-picker": "^1.1.1",
    "auth0-lock": "^11.11.0",
    "axios": "^0.19.0",
    "classnames": "^2.2.6",
    "deep-equal": "^1.0.1",
    "dotenv": "^6.0.0",
    "downshift": "^3.1.12",
    "es6-promise": "^4.2.4",
    "graphql-query-builder": "^1.0.7",
    "highcharts": "^6.2.0",
    "history": "^4.7.2",
    "jwt-decode": "^2.2.0",
    "keycode": "^2.2.0",
    "lodash": "^4.17.10",
    "material-ui": "^0.20.2",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.21",
    "numeral": "^2.0.6",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-cookie": "^2.2.0",
    "react-csv": "^1.1.1",
    "react-data-export": "^0.5.0",
    "react-dates": "^18.3.1",
    "react-dom": "^16.4.2",
    "react-ga": "^2.4.1",
    "react-highcharts": "^16.0.2",
    "react-router-dom": "^4.3.1",
    "react-select": "2.1.1",
    "react-sticky-table": "^2.0.4",
    "react-syntax-highlighter": "^9.0.0",
    "react-table": "^6.8.6",
    "react-url-query": "^1.4.0",
    "styled-components": "^3.4.2",
    "xlsx": "^0.14.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.0",
    "aws-sdk": "^2.307.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.5.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^1.0.0",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.9.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "gulp": "^3.9.1",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.9.0",
    "json-loader": "^0.5.7",
    "mini-css-extract-plugin": "^0.4.1",
    "node-sass": "^4.5.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "postcss-loader": "^2.0.10",
    "postcss-smart-import": "^0.7.6",
    "precss": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.22.0",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
    "webpack-merge": "^4.1.4"
  }
}

And in .babelrc:


{
  "presets": [
    ["env", { "modules": false }],
    "react"
  ],
  "plugins": [
    "transform-object-rest-spread", // experimental feature still
    "transform-class-properties"
  ]
}
jahnaviv commented 4 years ago

Got solution :) First remove older packages using: $ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react Then add new packages using: $ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

Update .babelrc:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "transform-class-properties",
    "transform-object-rest-spread"
  ]
}