Il symlinking reagisce i moduli con il collegamento npm per lo sviluppo locale dà l'errore

Question

Durante lo sviluppo del mio modulo Reactnpm, l'ho simulato con npm link. Dopo aver eseguito questa operazione, il pacchetto viene collegato correttamente e appare anche nell'app consumer node_modules.

Il modulo espone un'interfaccia per creare un componente React. Poiché sto utilizzando React, jsx e es2015, sto utilizzando babel per traspondere il codice del mio modulo nella fase di pre-pubblicazione, utilizzando lo npm prepublish hook.

Tuttavia, quando provo ad installare la mia applicazione consumer con webpack (cioè dopo collegandolo) si verifica un errore nel mio pacchetto affermando:

Module build failed: Error: Couldn't find preset "es2015"

Ora la parte divertente è che se pubblicare il pacchetto su NPM , quindi npm install dal registro nella mia app consumer, compilarlo, tutto funziona correttamente.

Ho provato a installare il babel-preset-es2015 nella mia app consumer, ma poi inizia a lamentarsi di non trovare babel:

Module not found: Error: Cannot resolve module 'babel'

Anche in questo caso, se lo installo dal Registro di NPM tutto funziona bene, nessun errore sono gettati durante costruire.

Ho anche provato a installare babel-core, babel-cli e babel-polyfill, tutto inutilmente.

Sto usando babel v6.1.x ovunque e consapevole di tutte le modifiche recenti, tuttavia suppongo che mi manchi qualcosa di ovvio e lo apprezzerei davvero se qualcuno mi può aiutare, perché pubblica continuamente il modulo per testare se roba funziona è solo una cattiva pratica.

Per completezza bene ecco il codice:

• module
• consumer app

Questi sono i passi che seguo per collegare il modulo:

1. cd ~/Sites/me/react-leafbox
2. npm link
3. cd ~/Sites/me/mapp
4. npm link react-leafbox
5. npm start

traccia stack dopo edificio:

ERROR in ../react-leafbox/lib/index.js 
Module build failed: Error: Couldn't find preset "es2015" 
    at OptionManager.mergePresets (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:329:17) 
    at OptionManager.mergeOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:289:12) 
    at OptionManager.addConfig (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:223:10) 
    at OptionManager.findConfigs (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:366:16) 
    at OptionManager.init (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/options/option-manager.js:410:12) 
    at File.initOptions (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:191:75) 
    at new File (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/file/index.js:122:22) 
    at Pipeline.transform (/Users/daniel/Sites/me/mapp/node_modules/babel-core/lib/transformation/pipeline.js:42:16) 
    at transpile (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:14:22) 
    at Object.module.exports (/Users/daniel/Sites/me/mapp/node_modules/babel-loader/index.js:83:14) 
@ ./src/js/components/App.jsx 2:10-34 

Pila traccia dopo l'aggiunta di dipendenze babel in più correlati (che credo should't essere necessario, perché sono disponibili nel modulo react-leafbox):

ERROR in ../react-leafbox/lib/index.js 
Module not found: Error: Cannot resolve module 'babel' in /Users/daniel/Sites/me/react-leafbox/lib 
@ ../react-leafbox/lib/index.js 8:11-39 

sto usando node v5.0.0 con npm v3.3.6 su MAC OSX El Capitan v10.11.1. Ho anche provato a utilizzare node v4.2.1 con npm 2.14.7, che mi dà gli stessi errori.

Answer 1

Ho trovato una soluzione al mio problema. Ho scoperto questo nel webpack docs:

IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. This means they are not resolved relative the the configuration file. If you have loaders installed from npm and your node_modules folder is not in a parent folder of all source files, webpack cannot find the loader. You need to add the node_modules folder as absolute path to the resolveLoader.root option. (resolveLoader: { root: path.join(__dirname, "node_modules") })

Dopo aver aggiunto l'opzione root al webpack.config.js l'errore di non essere in grado di risolvere babel scomparso. Invece ne ho ricevuto uno nuovo dicendo che non può risolvere react. Ce l'ho definito come una dipendenza pari, il che mi ha fatto pensare ha bisogno di ripiego quando non riesce a trovare a livello locale, poi ho trovato questo nella docs:

resolve.fallback A directory (or array of directories absolute paths), in which webpack should look for modules that weren’t found in resolve.root or resolve.modulesDirectories.

ho unito queste due opzioni nella webpack.config.js di la mia app di consumo e ha funzionato!

// webpack.config.js 
var path = require('path'); 

module.exports = { 

    entry: path.resolve(__dirname, 'src/js/index.js'), 

    output: { 
     path: path.resolve(__dirname, 'dist'), 
     filename: "build.js" 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules)/, 
       loader: 'babel', 
       query: 
        { 
         presets:[ 'react', 'es2015' ] 
        } 
      } 
     ] 
    }, 

    resolve: { 
     extensions: [ '', '.js', '.jsx' ], 
     fallback: path.join(__dirname, "node_modules") 
    }, 


    resolveLoader: { 
     root: path.join(__dirname, "node_modules") 
    } 
}; 

Spero che questo aiuti chiunque a trovare un problema simile.

Aggiornamento per Webpack^2.5.0

Rimuovere il resolveLoader oggetto e sostituire resolve.fallback con resolve.symlinks insieme a false:

resolve: { 
    extensions: [ '', '.js', '.jsx' ], 
    symlinks: false 
} 

Answer 2

Forse era solo un errore di ortografia, ma dovrebbe essere babel-preset-es2015 non babel-preset-2015. npm installa babel-preset-es2015.

Answer 3

Ho avuto questo problema, risulta avevo installato a livello globale quando avevo bisogno di installarlo sul mio app dir con npm install webpack webpack-dev-server --save-dev

Answer 4

ho avuto questo problema quando si cerca di impostare il router demo: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up

al l le soluzioni qui non ha funzionato per me, ma quello che ha fatto è stato l'aggiunta di un file .babelrc con questo come un contenuto:

{ "preset": [ "reagire" ] }