사전 설정 파일은 개체를 내보낼 수 없습니다.

91

내가 얻고 index.js빌드 하려는 회전 목마 파일이 block.build.js있으므로 다음 과 webpack.config.js같습니다.

var config = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'block.build.js',
  },
  devServer: {
    contentBase: './Carousel'
  },
  module : {
    rules : [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  }
};
module.exports = config;

package.json하는 I 사용은 다음과 같습니다 :

{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "lodash": "^4.17.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-swipeable": "^4.2.0",
    "styled-components": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  },
  "author": "brad traversy",
  "license": "ISC"
}

… 그러나 다음과 같은 오류 메시지가 나타납니다.

ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

누구든지 이것을 해결하는 방법을 알고 있습니까?

reactjs  webpack  babeljs 
— 소니아 마클 로프
소스
valentinog.com/blog/babel이 도움이되었습니다.
— 라이언

답변:

89

Babel 6과 Babel 7의 조합을 사용하고 있습니다. 버전 간 호환성 보장은 없습니다.

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

해야한다

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

과

    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-class-properties']
    }

될 것이다

    query: {
      presets: ['@babel/react', '@babel/es2015'],
      plugins: ['@babel/proposal-class-properties']
    }

@babel/proposal-class-properties에서 언급하지 않았기 때문에 혼란 package.json스럽지만 거기에 있다고 가정하면 업데이트해야합니다.

— 로간 프 신화
소스
1
나는 것을 강조 것 babel-loader(8)는 그 다른 모듈 V7과 함께 사용해야하며 사용하는 npm install --save-dev babel-loader@^7나에게 다른 오류가 준
— YakovL을
그런 다음 babel 6 또는 7에만 속하는 패키지를 제공하는 방법은 무엇입니까? 나는 모든 솔루션을 살펴본 다음 @ babel / core 또는 babel-core를 묻습니다. 패키지를 수동으로 변경할 수 있습니까?
— Carmine Tambascia
그런 다음 babel 6 또는 7에만 속하는 패키지를 확인하는 방법은 무엇입니까? 모든 솔루션을 살펴본 다음 @ babel / core 또는 babel-core를 묻습니다. 나는 그것이 캐시 문제에 대해 어떻게 든 잘못된 바벨을 참조하는 노드 모듈과 관련이 있다고 생각합니다. 나는 또한 행운 않고 수동으로 변경하려고
— 카마인 Tambascia
이 상황은 여전히 ​​발생합니다. 지금까지이 도구 github.com/babel/babel-upgrade는 업그레이드에 더 많은 의존성이 제시하는 방법이 보인다
— 카마인 Tambascia
이 오류에 여전히 문제가 있습니다. 누군가 나를 도울 수 있습니까? 익스프레스 서버에서 내 반응 앱 (웹팩 사용)을 실행하려고합니다. 여기 내 github repo ( github.com/smthmelv/my-react-app/tree/addExpressJS )가 있습니다. 어떤 도움이라도 대단히 감사하겠습니다.
— Darneezie
42

그것은 나에게 일어난 나를위한 간단한 솔루션을 제거하는 것이었다 babel-loader@8^과 @babel/core:

npm uninstall --save babel-loader
npm uninstall --save @babel/core

… 그리고 버전 7 babel-loader를 설치하려면 :

