Использование реагировать в готовке ie Резак flask - PullRequest
Новая
       44

Использование реагировать в готовке ie Резак flask

0 голосов
/ 08 января 2020

Я пытаюсь использовать шаблон cookiecutter-flask для написания Flask веб-приложения. Я хотел бы использовать некоторые элементы React (а именно: https://mdbootstrap.com/docs/react/tables/search/).

Однако у меня возникают проблемы с получением react для импорта.

Вот что я сделал до сих пор:
1. Установлено Docker, npm и друзья.
2. Загрузил flask Повар ie Резак РЕПО (https://github.com/cookiecutter-flask/cookiecutter-flask ).
3. Установлено npm install react react-bootstrap react-dom babel-cli@6 babel-preset-react-app@3 mdbreact.
4. Поместите код для таблицы по ссылке выше в отдельный файл и попытайтесь require(./queue.jsx) в основной

Однако, когда я запускаю приложение с docker-compose up flask-dev, я получаю: 

docker-compose up flask-dev
Recreating esm_viz_webapp_flask-dev_1 ... done
Attaching to esm_viz_webapp_flask-dev_1
flask-dev_1   | Loading .env environment variables…
flask-dev_1   | 
flask-dev_1   | > esm_viz_webapp@1.0.0 start /app
flask-dev_1   | > concurrently -n "WEBPACK,FLASK" -c "bgBlue.bold,bgMagenta.bold" "npm run webpack-watch" "npm run flask-server"
flask-dev_1   | 
flask-dev_1   | [FLASK] 
flask-dev_1   | [FLASK] > esm_viz_webapp@1.0.0 flask-server /app
flask-dev_1   | [FLASK] > pipenv run flask run --host=0.0.0.0
flask-dev_1   | [FLASK] 
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [WEBPACK] > esm_viz_webapp@1.0.0 webpack-watch /app
flask-dev_1   | [WEBPACK] > NODE_ENV=debug webpack --mode development --watch
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [FLASK] Loading .env environment variables...
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [WEBPACK] webpack is watching the files...
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [FLASK]  * Serving Flask app "autoapp.py" (lazy loading)
flask-dev_1   | [FLASK]  * Environment: development
flask-dev_1   | [FLASK]  * Debug mode: on
flask-dev_1   | [FLASK]  * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
flask-dev_1   | [FLASK]  * Restarting with stat
flask-dev_1   | [FLASK]  * Debugger is active!
flask-dev_1   | [FLASK]  * Debugger PIN: 310-195-478
flask-dev_1   | [WEBPACK] Hash: 2200bcb154f80c08f6f0
flask-dev_1   | [WEBPACK] Version: webpack 4.41.5
flask-dev_1   | [WEBPACK] Time: 2168ms
flask-dev_1   | [WEBPACK] Built at: 01/08/2020 10:19:23 AM
flask-dev_1   | [WEBPACK]                                                     Asset      Size    Chunks             Chunk Names
flask-dev_1   | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.eot   162 KiB            [emitted]  
flask-dev_1   | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.svg   434 KiB            [emitted]  
flask-dev_1   | [WEBPACK] _/node_modules/font-awesome/fonts/fontawesome-webfont.ttf   162 KiB            [emitted]  
flask-dev_1   | [WEBPACK]                    af7ae505a9eed503f8b8e6982036873e.woff2  75.4 KiB            [emitted]  
flask-dev_1   | [WEBPACK]                     fee66e712a8a08eef5805a46892932ad.woff  95.7 KiB            [emitted]  
flask-dev_1   | [WEBPACK]                                           img/favicon.ico  58.2 KiB            [emitted]  
flask-dev_1   | [WEBPACK]                                       main_css.bundle.css   230 KiB  main_css  [emitted]  main_css
flask-dev_1   | [WEBPACK]                                        main_css.bundle.js  8.25 KiB  main_css  [emitted]  main_css
flask-dev_1   | [WEBPACK]                                         main_js.bundle.js  1.58 MiB   main_js  [emitted]  main_js
flask-dev_1   | [WEBPACK] Entrypoint main_js = main_js.bundle.js
flask-dev_1   | [WEBPACK] Entrypoint main_css = main_css.bundle.css main_css.bundle.js
flask-dev_1   | [WEBPACK] [0] multi ./node_modules/font-awesome/css/font-awesome.css ./node_modules/bootstrap/dist/css/bootstrap.css ./assets/css/style.css 52 bytes {main_css} [built]
flask-dev_1   | [WEBPACK] [./assets/css/style.css] 325 bytes {main_css} [built]
flask-dev_1   | [WEBPACK] [./assets/img sync recursive .*] ./assets/img sync .* 178 bytes {main_js} [built]
flask-dev_1   | [WEBPACK] [./assets/img/favicon.ico] 59 bytes {main_js} [optional] [built]
flask-dev_1   | [WEBPACK] [./assets/js/main.js] 625 bytes {main_js} [built]
flask-dev_1   | [WEBPACK] [./assets/js/plugins.js] 85 bytes {main_js} [built]
flask-dev_1   | [WEBPACK] [./assets/js/queue.jsx] 303 bytes {main_js} [built] [failed] [1 error]
flask-dev_1   | [WEBPACK] [./assets/js/script.js] 36 bytes {main_js} [built]
flask-dev_1   | [WEBPACK] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {main_js} [built]
flask-dev_1   | [WEBPACK]     + 12 hidden modules
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [WEBPACK] ERROR in ./assets/js/main.js
flask-dev_1   | [WEBPACK] Module not found: Error: Can't resolve 'react' in '/app/assets/js'
flask-dev_1   | [WEBPACK]  @ ./assets/js/main.js 19:0-16
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [WEBPACK] ERROR in ./assets/js/queue.jsx 505:4
flask-dev_1   | [WEBPACK] Module parse failed: Unexpected token (505:4)
flask-dev_1   | [WEBPACK] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
flask-dev_1   | [WEBPACK] | 
flask-dev_1   | [WEBPACK] |   return (
flask-dev_1   | [WEBPACK] >     <MDBDataTable
flask-dev_1   | [WEBPACK] |       striped
flask-dev_1   | [WEBPACK] |       bordered
flask-dev_1   | [WEBPACK]  @ ./assets/js/main.js 31:0-22
flask-dev_1   | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!assets/css/style.css:
flask-dev_1   | [WEBPACK]     Entrypoint mini-css-extract-plugin = *
flask-dev_1   | [WEBPACK]     [./node_modules/css-loader/dist/cjs.js!./assets/css/style.css] 1.46 KiB {mini-css-extract-plugin} [built]
flask-dev_1   | [WEBPACK]         + 1 hidden module
flask-dev_1   | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/bootstrap/dist/css/bootstrap.css:
flask-dev_1   | [WEBPACK]     Entrypoint mini-css-extract-plugin = *
flask-dev_1   | [WEBPACK]        2 modules
flask-dev_1   | [WEBPACK] Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/font-awesome/css/font-awesome.css:
flask-dev_1   | [WEBPACK]     Entrypoint mini-css-extract-plugin = *
flask-dev_1   | [WEBPACK]        9 modules

Я предполагаю, что ошибка здесь: 

flask-dev_1   | [WEBPACK] ERROR in ./assets/js/main.js
flask-dev_1   | [WEBPACK] Module not found: Error: Can't resolve 'react' in '/app/assets/js'
flask-dev_1   | [WEBPACK]  @ ./assets/js/main.js 19:0-16
flask-dev_1   | [WEBPACK] 
flask-dev_1   | [WEBPACK] ERROR in ./assets/js/queue.jsx 505:4
flask-dev_1   | [WEBPACK] Module parse failed: Unexpected token (505:4)

Нужно ли что-то делать в Интернете? упаковать конфиг для этого чтобы правильно работать? Вот webpack.config.js

const path = require('path');
const webpack = require('webpack');

/*
 * Webpack Plugins
 */
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const ProductionPlugins = [
  // production webpack plugins go here
  new webpack.DefinePlugin({
    "process.env": {
      NODE_ENV: JSON.stringify("production")
    }
  })
]

const debug = (process.env.NODE_ENV !== 'production');
const rootAssetPath = path.join(__dirname, 'assets');

module.exports = {
  // configuration
  context: __dirname,
  entry: {
    main_js: './assets/js/main',
    main_css: [
      path.join(__dirname, 'node_modules', 'font-awesome', 'css', 'font-awesome.css'),
      path.join(__dirname, 'node_modules', 'bootstrap', 'dist', 'css', 'bootstrap.css'),
      path.join(__dirname, 'assets', 'css', 'style.css'),
    ],
  },
  mode: debug,
  output: {
    chunkFilename: "[id].js",
    filename: "[name].bundle.js",
    path: path.join(__dirname, "esm_viz_webapp", "static", "build"),
    publicPath: "/static/build/"
  },
  resolve: {
    extensions: [".js", ".jsx", ".css"]
  },
  devtool: debug ? "eval-source-map" : false,
  plugins: [
    new MiniCssExtractPlugin({ filename: "[name].bundle.css" }),
    new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
  ].concat(debug ? [] : ProductionPlugins),
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: debug,
            },
          },
          'css-loader!less-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: debug,
            },
          },
          'css-loader',
        ],
      },
      { test: /\.html$/, loader: 'raw-loader' },
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
      {
        test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/i,
        loader: `file-loader?context=${rootAssetPath}&name=[path][name].[ext]`
      },
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ["@babel/preset-env"], cacheDirectory: true } },
    ],
  }
};

