Импорт веб-пакета и ошибка в файле javascript - PullRequest
Новая
       20

Импорт веб-пакета и ошибка в файле javascript

0 голосов
/ 10 февраля 2020

Я создаю vue приложение с vue create . и добавляю apollo с vue add apollo

Ошибка 

Uncaught TypeError: __webpack_require__(...).readdirSync is not a function
    at Object.eval (ds.js?1d67:31)
    at eval (ds.js:58)
    at Object../apollo-server/data-source/ds.js (app.js:897)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (context.js?d506:1)
    at Module../apollo-server/context.js (app.js:875)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (state.js?fcc2:1)
    at Module../src/store/state.js (app.js:1615)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (index.js?4360:4)
    at Module../src/store/index.js (app.js:1579)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (main.js:13)
    at Module../src/main.js (app.js:1532)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at Object.1 (app.js:1640)

webpack.config. js

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  //mode: 'production',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@vue/cli-plugin-babel/preset',
            ]
          }
        }
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // enable CSS Modules
              modules: true,
              // customize generated class names
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      },
            /* {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      }, */
            {
        test: /\.svg$/,
        use: [
          'babel-loader',
          'vue-svg-loader',
        ],
      },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                 name: '[name].[ext]?[hash]'
                }
            }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
    ],
    devtool: 'eval'
}

секция ошибки в ds. js

const modelDir = '../../src/models/';
let models = require('fs').readdirSync(require('path').join(__dirname, modelDir));

models.forEach((model,i) => {
    models[i] = require(modelDir.concat(models[i]));
});

импорт также не работает, я получил ошибку, если я использую import

const modelDir = '../../src/models/';
import fs from 'fs';
import path from 'path';
let models = fs.readdirSync(path.join(__dirname, modelDir));

models.forEach((model,i) => {
    models[i] = require(modelDir.concat(models[i]));
});

, если я использую импорт, получил это ошибка 

ds.js?1d67:40 Uncaught TypeError: fs__WEBPACK_IMPORTED_MODULE_5___default.a.readdirSync is not a function
    at Module.eval (ds.js?1d67:40)
    at eval (ds.js:76)
    at Module../apollo-server/data-source/ds.js (app.js:898)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (context.js?d506:1)
    at Module../apollo-server/context.js (app.js:875)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (state.js?fcc2:1)
    at Module../src/store/state.js (app.js:1616)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (index.js?4360:4)
    at Module../src/store/index.js (app.js:1580)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at eval (main.js:13)
    at Module../src/main.js (app.js:1533)
    at __webpack_require__ (app.js:786)
    at fn (app.js:151)
    at Object.1 (app.js:1641)

Также предупреждение в vue-cli-service serve

> vue-cli-service serve

 INFO  Starting development server...
98% after emitting CopyPlugin

 WARNING  Compiled with 4 warnings                                                                                                             12:45:57 PM

 warning  in ./apollo-server/data-source/ds.js

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/sequelize/lib/sequelize.js

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/sequelize/lib/dialects/abstract/connection-manager.js

Critical dependency: the request of a dependency is an expression

 warning  in ./node_modules/sequelize/lib/dialects/abstract/connection-manager.js

Critical dependency: the request of a dependency is an expression


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.0.34:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

Весь файл. js Файл 

const { DataSource } = require('apollo-datasource');
const { Sequelize } = require('sequelize');
require('dotenv').config();

let db = {}

const sequelize = new Sequelize(
    process.env.DBNAME || 'information_schema',
    process.env.DBUSER || 'root',
    process.env.DBPASS || '',
    {
        host: process.env.DBHOST || 'localhost',
        port: process.env.DBPORT || '3306',
        dialect: process.env.DBTYPE || 'mysql',
        dialectModule: require('mysql2'),
        define: {
            freezeTableName: false,
            timestamps: false
        },
        pool: {
            max: 5,
            min: 0,
            acquire: 30000,
            idle: 10000,
        },
        // http://docs.sequelizejs.com/manual/tutorial/querying.html#operators
    },
)

/* const modelDir = '../../src/models/';
let models = require('fs').readdirSync(require('path').join(__dirname, modelDir));

models.forEach((model,i) => {
    models[i] = require(modelDir.concat(models[i]));
}); */

const modelDir = '../../src/models/';
import fs from 'fs';
import path from 'path';
let models = fs.readdirSync(path.join(__dirname, modelDir));

models.forEach((model,i) => {
    models[i] = require(modelDir.concat(models[i]));
});

// Initialize models
models.forEach(model => {
    const seqModel = model(sequelize, Sequelize)
    db[seqModel.name] = seqModel
});

// Apply associations
Object.keys(db).forEach(key => {
    if ('associate' in db[key]) {
            db[key].associate(db)
    }
})

db.sequelize = sequelize
db.Sequelize = Sequelize

module.exports = db

babel.config. js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    '@babel/preset-env'
  ],
}
...