импорт не работает приложение nodeJs React SSR - PullRequest
Новая
       48

импорт не работает приложение nodeJs React SSR

2 голосов
/ 03 ноября 2019

Я пытаюсь реализовать SSR для приложения React. Я начал с создания каталога сервера, который содержит 3 файла (bootstrap, index, renderer)

bootstrap.js содержит конфиги babel для переноса в es5

index.js создает экспресс-приложение и экспресс-маршрутизатор.

renderer.js отвечает за рендеринг приложения React в строку и отправку его в виде html клиенту.

bootstap.js =>

require('ignore-styles');

require('@babel/register')({
  ignore: [
    function (filePath) {
      return !filePath.includes('node_modules');
    }
  ],
  presets: [
    [
      "@babel/preset-env",
      {
        "modules": false
      }
    ],
    '@babel/preset-react',
    '@babel/flow'
  ],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-syntax-dynamic-import",
    "react-loadable/babel",
    "@babel/plugin-proposal-class-properties",
    "dynamic-import-node"
  ]
});

require('./index');

index.js => 

import dotenv from 'dotenv';
import cookieParser from 'cookie-parser';


dotenv.config();

const express = require('express');
const serverRenderer = require('./middleware/renderer');


const PORT = process.NODE_ENV === 'development' ? 3000 : 7160;
const path = require('path');

const app = express();
app.use(cookieParser());
const router = express.Router();
const routes = require('../src/router/appRoutes').default;


router.use(express.static(
  path.resolve(__dirname, '..', 'build'),
  { maxAge: '30d' },
));


routes.map(path => app.get(path, serverRenderer));

app.use(router);

app.listen(PORT, (error) => {
  if (error) {
    return console.log('something bad happened', error);
  }

  console.log("listening on " + PORT + "...");
});

, но когда я запускаю 

NODE_ENV=production node server/bootstrap.js

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

import dotenv from 'dotenv';
       ^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._compile (/Users/amirtahani/projects/uneed/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.newLoader [as .js] (/Users/amirtahani/projects/uneed/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/amirtahani/projects/uneed/server/bootstrap.js:34:1)

и странно то, что тот же код работает над другим проектом. а вот мои devDependencies 

"devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/plugin-proposal-class-properties": "7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "7.6.2",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-classes": "7.5.5",
    "@babel/plugin-transform-modules-commonjs": "7.6.0",
    "@babel/plugin-transform-runtime": "7.6.2",
    "@babel/preset-env": "7.6.3",
    "@babel/preset-flow": "7.0.0",
    "@babel/preset-react": "7.6.3",
    "@babel/register": "7.6.2",
    "babel-cli": "6.26.0",
    "babel-plugin-dynamic-import-node": "2.3.0",
    "babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
    "flow-bin": "0.102.0",
    "ignore-styles": "5.0.1"
  }

есть идеи?

Ответы [ 3 ]

0 голосов
/ 04 ноября 2019

Я установил узел LTS (v12.13.0), но получил ту же ошибку при использовании import вместо require. Кажется, что es6 imports все еще является экспериментальной функцией, даже в последней версии узла.

Если вы хотите протестировать эту функцию, вам необходимо выполнить следующие шаги:

  1. Добавить"type": "module" в вашем package.json
  2. Запустите ваш сервер с этим флагом: --experimental-modules. например, NODE_ENV=production node --experimental-modules server/bootstrap.js
0 голосов
/ 04 ноября 2019
Синтаксис

import и export все еще экспериментален в последних версиях узла js, но есть обходной путь к этой проблеме.

попробуйте добавить "type": "module" в ваш файл package.json и изменитьрасширение .js комплекта до .mjs в конфигурации вашего веб-пакета и запустите созданный файл с помощью этой команды: 

NODE_ENV=production node --experimental-modules server/bootstrap.mjs

также я рекомендую прочитать эту страницу.

0 голосов
/ 03 ноября 2019

Сначала проверьте, установлен ли пакет dotenv или нет. Если нет, вы можете установить его с помощью следующей команды -

npm i - сохранить dotenv

Чтобы использовать dotenv, вам не нужно импортировать егоа затем настройте его. Вместо этого используйте следующий синтаксис -

require ('dotenv'). Config ()

...