[webpack] タグが付いた質問
55 件の質問
1
票
0
回答
72
閲覧数
Rails7でwebpackerからvite_railsに移行したが@rails/ujsが読み込めずにdestroyリクエストがgetリクエストになってしまう
前提
私はRails6で構成されていたアプリをRails7にバージョンアップした。
同時にwebpackerからviteに移行しました。
開発環境では問題なく動いていますが、本番環境ではrails/ujsがうまく動作していません。
現状
ブラウザのconsoleタグで以下のエラーが表示されている。
Uncaught TypeError: Cannot set properties of ...
0
票
1
回答
85
閲覧数
LaravelMix、LaravelVIteでMaterializeCSSのAutoInitがエラーになる
概要
Laravelでmaterializecss( https://materializeweb.com/ )を使いたいのですが、
エラーになります。
この解決方法がわかりません。
エラー内容
Uncaught TypeError: can't access property "AutoInit", ...
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":...
0
票
1
回答
289
閲覧数
ElectronのTypescript+Webpackテンプレートが実行できない
Electron Forgeのページに従い、Electronのテンプレートを以下のコマンドを実行してインストールしました。
npx create-electron-app my-new-app --template=typescript-webpack
次に
npm run start
を実行すると、コマンドウィンドウに以下のようなエラーメッセージが表示されました。
$ npm run ...
0
票
1
回答
329
閲覧数
Webpackを使用すればグローバル汚染は起こりませんか?
npmで入れたグローバル汚染(グローバルスコープに変数や関数を定義)している外部のライブラリをWebpackでバンドルした場合、グローバル汚染の問題は解消されますか?(Webpackでいい感じにしてくれますか?)
そうでない場合、外部ライブラリがグローバル汚染しているかどうか分かる方法などはありますか?
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';
...
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';
...
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 ...
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');
...
1
票
1
回答
822
閲覧数
webpack での jquery の $ 変数の扱いについて
jquery-ui と jquery.validationEngine を同時に使いたいのですがうまくいきません
どちらも $ っていう変数に対してメソッドを追加してるんだと思うんですが片方を使うともう片方が使えなくなります
jquery-ui は公式サイトダウンロードビルダーから zip ダウンロードしたものを
app/javascript/vendor/jquery-ui
に展開
...
0
票
1
回答
413
閲覧数
Node.js+VUE.JSにてリクエストヘッダにX-Forwarded-forを付与してバックエンドにPOSTしたい
題記の通りです。
現状webpackの設定ファイルにproxyを設定し特定のアドレスパターンの場合はバックエンドサーバに通信しているのですがそのときにリクエストヘッダにX-Forwarded-forとしてリモートアドレスを付与してPOSTしたいのですがどこにどのような設定をすればよいのかわかりません。
ご教示ください
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 の ...
0
票
1
回答
4,713
閲覧数
webpackのdevServer はどうやって立ち上げるのでしょうか?
Preactの始め方&Reactとの違い - Qiita
を参考に構築を行いました。
これでwebpackのdevServerを立ち上げれば、Hello World!が表示されるはずです。
とありますが、どうやって立ち上げるのでしょうか?
webpack-dev-serverの基本的な使い方と設定方法の詳しい解説
をみて、package.json に
"start":...
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('...
1
票
1
回答
326
閲覧数
UAParser.js をインポートできない
TypeScript & Polyfill 環境を作ろうと、後述の通りセットアップを行いました。
この環境で UAParser.jsを利用しようと
import { UAParser } from "ua-parser-js";
と記述したのですが、ビルド時に次のような警告が出力されました。
WARNING in ./src/main/js/index.ts 8:21-...
0
票
1
回答
67
閲覧数
Vue.jsとFirebaseでログイン機能を実装したいです。
前提・実現したいこと
Vue.jsとFirebaseでログイン機能を実装したいです。
新規登録画面で、v-modelでemailとpasswordそれぞれを結びつけ、作成したaxiosのインスタンスをimportして、axiosでエンドポイントにアクセスするregisterメソッドを定義、ボタンを押したらregisterメソッドを発火したいです。
成功すると、...
0
票
1
回答
297
閲覧数
webpack利用時、jestを実行するとCannot find moduleエラーが発生
環境依存値(APIのURL)を取得するために、webpackを使用しています。
参考:
JavaScriptでデプロイ環境ごとに設定ファイルを読み込む方法
正しくビルド、実行されましたが、環境別の設定値を持つindex.tsを用いる機能についてjestを実行したところ、下記の通りエラーとなりました。
Cannot find module './_test' from 'ts/environment/...
0
票
1
回答
950
閲覧数
electronにてwebpackでソースのビルドが成功しているのに何も表示されない
electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない
いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました
参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます
main.js
const electron = require(&...
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....
0
票
1
回答
296
閲覧数
npm, browsefiryを利用し複数の外部ライブラリを1つにビルドする運用をしたいが、フロント側でクラス名のnot definedエラーが出力されてしまう
Webサービスを個人的に開発しております。
npm, browserifyを利用し、フロントエンドで利用するいくつかの外部ライブラリを1つにビルドし、
HTMLにはjsファイル1行書けば済むように運用したいのですがエラーが出てしまい、解決できずに悩んでおります。
LaravelMix+...
0
票
0
回答
1,466
閲覧数
manifest.jsonで定義されているjsファイルが生成されない
前提・実現したいこと
Rails 6で、manifest.jsで定義されているファイル名の、jsが生成されません
ビルドしたところ、public/packs以下にcssファイルとjsファイル、manifest.jsonは生成されるのですが、jsファイルだけネームが違います
開発環境では、webpacker_dev_serverを使用することで問題なく機能しているのですが、herokuデプロイ時に、...
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
...
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パッケージを導入し、...
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/...
0
票
1
回答
861
閲覧数
webpackでjQueryをすべてのjsファイル内で使いたい
webpack+scss+jQuery環境を作ろうとしています。
webpack+scssまではできたのですが、jQuery環境がうまくいきません。
index.js内でもutility.js内でも $ が使えるようにしたいです。
webpackでjqueryを使用、しかし「$ is not defined」のエラー - teratail
こちらを参考にして plugins: ...
0
票
1
回答
9,472
閲覧数
webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません
質問の主旨
現在、Reactを勉強中で本を読み進めてチャットアプリを作成しています。ですが、webpackのコンパイルでよく理解できないエラーが出てしまいうまくいきません。
ブラウザは立ち上がるのですが、画面が白いまま、エラーが出ます。
初心者なので、webpack周りのエラーのことを調べてみても結局よくわからないままです。
開発環境は以下の通りです。
インストールしたライブラリ
Node....
1
票
2
回答
2,924
閲覧数
webpack-dev-serverをインストールしたもののローカル開発環境(localhost:8080)で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか?
いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
GitHubにUPしているコードを$ npm start もしくは $ npm run startで実行するとターミナルの画面で下記のエラーが出ます。
> @ start /Users/MYUSERNAME/Desktop/firebase/...
1
票
2
回答
1,350
閲覧数
Node.jsの環境でwebpackを実行すると、`WARNING`の注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
webpackをインストールすると、WARNINGの注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。
【質問の主旨】
1.
モジュール構成のアプリを1ファイルにまとめるために、...
1
票
0
回答
80
閲覧数
レンダリング専用スクリプトが無くても正常に表示されるのは何故か?
Electronの初心者なりにMain ProcessとRendering Processの間の違いが分かっていますが、この記事を読んで、Webpackで構成されるElectornアプリにはtarget: 'electron-renderer'専用ファイルは何の為必要か、良くわかりませんでした。そもそも、レンダリングプロセス専用エントリーポイントファイル(src/renderer/index.js)...
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 ...
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-...
0
票
1
回答
318
閲覧数
useを配列にした場合のloaderの読み込み順
webpackの設定をしているのですが、
loaderを配列で指定した場合、読み込む順番は、index番号が若い順で読み込まれるのでしょうか?
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['...
2
票
1
回答
272
閲覧数
babelを内部で使用したjsをwebpackでバンドルできない
以下のjsをwebpackでバンドルしたいのですが、出力されたjsを呼び出してみるとエラーが返ってきます。バンドル自体は成功しているように見えます。
const babel = require('@babel/core');
const _global = global || window;
_global.transform = function(code, cb) {
babel....
1
票
0
回答
37
閲覧数
webpacker のロード時に各変数を確認する方法
Webpacker で呼び出されるコードのデバックはどのようにすればよいのでしょうか?
具体的には以下のような流れで問題に直面しました。
こちらのQiitaの記事を参考にRails+Vue.jsの勉強をしていたのですが
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11
記事内にもある通りconfig/webpack/loaders/...
0
票
1
回答
85
閲覧数
Webツールのリリース、公開について
Webツール(HTMLとCSSとJavascriptで作ったブラウザで動くツール)を作りました。
他のデベロッパーさんにも広く使ってほしいのですが、どのようにリリース、公開するのが良いでしょうか。
一般的なやり方や、人気なやり方を教えてください。
また、できればその方法について、実際にリリース、公開までの流れがわかる資料があれば教えていただけると嬉しいです。
なお今現在は、特にパッケージ化などせず、...
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'
},
...
0
票
1
回答
1,164
閲覧数
Webpackで作ったパッケージにHTMLのScriptからオブジェクトをセットしたい
TypeScriptで書いたコードをWebpackでバンドル化し、パッケージの中に定義したオブジェクトに
HTMLのスクリプトから設定値をセットしたいと考えています。
構成は以下の状態です。
html
<script src="dist/bundle.js"></script>
<script type ="text/javascript" src="....
7
票
2
回答
1万
閲覧数
@importするときの@の意味
プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
...
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('...
2
票
1
回答
411
閲覧数
nuxtjsのホットリロード時のsassコンパイル
main.cssやnormalize.cssのように固定で必ず最初に読み込ませたいsassファイルのコンパイルで困っています。
nuxt-device-detectを使用して、pc/spの表示切り替えを行っているため
vueファイルにstyle記載やimportを行うとpc表示の時にもspのcssが読み込まれてしまうため、cssはレイアウトのheadで読み込ませているのですが、...
2
票
1
回答
105
閲覧数
webpackのパッケージ依存について
こんにちは、初めまして。
今Reactで開発を始めようと環境を作っているところですが、
npmでwebpackをインストールするところでバージョン依存ではまっています。
最新の [email protected] を使いたいのですが、
インストールしようとすると以下が出ます。
webpack4.8.3 => UNMET PEER DEPENDENCY [email protected]
上記が出たので、
ajv@6....
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',
...
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 ...
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: {
...
0
票
1
回答
3,132
閲覧数
webpack-dev-serverで自動コンパイル・画面更新できない
この度フロントエンドに入門しようとしています。
やりたいこと
webpack及びその周辺技術を用いて、
- js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる
- 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる
やったこと
以下のようにyarnとwebpackで環境構築をしました。
package.json
{
...
1
票
1
回答
462
閲覧数
TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる
TypeScript 2 + Webpack 3を用いて、外部ライブラリ(モジュール)を使用したアプリケーションを作ろうとしているのですが、このとき、あるライブラリAについて
ライブラリA本体をnpm installでインストールすると正常にビルドできる
ライブラリAの型定義のみ(@types/A)をnpm installでインストールするとビルドに失敗する
という現象が発生し、...
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....
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:...
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,...
2
票
1
回答
252
閲覧数
webpackのaliasに付く$の意味
vue.jsのwebpackテンプレートのwebpackのaliasの記述に
vuejs-templates/webpack
'vue$': 'vue/dist/vue.common.js'
と、$が付いてますがこの意味ってなんでしょうか?
aliasの名前がvue$になるわけでもないようですし。。。