Неверный объект конфигурации - Webpack

Я новичок в Webpack и пытаюсь использовать API Twitter в проекте. Все работает нормально, пока мне не потребуются зависимости Twitter и файл конфигурации. Затем я получаю следующие сообщения об ошибках:

Can't resolve 'fs'
Can't resolve 'net'
Can't resolve 'tls'

Это мой package.json

{
  "name": "webpack-4-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "webpack": "^4.6.0",
    "webpack-cli": "^2.1.2"
  },
  "dependencies": {
    "twitter": "^1.7.1"
  }
}

config.js

module.exports = {
   consumer_key: '',
   consumer_secret: '',
   access_token_key: '',
   access_token_secret: ''
}

index.js

const Twitter = require('twitter');
const config = require('./config.js');

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

Я искал ответ, но не нашел объяснения, что случилось. Я нашел ответ в добавлении

node: {
    net: "empty",
    tls: "empty"
}

в webpack.config, но это дает другую ошибку: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

Может кто-нибудь объяснить, что я делаю не так и что здесь происходит? Буду очень благодарен!

файловая структура проекта:

project
-dist
---main.js
-index.html
-node_modules
-package-lock.json
-package.json
-src
---config.js
---index.js
-webpack.config.js

Главный вопрос: собираетесь ли вы делать серверное приложение или интерфейсное приложение? Net, tls, fs - это основные модули nodejs, и если вы думаете, что webpack будет связывать элементы node - вы ошибаетесь. Поэтому, пожалуйста, добавьте дополнительные пояснения об архитектуре приложения и файловой структуре (снимки экрана с файлами, папками)

num8er 01.05.2018 23:56

Моя файловая структура: проект -dist --- main.js -index.html -node_modules -package-lock.json -package.json -src --- config.js --- index.js -webpack.config.js Это интерфейсное приложение

pistevw 01.05.2018 23:59

Хорошо, поэтому вы должны понимать, что пакет twitter, который вы пытаетесь использовать, является модулем nodejs и работает над серверным приложением. Другими словами, вам нужно найти реализацию твиттера на стороне клиента или создать свой собственный класс.

num8er 02.05.2018 00:04

Но я нашел несколько примеров использования пакета twitter npm с js, и когда я попытался запустить пример, он работал с терминала, но не с браузера. Значит, вы говорите, что использовать пакет npm невозможно?

pistevw 02.05.2018 00:15

терминал не является браузером. Вы выполняли js-код в nodejs.

num8er 02.05.2018 00:22

Я нашел этот github.com/liady/webpack-node-externals, если я правильно понимаю, Webpack не должен связывать node_modules, и это может помочь с этим, но когда я пытаюсь его использовать, я получаю сообщение об ошибке: недопустимый объект конфигурации. Webpack был инициализирован с использованием объекта конфигурации, не соответствующего схеме API. Может в этом проблема?

pistevw 02.05.2018 00:30

Измените заголовок вопроса: «Недопустимый объект конфигурации - Webpack», чтобы привлечь экспертов по Webpack.

num8er 02.05.2018 00:33

Я сделал это. Спасибо за ваши ответы.

pistevw 02.05.2018 00:46

Вы неправильно понимаете, что такое wepback-node-externals. Это просто скажет webpack не компилировать определенные пакеты, потому что они доступны во время выполнения (например, fs в nodejs). Это не сделает их доступными в браузере. как сказал @ num8er, вам нужно найти другой твиттер sdk или написать его самостоятельно.

lukas-reineke 02.05.2018 16:35
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
9
262
0

Другие вопросы по теме