Skip to main content

[webpack] タグが付いた質問

タグの使い方はまだ書かれていません。

絞り込み
並べ替え
タグ付けされた
1
0 回答
72 閲覧数

Rails7でwebpackerからvite_railsに移行したが@rails/ujsが読み込めずにdestroyリクエストがgetリクエストになってしまう

前提 私はRails6で構成されていたアプリをRails7にバージョンアップした。 同時にwebpackerからviteに移行しました。 開発環境では問題なく動いていますが、本番環境ではrails/ujsがうまく動作していません。 現状 ブラウザのconsoleタグで以下のエラーが表示されている。 Uncaught TypeError: Cannot set properties of ...
user66795's user avatar
0
1 回答
85 閲覧数

LaravelMix、LaravelVIteでMaterializeCSSのAutoInitがエラーになる

概要 Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、 エラーになります。 この解決方法がわかりません。 エラー内容 Uncaught TypeError: can't access property "AutoInit", ...
zenzenzenone's user avatar
2
0 回答
77 閲覧数

nuxt2 tiptapを導入してビルド(yarn build)が出来ない: Cannot find name 'type'

概要 nuxt.jsを使ってLP作成のエディタを作成しようとtiptapというエディタのライブラリを入れたのですがビルド時(yarn build)にエラーになるので解消したい。 仕様技術、前提 vue2 nuxt2 typescript 導入ライブラリ package.jsonの差分を記載(yarn addで追加) "@tiptap/extension-color":...
tk2's user avatar
  • 21
0
1 回答
289 閲覧数

ElectronのTypescript+Webpackテンプレートが実行できない

Electron Forgeのページに従い、Electronのテンプレートを以下のコマンドを実行してインストールしました。 npx create-electron-app my-new-app --template=typescript-webpack 次に npm run start を実行すると、コマンドウィンドウに以下のようなエラーメッセージが表示されました。 $ npm run ...
suzuki's user avatar
  • 3
0
1 回答
329 閲覧数

Webpackを使用すればグローバル汚染は起こりませんか?

npmで入れたグローバル汚染(グローバルスコープに変数や関数を定義)している外部のライブラリをWebpackでバンドルした場合、グローバル汚染の問題は解消されますか?(Webpackでいい感じにしてくれますか?) そうでない場合、外部ライブラリがグローバル汚染しているかどうか分かる方法などはありますか?
Mikawa's user avatar
  • 1
0
0 回答
157 閲覧数

tfjs-modelsのpose-detectionでポーズ解析を行っているが、「TypeError: t is not a function」というエラーが出力

現在、tfjs-models/pose-detectionのライブラリを用いて、ポーズ解析のモジュールを追加実装しているところです。下記コードで処理を行っていますが、下記エラーが出力して処理ができない状況です。原因が分からず困っています... 実装コード(一部) import '@tensorflow/tfjs-core'; import '@tensorflow/tfjs-converter'; ...
ryupim's user avatar
  • 1
1
1 回答
345 閲覧数

Webpackのloaderを通すとファイルの内容が変わってしまう

やりたいこと Webpackする時に、テキストファイルをそのままstringとしてimportしたい。 (最終的にglslifyを使ってglsl文字列を扱いたい) 期待する結果 以下の内容でWebpackし、メインのjsを走らせた時に「aaaa」が出力される。 raw.txt aaaa index.js import raw from 'raw-loader!./raw.txt'; ...
greenmoonslug's user avatar
2
1 回答
299 閲覧数

webpackエラーについて(optionsに不明なプロパティ'minimizerOptions'があります)ImageMinimizerPluginの対処方法を教えてください

buildをすると下記のようなエラーが出ており対処方法がわかりません。 [webpack-cli] Failed to load 'C:\Users\facto\Desktop\Course-Documentation-Part-1\code\webpack.config.build.js' config [webpack-cli] Invalid options object. Image ...
りんりん's user avatar
0
0 回答
343 閲覧数

Reactでエラー TypeError: The "original" argument must be of type Function

Google Cloud Platform(GCP)でwebアプリを作っています。 webアプリからGCP Storageに画像をアップロードするようなものを作りたく、 Node.jsからCloud Storageを利用(入門)などを参考にしているのですが、 const {Storage} = require('@google-cloud/storage'); ...
lucolaz's user avatar
1
1 回答
822 閲覧数

webpack での jquery の $ 変数の扱いについて

