Question

从Webpack 1升级到4后，我遇到以下错误：

ERROR in ./node_modules/@my_symlinked_packages/base-accessibility-date-picker/lib/components/AcessibleDatePicker.component.js
Module not found: Error: Can't resolve 'react-dates/lib/utils/isInclusivelyAfterDay' in '/path_to_my_local_app/node_modules/@my_symlinked_packages/base-accessibility-date-picker/lib/components'
 @ ./node_modules/@my_symlinked_packages/base-accessibility-date-picker/lib/components/AcessibleDatePicker.component.js 32:29-83
 @ ./node_modules/@my_symlinked_packages/base-accessibility-date-picker/lib/index.js
 @ ./app/components/borrowing/holds/HoldsPauseDateSelect/HoldsPauseDateSelect.jsx
 @ ./app/components/borrowing/holds/HoldsPauseDateSelect/index.js
 @ ./app/components/borrowing/holds/PauseHoldWorkflowView/components/BasePauseHoldWorkflowView.jsx
 @ ./app/components/borrowing/holds/PauseHoldWorkflowView/components/SinglePauseHoldWorkflowView.jsx
 @ ./app/containers/ItemTransactionWorkflowContainer.jsx
 @ ./app/containers/WorkflowContainer.jsx
 @ ./app/components/widgets/ItemWidget/ItemWidget.jsx
 @ ./app/components/widgets/ItemWidget/index.js
 @ ./app/containers/widgets/ItemWidgetContainer.jsx
 @ ./app/routes/Routes.jsx
 @ ./app/bootstrap.js
 @ multi webpack-dev-server/client?http://localhost:3002 webpack/hot/only-dev-server ./app/bootstrap.js

我认为此错误表明Wepback 4无法解析react-dates模块，这是我进行符号链接的模块的依赖项。

这是我的项目布局示例：

my_symlinked_packages
|-node_modules
|-package.json
|-src
  |-my_lerna_package1
    |-lib
    |-specs
    |-src
    |-package.json (contains react-dates as a dependancy)


consuming_application
|-node_modules
  |-@my_symlinked_packages
    |-my_lerna_package1
|-package.json
|-webpack.config.js
|-app

这是我的webpack.config.js的一个示例（由几个js导入组成）

  //import dependancies
  //assign value to custom variables

  module.exports = { 
    devtool: 'eval',
    context: '/path_to_my_local_app',
    mode: 'development',
    entry:
    { app:
        [ 'webpack-dev-server/client?http://localhost:3002',
          'webpack/hot/only-dev-server',
          './app/bootstrap.js' ],
      vendors:
        [ 'raf/polyfill',
          'babel-polyfill',
          'immutable',
          'iso',
          'jquery',
          'lodash',
          'moment',
          'react',
          'react-router',
          'redux',
          'react-redux',
          'superagent',
          'when',
          'rxjs',
          'handlebars' ] },
    externals: [ 'farmhash' ],
    output:
    { path: '/path_to_my_local_app/public',
      filename: '[name].js',
      chunkFilename: '[name].js',
      publicPath: 'http://localhost:3002/' },
    module:
    { rules:
        [ {
          use: ['react-hot-loader/webpack', 'happypack/loader?id=babel'],
          test:    /\.jsx?$/,
          exclude: /node_modules/,
          include: /app|server|node_modules\/@my_symlinked_packages/
        },
        {
          test: /\.jsx?$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          include: /app|server/
        },
        {
          test:   /\.s?css$/,
          use: [
            'style-loader',
            {
              loader:'css-loader',
              options: {
                importLoaders: 2,
                sourceMap: true
              }
            },
            { 
              loader: 'postcss-loader',
              options: { sourceMap: true, config: { path: postcssConfig } }
            },
            {
              loader: 'sass-loader',
              options: {
                outputStyle: 'expanded',
                sourceMap: true
              }
            }]
        },
        {
          test:   /\.(png|jpg|gif|ico|woff|woff2|eot|ttf|svg)$/,
          loader: 'url-loader?limit=' + inlinedAssetSizeLimit
        },
        {
          test: require.resolve('jquery'),
          loader: 'expose-loader?$!expose-loader?jQuery'
        },
        {
          test: /handlebars\.js/,
          loader: 'expose-loader?Handlebars'
        } ] },
    resolve:
    { symlinks: false,
      modules:
        [ '/path_to_my_local_app/app',
          '/path_to_my_local_app/node_modules',
          '/path_to_my_local_app/vendor' ],
      alias:
        { handlebars: 'handlebars/dist/handlebars.js',
          containers: '/path_to_my_local_app/app/containers',
          constants: '/path_to_my_local_app/app/constants',
          actions: '/path_to_my_local_app/app/actions' },
      extensions: [ '.js', '.jsx' ] },
    plugins: [ // hot reload
      new HappyPack({
        id: 'babel',
        threads: 4,
        loaders: [
          {
            loader:  'babel-loader',
            query: {
              cacheDirectory: true
            }
          }
        ]
      }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.DefinePlugin({
        __CLIENT__: true,
        __SERVER__: false,
        __DEVELOPMENT__: true,
        __DISABLE_SSR__: false
      }),
      new webpack.LoaderOptionsPlugin({
        options: {
          sassLoader: {
            data: `$is-widget: ${widgetBuild ? 'true' : 'false'};`
          },
          eslint: {
            emitWarning: true
          },
          progress: true
        }
      }),

      // https://github.com/halt-hammerzeit/webpack-isomorphic-tools
      new WebpackIsomorphicToolsPlugin(webpackIsomorphicToolsConfig).development()
    ]
  }

这是我的postcss.config.js的摘录

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['last 2 version', 'ie >= 9', 'iOS >= 8']
    }
  }
};

欢迎任何帮助！

Answer 1

我们能够通过添加指向符号链接目录的结节模块的解析路径来解决此问题。

// example shows resolve config pointing to the directory which stores the
// symlinked mono repos
    module.exports = {
      resolve : {
        modules: [
          path.resolve('./app'),
          path.resolve('./node_modules'),
          path.resolve('./vendor'),
          path.resolve('../my_symlinked_packages/node_modules')
        ]
      }
    };

Webpack 4：无法解决符号链接模块的依赖性

1 个答案: