React-dnd: Erro de Babel - Uso da opção Babel 5 removida

Criado em 12 mar. 2016  ·  16Comentários  ·  Fonte: react-dnd/react-dnd

Sou um novato no babel, configurei um novo projeto, instalei o babel, instalei o react-dnd via bower e meu .babelrc tem a seguinte linha
{ "presets": ["es2015", "stage-0", "react"] }
Falha na construção do módulo: ReferenceError:

[BABEL] <path>\bower_components\react-dnd\src\index.js: Using removed Babel 5 option: <path>\bower_components\react-dnd\.babelrc.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets

O que estou fazendo de errado

Comentários muito úteis

@ walter0331

loader: 'babe-loader'

Isso deve ser uma coisa.

Todos 16 comentários

Olá @ jagan-veeraraghavan! Como você está incluindo o react-dnd no Bower? Você deve estar fazendo isso como esta .

Parece que, em vez disso, você está apontando o Bower para todo o repositório Github. Isso não funcionará porque inclui .babelrc , um arquivo de configuração do Babel 5 incompatível com a versão do Babel que você está usando (6). A distribuição npm omite este arquivo (aliás, sugerimos usar npm no Bower).

Se eu estiver errado, fique à vontade para reabrir o problema. Eu também recomendo a sala do

HI, tive um problema semelhante, usando webpack e 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

aqui estão minhas configurações:

package.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"]
}

webpack

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

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

Alguém pode me ajudar por favor?

Ahhh, eu consertei excluindo node_modules em webpack.conf: dancers:

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

resolve meu problema, muito obrigado!

@ walter0331

loader: 'babe-loader'

Isso deve ser uma coisa.

@billyjanitsch , você considerou atualizar o babel? Você estaria aberto para relações públicas com ele?

Estou tendo esse problema com o Webpack e o Babel 6. Da mesma forma que @ walter0331. Preciso manter isso funcionando em meu Babel, pois estamos fazendo a minificação personalizada de node_modules portanto, excluir node_modules não vai me ajudar.

Só para esclarecer, acho que todo mundo quer dizer "babel-loader" ao invés de "babe-loader".

loader: 'babel-loader'

Estou tentando atualizar do babel5.x para 6.x e obtendo o mesmo erro. Estou usando o react, redux com babel 6 e webpack.

Abaixo está minha configuração do webpack (parcial)
módulo: {
carregadores: [
{teste: /.svg$/, exclui: /.less$/, carregador: 'svg-inline'},
{test: /.coffee$/, loader: 'coffee-loader'},
{teste: /.jsx?$/, exclui: / node_modules /,
carregadores:
['react-hot-loader / webpack', 'babel-loader?' + JSON.stringify ({
predefinições: ['es2015', 'stage-0', 'react'],
plug-ins: ['transform-decorators-legacy',
['transform-async-to-module-method',
{'módulo': 'pássaro azul', 'método': 'co-rotina'}
]]
})
]
},
{test: /.less/, loader: 'style-loader! css-loader! less-loader'},
{test: /.css/, loader: 'style-loader! css-loader'},
{test: /.json$/, loader: 'json-loader'},
{test: /.gif$/, loader: "url-loader? mimetype = image / png"},
{test: /.woff(2)?(\?v=[0-9].[0-9].[0-9])?$/, loader: "url-loader? limit = 10000 & minetype = application / font-woff "},
{test: /.(ttf|eot|svg)(\?v=[0-9].[0-9].[0-9])?$/, loader: "file-loader"},
{test: /jquery.js$/, loader: 'expose? jQuery'},
]
},

.babelrc

{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy", ["transform-async-to-module-method", {
"módulo": "pássaro azul",
"método": "co-rotina"
}]]
}

Notei uma coisa que essa mensagem de erro aparece principalmente para os arquivos onde estou importando o Promise do 'bluebird'.

Alguém pode ajudar?

ressalto. Existe alguma maneira de ignorar as configurações de babel de dependências em tempo de construção ...?

@ walter0331 muito obrigado, esse problema não me deixou tão confuso até que li sua solução. Mas eu não entendo o princípio de porque isso pode funcionar definindo assim: exclude: / (node_modules | bower_components).

@ ry928330 basicamente, o disposables lib é usado em react-dnd , e disposables usa uma versão desatualizada do Babel, Babel 5 (esta biblioteca não é mantida). Se incluído na configuração do webpack, isso cria um conflito porque agora estamos na versão 6 do Babel. Portanto, a melhor solução aqui (pelo menos o que funcionou para mim), não é necessariamente excluir todos os node_modules, mas apenas o conflitante.

adicione exclude: /(disposables)/ na configuração do webpack do seu babel-loader, por exemplo:

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

Essa é a solução certa. É irrelevante qual versão do Babel disposables usa nos bastidores. O verdadeiro problema é que você está tentando compilar node_modules com o Babel. Isso nem sempre é seguro e você não deve fazer isso a menos que saiba o que está fazendo e apenas aceite pacotes específicos (ou use outro sinal, como o campo engines e desconsidere a configuração).

Dito isso, publiquei uma "correção" em [email protected] . Ainda assim, se você compilar tudo em node_modules você está pedindo problemas.

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

está funcionando, obrigado!

Eu consertei por add []
presets: [ ["es2015", { loose: false }] ]

isso aconteceu comigo depois que eu inadvertidamente adicionei stage: 1 ao meu arquivo server/.babelrc .

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

corrigido removendo este

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"],
}
Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

BrennanRoberts picture BrennanRoberts  ·  3Comentários

rubayethossain picture rubayethossain  ·  3Comentários

FutureProg picture FutureProg  ·  3Comentários

redochka picture redochka  ·  3Comentários

dwjohnston picture dwjohnston  ·  3Comentários