Symlinking реактивные модули с каналом npm для локальной разработки дают ошибку

Во время разработки моего модуля React npm я обозначил его npm link. После этого пакет правильно связан, а также появляется в приложении для потребителей node_modules.

Модуль предоставляет интерфейс для создания компонента React. Поскольку я использую React, jsx и es2015, я использую babel для перевода кода модуля на этапе предварительного опубликования с помощью npm prepublish hook.

Однако, когда я пытаюсь создать свое потребительское приложение с webpack (т.е. после его связывания), в моем пакете возникает ошибка:

Теперь смешно, что если я опубликую пакет на npm, то npm install из реестра моего потребительского приложения, постройте его, все будет хорошо.

Я попытался установить babel-preset-es2015 в своем приложении для пользователей, но потом начинает жаловаться на то, что не нашел babel:

Опять же, если я устанавливаю его из реестра npm, все работает нормально, во время сборки не возникают ошибки.

Я также пробовал установить babel-core, babel-cli и babel-polyfill, все безрезультатно.

Я использую babel v6.1.x всюду и осведомлен о всех последних изменениях, однако, я думаю, что мне не хватает чего-то очевидного и я бы очень признателен, если кто-то может мне помочь, потому что постоянно публикую модуль, чтобы проверить, вещи - это просто плохая практика.

Ниже перечислены шаги, которые я выполняю, чтобы связать модуль:

Трассировка стека после добавления дополнительных зависимостей, связанных с Babel (которые, я считаю, не обязательно, потому что они доступны в модуле response-leafbox):

Я использую node v5.0.0 с npm v3.3.6 на MAC OSX El Capitan v10.11.1. Я также попытался использовать node v4.2.1 с npm 2.14.7, что дает мне те же ошибки.

Ответы

Ответ 1

Я нашел решение своей проблемы. Я обнаружил это в webpack docs:

ВАЖНО: загрузчики здесь разрешены относительно ресурса к которым они применяются. Это означает, что они не разрешены относительными файл конфигурации. Если у вас установлены загрузчики с npm и ваша папка node_modules не находится в родительской папке всего источника файлы, webpack не может найти загрузчика. Вам нужно добавить node_modules как абсолютный путь к опции resolveLoader.root. (resolveLoader: {root: path.join(__ dirname, "node_modules" )})

После добавления опции root в webpack.config.js исчезла ошибка, связанная с невозможностью разрешения babel. Вместо этого я получил новый, который сказал, что он не может решить react. Я определил его как равную зависимость, что заставило меня подумать, что ему нужно отступить, когда он не может найти его локально, тогда я нашел это в docs:

resolve.fallback Каталог (или массив абсолютных путей каталогов), в котором webpack должен искать модули, которые не найдены в resolve.root или resolve.modulesDirectories.

Я объединил эти два параметра в webpack.config.js моего потребительского приложения, и он сработает!

// 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")
    }
};

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

Обновление для Webpack ^ 2.5.0

Удалите объект resolveLoader и замените resolve.fallback на resolve.symlinks на false:

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

Ответ 2

Возможно, это была просто орфографическая ошибка, но она должна быть babel-preset-es2015, а не babel-preset-2015. npm установить babel-preset-es2015.

Ответ 3

У меня была эта проблема, оказалось, что я установил глобально, когда мне нужно было установить ее в свой каталог приложений с помощью npm install webpack webpack-dev-server --save-dev

Ответ 4

У меня возникла эта проблема при попытке настроить демонстрацию маршрутизатора: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up

Все решения здесь не сработали для меня, но что было добавлением файла .babelrc с этим в качестве контента:

{ "пресеты": [ "Реагируют" ] }