Webpack - jak poprawnie kompilować ES6 z React

Webpack - jak poprawnie kompilować ES6 z React
Sebastiano
  • Rejestracja:ponad 12 lat
  • Ostatnio:prawie 4 lata
  • Postów:488
0

Próbuje sobie skompilować pliki ReactJS w Webpacku lecz on nie widzi poszczególnych modułów. Prosze o rady. W załączniku wrzucam screen z debbuga, natomiast poniżej kod:
webpackconfig:

Kopiuj
var path = require('path');
var webpack = require('webpack');

module.exports = {
 
    output: {
      path: path.join(__dirname,"build"),
      filename: 'bundle.js'
    },

    entry: ['./src/App.jsx'],

   plugins: [
        // Avoid publishing files when compilation fails
        new webpack.NoErrorsPlugin()
    ],
    stats: {
        // Nice colored output
        colors: true
    },
    devtool: 'source-map',

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

    module: {
     
      loaders: [
      
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['react', 'es2015']
          }
         },
         
      ]
      
    }
};

App.jsx:

Kopiuj
import React from 'react';
import {Router, Route, IndexRoute, Redirect} from 'react-router';
import DefaultLayout from './layouts/Default';
import HomePage from './components/Home';
import PrivacyPage from './components/Privacy';


export const routes = (
    <Route path='/' component={DefaultLayout}>
        <IndexRoute component={HomePage} />
        <Route path='privacy' component={PrivacyPage} />
        <Route path='*' component={NotFound} />
    </Route>
)
Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
0

Z konsoli wynika, że podales źle ścieżki do modułów w pliku jsx. Konfig webpacka być może jest ok.

Maciej Cąderek
Maciej Cąderek
Jak nie masz śledzenia ścieżek to zmien edytor/IDE
Sebastiano
tu akurat w SublimeText - ale przy ES6 wsparcia nie zauważyłem dla ścieżek przy "import". A VS nie do końca wspiera jak powinien;)
Sebastiano
  • Rejestracja:ponad 12 lat
  • Ostatnio:prawie 4 lata
  • Postów:488
0
Maciej Cąderek napisał(a):

Z konsoli wynika, że podales źle ścieżki do modułów w pliku jsx. Konfig webpacka być może jest ok.

Poniżej wrzucam strukture projektu, chyba że nie do końca rozumiem importowanie:) Jak to powinno być poprawnie?

edytowany 2x, ostatnio: Sebastiano
Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
0

W webpack.js:
zamiast:
entry: ['./src/App.jsx']
ma być:
entry: ['../src/App.jsx']

Sebastiano
  • Rejestracja:ponad 12 lat
  • Ostatnio:prawie 4 lata
  • Postów:488
0

@Maciej Cąderek przy takim rozwiązaniu dostaje błąd:

Kopiuj
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ../src/App.jsx in C:\Users\My Comp\Desktop\reactElectronProject
 @ multi main
Maciej Cąderek
Maciej Cąderek
  • Rejestracja:ponad 9 lat
  • Ostatnio:ponad 3 lata
  • Lokalizacja:Warszawa
  • Postów:1264
1

Odpal webpacka z flagą:
webpack --display-error-details
i zobacz gdzie szuka.

Sebastiano
  • Rejestracja:ponad 12 lat
  • Ostatnio:prawie 4 lata
  • Postów:488
0

Sporo tego wylistował:

Kopiuj
Version: webpack 1.12.14
Time: 46ms
Asset     Size  Chunks             Chunk Names
 main  1.59 kB       0  [emitted]  main
   [0] multi main 40 bytes {0} [built] [2 errors]

ERROR in multi main
Module not found: Error: Cannot resolve module 'entry' in C:\Users\comp\Desktop\reactElectronProject
resolve module entry in C:\Users\comp\Desktop\reactElectronProject
  looking for modules in C:\Users\comp\Desktop\reactElectronProject\node_modules
    C:\Users\comp\Desktop\reactElectronProject\node_modules\entry doesn't exist (module as directory)
    resolve 'file' entry in C:\Users\comp\Desktop\reactElectronProject\node_modules
      resolve file
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.webpack.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.json doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.web.js doesn't exist
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.webpack.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.json]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\entry.web.js]
 @ multi main

ERROR in multi main
Module not found: Error: Cannot resolve module '@multi' in C:\Users\comp\Desktop\reactElectronProject
resolve module @multi in C:\Users\comp\Desktop\reactElectronProject
  looking for modules in C:\Users\comp\Desktop\reactElectronProject\node_modules
    C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi doesn't exist (module as directory)
    resolve 'file' @multi in C:\Users\comp\Desktop\reactElectronProject\node_modules
      resolve file
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.webpack.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.web.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.js doesn't exist
        C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.json doesn't exist
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.webpack.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.web.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.js]
[C:\Users\comp\Desktop\reactElectronProject\node_modules\@multi.json]
 @ multi main
edytowany 1x, ostatnio: Sebastiano
Maciej Cąderek
Maciej Cąderek
No to masz piękna listę, teraz tylko poprawić.
Sebastiano
@Maciej Cąderektylko o co dokładnie chodzi z tymi ścieżkami, bo nie do końca rozumiem?
R3
  • Rejestracja:ponad 11 lat
  • Ostatnio:około 16 godzin
  • Postów:419
1

ścieżki w App.jsx są niepoprawne, przykładowo

Kopiuj
jest
import PrivacyPage from './components/Privacy';
powinno być
import PrivacyPage from './pages/Privacy';
Sebastiano
  • Rejestracja:ponad 12 lat
  • Ostatnio:prawie 4 lata
  • Postów:488
0

Oki, poradziłem sobie, problem leżał faktycznie w ścieżkach importowania plików:)

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.