jquery-ui と jquery.validationEngine を同時に使いたいのですがうまくいきません どちらも $ っていう変数に対してメソッドを追加してるんだと思うんですが片方を使うともう片方が使えなくなります jquery-ui は公式サイトダウンロードビルダーから zip ダウンロードしたものを app/javascript/vendor/jquery-ui に展開 ...
user avatar
0
1 回答
413 閲覧数

Node.js+VUE.JSにてリクエストヘッダにX-Forwarded-forを付与してバックエンドにPOSTしたい

題記の通りです。 現状webpackの設定ファイルにproxyを設定し特定のアドレスパターンの場合はバックエンドサーバに通信しているのですがそのときにリクエストヘッダにX-Forwarded-forとしてリモートアドレスを付与してPOSTしたいのですがどこにどのような設定をすればよいのかわかりません。 ご教示ください
りゅうしゃん's user avatar
0
1 回答
440 閲覧数

Rails + webpacker における global と window と config/webpack/environment.js の違い

Rails 6 から JS が webpacker 管理になって ビューに onclick="..." でうめこんだJSが動いたり動かなかったりするので困っています モジュールになっちゃうせいでグローバルコンテキストにないせいかと思うんですが window.xxx に代入する global.xxx に代入する config/webpack/environment.js の ...
user avatar
0
1 回答
4,713 閲覧数

webpackのdevServer はどうやって立ち上げるのでしょうか?

Preactの始め方&Reactとの違い - Qiita を参考に構築を行いました。 これでwebpackのdevServerを立ち上げれば、Hello World!が表示されるはずです。 とありますが、どうやって立ち上げるのでしょうか? webpack-dev-serverの基本的な使い方と設定方法の詳しい解説 をみて、package.json に "start":...
shingo.nakanishi's user avatar
1
1 回答
366 閲覧数

Rails6/Webpacker環境で外部JSファイル内でHTMLのIDを取得したい

