質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
WSL(Windows Subsystem for Linux)

WSL (Windows Subsystem for Linux) は、Windows10のOS上でLinux向けのバイナリプログラムを実行可能にする機能です。また、WindowsOSのAPIを用いた仕組みを提供しており、Linux側からWindowsOSへのファイルアクセスもできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2341閲覧

webpack-dev-serverがエラーを返して表示されません。

Rude_Boy1022

総合スコア3

WSL(Windows Subsystem for Linux)

WSL (Windows Subsystem for Linux) は、Windows10のOS上でLinux向けのバイナリプログラムを実行可能にする機能です。また、WindowsOSのAPIを用いた仕組みを提供しており、Linux側からWindowsOSへのファイルアクセスもできます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/25 13:50

前提・実現したいこと

webpack-dev-serverにindex.htmlを表示させたいと思っています。
Reactを使用しています。
環境はwindows10でwslを用いています。
webpack,nodejs,webpack-dev-server、ともに必要なバージョンを満たしています。

発生している問題・エラーメッセージ

webpack-dev-serverは立ち上がるのですが、ブラウザからloclahost:8080にアクセスすると、以下のエラーを返します。
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/DumpStack.log.tmp'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/hiberfil.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/pagefile.sys'
Watchpack Error (initial scan): Error: EACCES: permission denied, lstat '/mnt/c/swapfile.sys'

また、ブラウザではcannot GETと表示されます。

該当のソースコード

configurate

1//webpack.config.js 2var debug = process.env.NODE_ENV !== "production"; 3var webpack = require('webpack'); 4var path = require('path'); 5 6module.exports = { 7 mode:"production", 8 context: path.join(__dirname, "src"), 9 entry: "./js/client.js", 10 module: { 11 rules: [{ 12 test: /.jsx?$/, 13 exclude: /(node_modules|bower_components)/, 14 use: [{ 15 loader: 'babel-loader', 16 options: { 17 presets: ['@babel/preset-react', '@babel/preset-env'] 18 } 19 }] 20 }] 21 }, 22 output: { 23 path: __dirname + "/src/", 24 filename: "client.min.js" 25 }, 26 plugins: debug ? [] : [ 27 new webpack.optimize.OccurrenceOrderPlugin(), 28 new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 29 ] 30};

src

1<!--index.html--> 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="utf-8"> 6 <title>React Tutorials</title> 7 <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ --> 8 <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> 9 </head> 10 11 <body> 12 <div id="app"></div> 13 <script src="client.min.js"></script> 14 </body> 15</html>

js

1//client.js 2import React from "react"; 3import ReactDOM from "react-dom"; 4 5class Layout extends React.Component{ 6 render() { 7 return ( 8 <h1>Hello World</h1> 9 ) 10 } 11} 12 13const app = document.getElementById('app'); 14ReactDOM.render(<Layout/>,app);

試したこと

このエラーに関して調べてみたところ、Windows側にあるファイルをwslで操作しようとしているため、このエラーが返ってくるバグだという記事を見つけました。表示されないことと、このエラーが関係あるのか、また、解決法があれば教えていただきたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

一応command promptから実行すれば立ち上げられます。
やはりWSLのバグかと

投稿2021/10/21 10:18

Rude_Boy1022

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問