React-dnd: Babel 오류 - 제거된 Babel 5 옵션 사용

안녕하세요 @jagan-veeraraghavan! Bower에 react-dnd를 어떻게 포함하고 있습니까? 당신은 그렇게해야 같은 .

대신 Bower가 전체 Github 저장소를 가리키도록 하는 것 같습니다. .babelrc 사용 중인 Babel 버전과 호환되지 않는 Babel 5 구성 파일(6)이 포함되어 있기 때문에 작동하지 않습니다. npm 배포판은 이 파일을 생략합니다(btw, Bower보다 npm을 사용하는 것이 좋습니다).

내가 틀렸다면 자유롭게 문제를 다시 열 수 있습니다. 또한 이와 같은 지원 질문에 대해 gitter room 을 추천합니다.

안녕하세요, webpack과 babel 6을 사용하여 비슷한 문제가 발생했습니다.

ERROR in ./~/dnd-core/lib/index.js
Module build failed: ReferenceError: [BABEL] /node_modules/dnd-core/lib/index.js: 
Using removed Babel 5 option: /node_modules/dnd-core/.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

내 설정은 다음과 같습니다.

패키지.json

{
  "devDependencies": {
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.5.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.1",
    "less": "^2.6.1",
    "less-loader": "^2.2.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "babel-polyfill": "^6.3.14",
    "expose-loader": "^0.7.1",
    "jquery": "^2.1.4",
    "lodash": "^3.10.1",
    "react": "^0.14.7",
    "react-dnd": "^2.1.3",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^0.14.7",
    "tracking": "^1.1.2"
  }
}

.babelrc

{
  "presets": ["react", "es2015", "stage-0"]
}

웹팩

var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ]
  }
};

아무도 나를 도와줄 수 있습니까?

아, webpack.conf에서 node_modules 를 제외하여 수정했습니다 :dancers:

      {
        exclude: /(node_modules|bower_components)/,
        test: /\.js$/,
        loader: 'babe-loader'
      },

그것은 내 문제를 해결합니다, 대단히 감사합니다!

@월터0331

로더: '베이비 로더'

이것은 일이어야합니다.

@billyjanitsch babel 업데이트를 고려 했습니까? 당신은 그것으로 PR을 열겠습니까?

Webpack 및 Babel 6에서 이 문제가 발생했습니다. @walter0331과 유사합니다. node_modules 의 사용자 정의 축소를 수행하고 있으므로 node_modules 를 제외하면 도움이 되지 않으므로 내 Babel을 통해 이 작업을 계속 실행해야 합니다.

명확히하기 위해 모든 사람들은 "babe-loader"가 아니라 "babel-loader"를 의미한다고 생각합니다.

loader: 'babel-loader'

babel5.x에서 6.x로 업그레이드하려고 하는데 동일한 오류가 발생합니다. 나는 babel 6 및 webpack과 함께 react, redux를 사용하고 있습니다.

아래는 내 웹팩 구성(일부)입니다.
모듈: {
로더: [
{ 테스트: /.svg$/, 제외: /.less$/, 로더: 'svg-inline'},
{ 테스트: /.커피$/, 로더: '커피 로더' },
{ 테스트: /.jsx?$/, 제외: /node_modules/,
로더:
['react-hot-loader/webpack', 'babel-loader?' + JSON.stringify({
사전 설정: ['es2015','stage-0','반응'],
플러그인: ['transform-decorators-legacy',
['비동기를 모듈 방식으로 변환',
{'모듈': '블루버드', '메서드': '코루틴'}
]]
})
]
},
{ 테스트: /.less/, 로더: 'style-loader!css-loader!less-loader' },
{ 테스트: /.css/, 로더: 'style-loader!css-loader' },
{ 테스트: /.json$/, 로더: 'json-loader' },
{ 테스트: /.gif$/, 로더: "url-loader?mimetype=image/png" },
{ 테스트: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, 로더: "url-loader?limit=10000&minetype=application/ font-woff" },
{ 테스트: /.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, 로더: "파일 로더" },
{ 테스트: /jquery.js$/, 로더: 'expose?jQuery' },
]
},

.babelrc

{
"사전 설정": ["es2015", "반응", "단계-0"],
"플러그인": ["변형 데코레이터-레거시", ["변형-비동기-대-모듈-방법", {
"모듈": "블루버드",
"메서드": "코루틴"
}]]
}

이 오류 메시지는 주로 'bluebird'에서 Promise를 가져오는 파일에 대해 나타납니다.

아무도 도울 수 있습니까?

충돌. 빌드 시 종속성의 babel 구성을 무시할 수 있는 방법이 있습니까...?

@walter0331 정말 감사합니다. 이 문제로 인해 귀하의 솔루션을 읽을 때까지 혼란

@ry928330 기본적으로 disposables 라이브러리는 react-dnd 에서 사용되고 disposables 는 오래된 babel 버전인 Babel 5를 사용합니다(이 라이브러리는 유지 관리되지 않음). webpack 구성에 포함되면 현재 Babel 버전 6에 있기 때문에 충돌이 발생합니다. 따라서 여기서 더 나은 솔루션(적어도 저에게 효과가 있었던 것)은 반드시 모든 node_modules를 제외 하는 것입니다.

babel-loader webpack 구성에 exclude: /(disposables)/ 를 추가합니다. 예를 들면 다음과 같습니다.

{
     test: /\.js$/,
     exclude: /(disposables)/,
     loader: 'babel-loader',
}

그것이 올바른 해결책입니다. Babel disposables 의 어떤 버전이 내부에서 사용되는지는 중요하지 않습니다. 진짜 문제는 Babel로 node_modules 를 컴파일하려고 한다는 것입니다. 이것은 항상 안전한 것은 아니며 수행 중인 작업을 알고 특정 패키지만 선택하지 않는 한(또는 engines 필드와 같은 다른 신호를 사용하고 구성을 무시하지 않는 한) 이 작업을 수행해서는 안 됩니다.

즉, [email protected] "수정"을 게시했습니다. 그래도 node_modules 에서 모든 것을 컴파일하면 문제가 발생합니다.

mix.webpackConfig({ module: { rules: [{ test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: Config.babel() } }] } })

그것은 작동합니다, 감사합니다!

[]를 추가하여 수정했습니다.
presets: [ ["es2015", { loose: false }] ]

이것은 실수로 server/.babelrc 파일에 stage: 1 를 추가한 후에 발생했습니다.

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
   stage: 1
}

이것을 제거하여 고정

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
}