web-dev-qa-db-fra.com

lien npm avec webpack - module introuvable

J'essaie de lier un module à un projet en utilisant Webpack en tant que bundle. Bien sûr, après avoir essayé beaucoup de choses, je continue à avoir cette erreur:

ERROR in ./src/components/store/TableView.jsx
Module not found: Error: Cannot resolve module 'react-bootstrap-table'

Voici les étapes exactes que je fais en faisant ceci:

1.) cd ../forks/react-bootstrap-table
2.) npm link
(success, checked ~/.nvm/.../node_modules/react-bootstrap-table for symlink and it's there)
3.) cd ../../projRoot/
4.) npm link react-bootstrap-table
(no errors thrown?, says successful link)
5.) node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js

Solutions que j'ai essayées:
- https://webpack.github.io/docs/troubleshooting.html
- Comment faire en sorte qu'un composant lié peerDepdencies utilise les node_modules équivalents du script auquel le lien est associé?
- Et de nombreux liens violets sur google serps

webpack.config.js 

const webpack = require('webpack')
const path = require('path')
const ROOT_PATH = path.resolve(__dirname)

module.exports = {
  devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
  entry: [
    'webpack/hot/only-dev-server',
    './src/index.js'
  ],
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loaders: ['react-hot','babel']
    },
    {
      test: /\.scss$/,
      loaders: ['style','css','sass'],
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      loaders: ['style','css']
    },
    {
      test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
      loader: 'file-loader'
    }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    fallback: path.resolve(__dirname, './node_modules')
  },
  resolveLoader: {
    fallback: path.resolve(__dirname, './node_modules')
  },
  output: {
    path: process.env.NODE_ENV === 'production' ? path.resolve(ROOT_PATH, 'app/dist') : path.resolve(ROOT_PATH, 'app/build'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: path.resolve(ROOT_PATH),
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    stats: 'errors-only',
    Host: '192.168.1.115'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

Notes:
1. C'est le seul lien symbolique du projet.
2. J'exécute npm install dans la version forkée (également essayé sans, ne fonctionne pas)
3. J'utilise NVM, mais j'ai utilisé des liens symboliques auparavant sans WebPack avec succès. 

J'y travaille depuis quelques jours maintenant, toute aide sera grandement appréciée. 

javascriptnode.jsnpmwebpacknvm
13
bmills

Ok les gars, cela est spécifique à mon cas d'utilisation, mais assurez-vous de suivre toutes les instructions pour construire complètement la bibliothèque que vous symbolisez. Au départ, je construisais et installais npm, mais cela ne suffisait pas. J'ai dû exécuter quelques commandes supplémentaires pour que la bibliothèque soit entièrement construite.

Maintenant ça marche! Si vous rencontrez toujours des problèmes, consultez la documentation de chaque bibliothèque que vous symbolisez, et utilisez ma configuration de WebPack comme modèle pour la résolution des bibliothèques externes.

0
bmills

Je faisais face à un problème similaire avec webpack et j'ai fini par ajouter ceci mon webpack.config.js:

module.exports = {
    resolve: {
        symlinks: false
    }
};

Voici le lien vers webpack docs . Depuis votre question, il y a beaucoup de choses à webpack et à leur api, donc je ne sais pas quelle pertinence a encore ma réponse selon votre question. Mais pour les personnes confrontées à ce problème ou à un problème similaire aujourd'hui, cela pourrait être une solution. Comme on peut le voir, il y a encore des gens qui se plaignent:

0
Beat