npm install --save-dev babel-loader@^7
— 케빈 윤
소스
1
이 정보에 대해 정말 감사드립니다. 나는 또한 babel / core 버전 7과 babel-loader 버전 8을 사용하고있었습니다. 그래서 저는 단지 버전 8을 제거하고 명령으로 버전 7을 설치합니다npm install --save-dev babel-loader@^7
— harbrinder_singh
1
다른 js 프레임 워크가 설치되어 있지는 않지만이 문제가 해결되었습니다.
— Nathaniel Flick
1
웹팩 2를 처음 올바르게 설정 한 몇 주 전 이후로 많은 패키지가 변경 되었기 때문에 기본적으로 오후를 낭비하고 있습니다. 안정적인 패키지를 추적 할 수있는 방법이 있습니까? 이것은 전혀 생산적이지 않습니다. 나는 및 UNISTALL 바벨 패키지를 설치 구성 요소를 유지하지 반응을 개발하고 싶습니다
— 카마인 Tambascia에게
1
내가 (./node_modules/babel-loader/lib/index.js에서) 실패 모듈 빌드 또 다른 오류가 발생했습니다 불구하고 나를 위해이 작품은 그래서 그것을 해결하기 위해 기대
— 프랜시스 티토
1
믿을 수 많은 오픈 소스 프로젝트가 아주 오래된하지만 바벨 7 바벨 6 믹스를 참조하기 때문에 나는이 문제를 가지고 유지로
— 카마인 Tambascia을
11

또한 babel-loaderv8에서 약간 변경되었습니다.

웹팩 4.x | babel-loader 8.x | 바벨 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

웹팩 4.x | babel-loader 7.x | 바벨 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

( @babel/preset-react대신에 대해 동일 babel-preset-react).

— 토마스 데코
소스
8

내 webpack / react 프로젝트에서 동일한 문제가 발생했습니다. .babelrc파일에 문제가있는 것 같습니다 .

아래에 표시된대로 업데이트했고 트릭을 수행했습니다.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}
— 라완 -25
소스
3

이것은 나를 위해 일했습니다.

npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7

그리고 babelrc에서 :

"presets" : ["es2015", "react"]
— 아닐 랄
소스
이 문제를 해결하기에는 아직 완료되지 않았습니다. 일부 숨겨진 종속성이 여전히 이전 버전을 "요구"하는 것을 방지하는 브리지 패키지를 설치하는 것을 잊지 마십시오.이 npm install --save 덕분에 1 시간이 지난 후에이 오류를 해결했습니다. -dev "babel-core@^7.0.0-bridge.0"from here github.com/babel/babel/issues/8482
— Carmine Tambascia
3

이 솔루션은 저에게 효과적이었습니다.

npm install babel-loader babel-preset-react

그런 다음 .babelrc

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

그런 다음 실행 npm run start하면 webpack이 dist디렉토리 를 생성합니다 .

— 라미 엠 무사
소스
3

babel 7에는 버전 6에서 업그레이드가 있습니다 . https://babeljs.io/docs/en/v7-migration 을 참조하십시오 . 현재 문제 / 오류를 해결하려면

설치

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env

그런 다음 .babelrc에서 사전 설정에 대한 종속성은 다음과 같아야합니다.

{

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

   "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"]

}
— 요나탄
소스
1

.babelrc의 사전 설정에 "stage-1"이 있었기 때문에이를 제거하고 오류가 사라졌습니다.

— 샘
소스
1

이는 오래된 바벨 패키지 가 사용되고 있기 때문 입니다. 대부분의 다른 활성 Javascript 프로젝트와 마찬가지로 babel 프로젝트는 범위 패키지 사용으로 이동했습니다. 따라서 패키지 이름은@babel

원사를 사용하는 경우 아래 항목을 따르십시오.

1 단계 : 이전 패키지 제거

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

2 단계 : 새 패키지 추가

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

npm을 사용하는 경우 아래 항목을 따르십시오.

1 단계 : 이전 패키지 제거

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

2 단계 : 새 패키지 추가

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

3 단계 : npm 또는 얀에 공통

최신 패키지를 설치 한 후 .babelrc사전 설정을에서 react으로 업데이트해야 합니다 @babel/preset-react. 다음은 간단한 예입니다.

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
— 아난드 라자
소스
0

코드에 따라 .babelrc 파일을 교체하면 내 문제가 해결됩니다.

{
  "presets": ["module:metro-react-native-babel-preset"]
}
— Rajesh Nasit
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.