Вот упрощенное дерево файлов: 

# Files:
├── Dockerfile
├── LICENSE
├── Pipfile
├── Pipfile.lock
├── README.md
├── assets
├── autoapp.py
├── dev.db
├── docker-compose.yml
├── docs
├── esm_viz_webapp
├── migrations
├── node_modules
├── package-lock.json
├── package.json
├── setup.cfg
├── shell_scripts
├── supervisord.conf
├── supervisord_programs
├── tests
├── tree.tmp
└── webpack.config.js

# Directories
.
├── assets
│   ├── css
│   ├── img
│   └── js
├── dev.db
├── docs
│   ├── _build
│   ├── _static
│   └── _templates
├── esm_viz_webapp
│   ├── public
│   ├── static
│   ├── templates
│   ├── user
│   └── webpack
├── migrations
│   └── versions
├── node_modules
.
├── assets
│   ├── css
│   ├── img
│   └── js
├── dev.db
├── docs
│   ├── _build
│   ├── _static
│   └── _templates
├── esm_viz_webapp
│   ├── __pycache__
│   ├── public
│   ├── static
│   │   └── build
│   │       ├── _
│   │       └── img
│   ├── templates
│   │   ├── public
│   │   └── users
│   ├── user
│   └── webpack
├── migrations
│   └── versions
├── node_modules
│   ├── ...
|   ├── ...
|   ├── ... 
├── shell_scripts
├── supervisord_programs
└── tests

Я был бы очень признателен за любую помощь и был бы рад опубликовать любые дополнительные журналы или файлы, если он помогает.

Спасибо! Пол

...