発生している問題 外部Javascript内でdocument.getElementByIdを使用しHTMLのIDを取得しようとするとUncaught TypeError: document.getElementById(...) is null が発生します。 app/javascript/chk_waittime/index.js document.getElementById('...
leo's user avatar
  • 73
1
1 回答
326 閲覧数

UAParser.js をインポートできない

TypeScript & Polyfill 環境を作ろうと、後述の通りセットアップを行いました。 この環境で UAParser.jsを利用しようと import { UAParser } from "ua-parser-js"; と記述したのですが、ビルド時に次のような警告が出力されました。 WARNING in ./src/main/js/index.ts 8:21-...
DEWA Kazuyuki - 出羽和之's user avatar
0
1 回答
67 閲覧数

Vue.jsとFirebaseでログイン機能を実装したいです。

前提・実現したいこと Vue.jsとFirebaseでログイン機能を実装したいです。 新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。 成功すると、...
hamster's user avatar
0
1 回答
297 閲覧数

webpack利用時、jestを実行するとCannot find moduleエラーが発生

環境依存値(APIのURL)を取得するために、webpackを使用しています。 参考: JavaScriptでデプロイ環境ごとに設定ファイルを読み込む方法 正しくビルド、実行されましたが、環境別の設定値を持つindex.tsを用いる機能についてjestを実行したところ、下記の通りエラーとなりました。 Cannot find module './_test' from 'ts/environment/...
suzy998's user avatar
0
1 回答
950 閲覧数

electronにてwebpackでソースのビルドが成功しているのに何も表示されない

electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました 参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます main.js const electron = require(&...
rea_eng's user avatar
0
1 回答
2,024 閲覧数

webpackでnpmでインストールしたjQueryを使いたい

webpack4+jQuery+sass環境を作りたいのですが、 jQueryを使う設定がうまくいかず、下記のようなエラーが出てしまいます。 ERROR in ../js/index.js Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js' @ ../js/index....
user37807's user avatar
0
1 回答
296 閲覧数

npm, browsefiryを利用し複数の外部ライブラリを1つにビルドする運用をしたいが、フロント側でクラス名のnot definedエラーが出力されてしまう

Webサービスを個人的に開発しております。 npm, browserifyを利用し、フロントエンドで利用するいくつかの外部ライブラリを1つにビルドし、 HTMLにはjsファイル1行書けば済むように運用したいのですがエラーが出てしまい、解決できずに悩んでおります。 LaravelMix+...
cRR's user avatar
  • 3
0
0 回答
1,466 閲覧数

manifest.jsonで定義されているjsファイルが生成されない

前提・実現したいこと Rails 6で、manifest.jsで定義されているファイル名の、jsが生成されません ビルドしたところ、public/packs以下にcssファイルとjsファイル、manifest.jsonは生成されるのですが、jsファイルだけネームが違います 開発環境では、webpacker_dev_serverを使用することで問題なく機能しているのですが、herokuデプロイ時に、...
hibichan's user avatar
0
1 回答
1,645 閲覧数

webpackerのエラーによってAWSでRails6のアプリを表示できません

環境 rails 6.0.2.1 ruby 2.6.3 amazon linux mysql nvm v14.2.0 node v14.2.0 yarn 1.22.4 前提・実現したいこと EC2を使ってAWSにRails6で作ったアプリをデプロイしているところです。 https://qiita.com/Yuki_Nagaoka/items/55ed1610cfc1f59398b1 ...
jimbo5922's user avatar
0
1 回答
580 閲覧数

Rails6で、実行環境時にFont Awesomeの絵文字が四角に表示される

環境 Ruby 2.6.3 Ruby on Rails 6.0.0 Yarn 1.22.4 Webpacker 5.1.1 @fortawesome/fontawesome-free 5.13.0 問題 記事(https://techracho.bpsinc.jp/hachi8833/2020_01_17/85943)の通りにRailsにYarnでFontawesomeパッケージを導入し、...
yudukikun5120's user avatar
0
1 回答
804 閲覧数

Rails5.2.3から6.0.2へのアップグレード後に起動できない

ActionTextを使用するために、Railsを5.2.3から6.0.2にアップグレードしたところ、 起動しなくなってしまいました。 rails sを実行すると下記のエラーのため、 webpackerがインストールされていないのが原因かと思っておりますが ◾️rails sでのエラー内容 /Users/〜/projects/blog/vendor/bundle/ruby/2.5.0/...
user avatar
0
1 回答
861 閲覧数

webpackでjQueryをすべてのjsファイル内で使いたい

webpack+scss+jQuery環境を作ろうとしています。 webpack+scssまではできたのですが、jQuery環境がうまくいきません。 index.js内でもutility.js内でも $ が使えるようにしたいです。 webpackでjqueryを使用、しかし「$ is not defined」のエラー - teratail こちらを参考にして plugins: ...
user37807's user avatar
0
1 回答
9,472 閲覧数

webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません

質問の主旨 現在、Reactを勉強中で本を読み進めてチャットアプリを作成しています。ですが、webpackのコンパイルでよく理解できないエラーが出てしまいうまくいきません。 ブラウザは立ち上がるのですが、画面が白いまま、エラーが出ます。 初心者なので、webpack周りのエラーのことを調べてみても結局よくわからないままです。 開発環境は以下の通りです。 インストールしたライブラリ Node....
user avatar
1
2 回答
2,924 閲覧数

webpack-dev-serverをインストールしたもののローカル開発環境(localhost:8080)で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか?

いつもお世話になっております。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 【質問の主旨】 GitHubにUPしているコードを$ npm start もしくは $ npm run startで実行するとターミナルの画面で下記のエラーが出ます。 > @ start /Users/MYUSERNAME/Desktop/firebase/...
echizenya_yota's user avatar
1
2 回答
1,350 閲覧数

Node.jsの環境でwebpackを実行すると、`WARNING`の注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。

いつもお世話になっています。 下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。 【質問の主旨】 webpackをインストールすると、WARNINGの注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。 【質問の主旨】 1. モジュール構成のアプリを1ファイルにまとめるために、...
echizenya_yota's user avatar
1
0 回答
80 閲覧数

レンダリング専用スクリプトが無くても正常に表示されるのは何故か?

Electronの初心者なりにMain ProcessとRendering Processの間の違いが分かっていますが、この記事を読んで、Webpackで構成されるElectornアプリにはtarget: 'electron-renderer'専用ファイルは何の為必要か、良くわかりませんでした。そもそも、レンダリングプロセス専用エントリーポイントファイル(src/renderer/index.js)...
徳川武's user avatar
  • 213
3
0 回答
97 閲覧数

CSS Modulesで@importを含んだCSSのクラス名が取得できない

webpackのcss-loaderを使ったCSS Modulesで @import したファイルのクラス名が取得できません。以下に最小と思われる再現コードを掲載します。 再現コード test.html <script src="dist/main.js"></script> JavaScriptを実行するのが目的です。 src/index.js const ...
user29556's user avatar
1
1 回答
379 閲覧数

単独ファイルコンポネント(.vueファイル)にも、vue-class-componentのクラスにもpugプレプロセッサーを利用出来るようなWebpack設定

Vue.js 説明書に依ると、単独ファイルコンポネント(.vueファイル)でpugプレプロセッサーを利用するにはpug-loaderではなく、pug-plain-loaderが要ります: { test: /\.pug$/, loader: 'pug-plain-loader' } 単独ファイルコンポネント(.vueファイル)に加えて、vue-property-decorator(vue-...
徳川武's user avatar
  • 213
0
1 回答
318 閲覧数

useを配列にした場合のloaderの読み込み順

webpackの設定をしているのですが、 loaderを配列で指定した場合、読み込む順番は、index番号が若い順で読み込まれるのでしょうか? module.exports = { module: { rules: [ { test: /\.css$/, use: ['...
osushi's user avatar
  • 57
2
1 回答
272 閲覧数

babelを内部で使用したjsをwebpackでバンドルできない

以下のjsをwebpackでバンドルしたいのですが、出力されたjsを呼び出してみるとエラーが返ってきます。バンドル自体は成功しているように見えます。 const babel = require('@babel/core'); const _global = global || window; _global.transform = function(code, cb) { babel....
Futahei's user avatar
  • 283
1
0 回答
37 閲覧数

webpacker のロード時に各変数を確認する方法

Webpacker で呼び出されるコードのデバックはどのようにすればよいのでしょうか? 具体的には以下のような流れで問題に直面しました。 こちらのQiitaの記事を参考にRails+Vue.jsの勉強をしていたのですが https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11 記事内にもある通りconfig/webpack/loaders/...
ironsand's user avatar
  • 3,567
0
1 回答
85 閲覧数

Webツールのリリース、公開について

Webツール(HTMLとCSSとJavascriptで作ったブラウザで動くツール)を作りました。 他のデベロッパーさんにも広く使ってほしいのですが、どのようにリリース、公開するのが良いでしょうか。 一般的なやり方や、人気なやり方を教えてください。 また、できればその方法について、実際にリリース、公開までの流れがわかる資料があれば教えていただけると嬉しいです。 なお今現在は、特にパッケージ化などせず、...
mimi's user avatar
  • 413
2
1 回答
869 閲覧数

uglifyjs-webpack-pluginでライセンスコメントを残したい

// webpack.config.js const uglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { mode: 'production', entry: './input.js', output: { filename: 'output.js' }, ...
qsmq's user avatar
  • 429
0
1 回答
1,164 閲覧数

Webpackで作ったパッケージにHTMLのScriptからオブジェクトをセットしたい

TypeScriptで書いたコードをWebpackでバンドル化し、パッケージの中に定義したオブジェクトに HTMLのスクリプトから設定値をセットしたいと考えています。 構成は以下の状態です。 html <script src="dist/bundle.js"></script> <script type ="text/javascript" src="....
noriokaki's user avatar
  • 155
7
2 回答
1万 閲覧数

@importするときの@の意味

プログラム初心者です。 Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、 以下に示している@の存在の意味がよくわかっていません。 @import '@/assets/styles/mixin.scss';  アドレスに示している@は何を意味しているのでしょうか。 一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。 ...
earthkundesu's user avatar
0
1 回答
707 閲覧数

webpack --watch で build.js ファイルが生成されません

以下の手順では生成されます。 $ webpack 以下のコマンドでは build.js が作成されません $ webpack-dev-server --progress --colors --watch --config webpack.config.js webpack.config.jsの中身 // webpack.confing.js const path = require('...
Yamada JP's user avatar
2
1 回答
411 閲覧数

nuxtjsのホットリロード時のsassコンパイル

main.cssやnormalize.cssのように固定で必ず最初に読み込ませたいsassファイルのコンパイルで困っています。 nuxt-device-detectを使用して、pc/spの表示切り替えを行っているため vueファイルにstyle記載やimportを行うとpc表示の時にもspのcssが読み込まれてしまうため、cssはレイアウトのheadで読み込ませているのですが、...
user16768's user avatar
2
1 回答
105 閲覧数

webpackのパッケージ依存について

こんにちは、初めまして。 今Reactで開発を始めようと環境を作っているところですが、 npmでwebpackをインストールするところでバージョン依存ではまっています。 最新の [email protected] を使いたいのですが、 インストールしようとすると以下が出ます。 webpack4.8.3 => UNMET PEER DEPENDENCY [email protected] 上記が出たので、 ajv@6....
SANEYUKI's user avatar
0
1 回答
103 閲覧数

webpackerを使ったrailsアプリを実行するとき、TypeError: environment.plugins.set is not a functionというエラーが出る

環境 Rails 5.1.5 webpacker 3.3.0 現象 Compilation failed: remote: /tmp/build_074ca0ee678491d6f72035c60cc5f616/config/webpack/environment.js:5 remote: environment.plugins.set('Provide', ...
Hidehiro NAGAOKA's user avatar
0
1 回答
216 閲覧数

Railsでwebpackerを入れるとherokuへのデプロイでこける

環境 Rails 5.1.5 webpack 3.11.0 エラーメッセージ remote: Webpacker is installed 🎉 🍰 remote: Using /tmp/build_a60546bb726d2fa7f4b8b4ac052f461e/config/webpacker.yml file for setting up webpack ...
Hidehiro NAGAOKA's user avatar
0
0 回答
3,905 閲覧数

自作vueコンポーネントをimportする際のエラー "export 'default' (imported as 'NuxtAutolink') was not found in 'nuxt_autolink'

自作した'nuxt_autolink'という.vueコンポーネントモジュールを、npm publishして公開したのですが、nuxt.jsのプロジェクトで、node_moduleからインストールして以下のように、使用したところ、 import NuxtAutolink from 'nuxt_autolink'; export default { components: { ...
sss's user avatar
  • 1
0
1 回答
3,132 閲覧数

webpack-dev-serverで自動コンパイル・画面更新できない

この度フロントエンドに入門しようとしています。 やりたいこと webpack及びその周辺技術を用いて、 - js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる - 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる やったこと 以下のようにyarnとwebpackで環境構築をしました。 package.json { ...
Taichi's user avatar
  • 111
1
1 回答
462 閲覧数

TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる

TypeScript 2 + Webpack 3を用いて、外部ライブラリ(モジュール)を使用したアプリケーションを作ろうとしているのですが、このとき、あるライブラリAについて ライブラリA本体をnpm installでインストールすると正常にビルドできる ライブラリAの型定義のみ(@types/A)をnpm installでインストールするとビルドに失敗する という現象が発生し、...
Dice's user avatar
  • 21
0
1 回答
4,123 閲覧数

WebpackでSlick.jsを使用する際に、"slick-theme.scss"内で使用されている画像とフォントが読み込めない

内容 WebpackでjQueryのスライダー用ライブラリSlickを使用しているのですが、 slick-theme.scssをimportするとscss内で定義されている画像とフォントのパスが localhostのドキュメントルートからのパスになってしまい404 Not Foundとなってしまいます。 現状回避策として、htmlファイルに直接書きを記述することでslick-theme....
Kaito Seki's user avatar
1
1 回答
1,299 閲覧数

babel-loaderの設定でexclude: /(node_modules|bower_components)/しているのは何故でしょうか

webpackでES6構文を用いたJavascriptのコードを処理するためにbabel-loaderを利用しています。 Github babel-loaderにあるREADME.mdの通りに設定し、問題なく動いていることを確認できていますが、下記の設定のうち、excludeを指定する必要が何故あるのかがわかりません。 module: { rules: [ { test:...
tama's user avatar
  • 117
1
1 回答
173 閲覧数

tsxファイルに書いた __('x_id') を i18n-webpack-pluginで処理したい

webpack.config.dev.js へ const I18nPlugin = require("i18n-webpack-plugin"); const langJa = require("./ja.json"); ・・・ module: { loaders: [ { test: /\.(ts|tsx)$/, include: paths.appSrc,...
alfe below's user avatar
2
1 回答
252 閲覧数

webpackのaliasに付く$の意味

vue.jsのwebpackテンプレートのwebpackのaliasの記述に vuejs-templates/webpack 'vue$': 'vue/dist/vue.common.js' と、$が付いてますがこの意味ってなんでしょうか? aliasの名前がvue$になるわけでもないようですし。。。
けーこ's user avatar
  • 181