Получение «Ошибка: не удается разрешить <custom_module_name>» при попытке использовать пользовательский модуль, созданный локально - PullRequest
Новая
       30

Получение «Ошибка: не удается разрешить <custom_module_name>» при попытке использовать пользовательский модуль, созданный локально

2 голосов
/ 09 апреля 2019

Я пытаюсь импортировать модуль, который я создал локально и связал / установил с другим модулем, который собран и запущен через веб-пакет.

Я использовал различные методы для интеграции пользовательского модуля в другой модуль:

  1. npm link пользовательский модуль для создания символической ссылки, которая появляется в каталоге node_modules другого модуля
  2. npm install <local_absolute_path> пользовательский модуль для его установки
  3. Используйте wml (https://github.com/wix/wml) для копирования измененных файлов в пользовательском модуле в node_modules
  4. Опубликовал пользовательский модуль для npm, а затем установил его в другом модуле

Все эти методы по-прежнему приводили к тому, что webpack и Flow отображали Cannot resolve ошибки

Версия NPM: 6.9.1-next.0 версия узла: 8.8.1

Вот файл package.json для пользовательского модуля: 

{
  "name": "custom_module_name",
  "version": "2.3.0",
  "repository": {
    "type": "git",
    "url": "-----"
  },
  "license": "UNLICENSED",
  "engines": {
    "node": ">=10.10.0",
    "npm": ">=6.4.1"
  },
  "ava": {
    "files": [
      ".test/**/*.js"
    ],
    "require": [
      "./test/helpers/config.js",
      "./test/helpers/utils.js"
    ],
    "babel": {
      "testOptions": {
        "babelrc": false
      }
    },
    "sources": [
      ".dist/**/*"
    ],
    "serial": true,
    "verbose": true,
    "failFast": false,
    "color": true,
    "concurrency": 1,
    "failWithoutAssertions": false,
    "tap": false,
    "timeout": "180s"
  },
  "nightmare": {
    "doc": true,
    "show": true,
    "openDevTools": {
      "mode": "detach"
    },
    "executionTimeout": 10000,
    "waitTimeout": 120000,
    "webPreferences": {
      "partition": "nopersist"
    },
    "switches": {
      "ignore-certificate-errors": true
    },
    "show_console_logging": false
  },
  "glslify": {
    "transform": [
      "glslify-import"
    ]
  }
}

Вот файл webpack.common.js для другого модуля, который пытается импортировать пользовательский модуль: 

const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const FlowWebpackPlugin = require('flow-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['babel-polyfill', 'react', 'react-dom'],
    annotationService: glob.sync('./ClientScripts/---/*.js'),
    sass: './sass/main.scss'
  },
  output: {
    path: path.join(__dirname, 'reactDist'),
    filename: 'js/[name].js',
    publicPath: '/---/',
    sourceMapFilename: 'map/[name].map'
  },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  },
  resolve: {
    alias: {
      Interfaces: path.resolve(__dirname, 'ClientScripts/Interfaces/'),
      "custom_module_name": path.resolve(__dirname, 'node_modules/custom_module_name/')
    },
    symlinks: false
  },
  target: 'web',
  node: {
    fs: "empty"
  },
  externals: {
    'winston': 'require("winston")' // https://stackoverflow.com/questions/37840566/how-do-i-get-winston-to-work-with-webpack/37841103
  },
  module: {
    rules: [
      { test: /\.js$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: [/node_modules/] },
      { test: /\.env$/, loader: "file-loader?name=index.[ext]", exclude: [/node_modules/] },
      {
        test: /\.scss$|\.css$/,
        exclude: /node_modules/,
        loader: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader",
            options: {
              minimize: true
            }
          },'sass-loader']
        })
      },
      { test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader?name=img/[name].[ext]?',
        options: {
          name (file) {
            if (process.env.environment === 'prod') {
              return '[path][name].[hash].[ext]'
            }

            return '[path][name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({ filename: 'css/timeline.[md5:contenthash:hex:20].css', disable: false, allChunks: true }),
    new FlowWebpackPlugin()
  ]
}

А вот и мой .flowconfig

[ignore]
.*/node_modules/flow-webpack-plugin/.*
.*/node_modules/custom-module-name/.*
.*/node_modules/custom-module-name/**/test/.*
.*/node_modules/.*\.json$
.*/node_modules/\.staging/.*

[libs]
flow-typed

[options]
module.name_mapper='^Interfaces\/\(.*\)$' -> '<PROJECT_ROOT>/ClientScripts/Interfaces/\1'
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.svg
module.file_ext=.json

Две ошибки, которые я постоянно получаю: 

ERROR in ./ClientScripts/-/DashboardGrid.jsx
Module not found: Error: Can't resolve 'custom_module_name' in '-/ClientScripts/-/components'

Я полагаю, что это из веб-пакета 

ERROR in Flow validation
Error ------------------------------------------ ClientScripts/-/DashboardGrid.jsx:11:22

Cannot resolve module custom_module_name.

      8| const ReactGridLayout = WidthProvider(RGL);
      9|
     10| // AKDV
     11| import { Test } from 'custom_module_name';

который исходит из потока

Я предполагаю, что проблема связана с самой настройкой пользовательского модуля ... Есть идеи, что с ним не так?

...