admin管理员组

文章数量:1405297

CONTEXT: I'm trying to start with SSR using react, and I've ran into this problem before the updates, and I'm pretty sure I'm missing something obvious but I'm not sure what it could be.

In my root directory I've got public, server, and src.

'./server/index.js'

require('ignore-styles')
require('url-loader')
require('file-loader')
require('regenerator-runtime/runtime')
require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: [
        '@babel/preset-env',
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
             
            }
        ]
    ],
    plugins: [],
})
require('./ssr')

'./server/ssr.js'

import express from 'express';
import fs from 'fs';
import path from 'path';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { App } from "../src/App.js";

const server = express();

server.get(
    /.(js|css|map|ico|svg|png)$/,
    express.static(path.resolve(__dirname, '../build'))
)


server.use('*', async (req, res) => {
    let indexHTML = fs.readFileSync(
        path.resolve(__dirname, '../build/index.html'),
        {
            encoding: 'utf8',
        }
    )
    

    const app = renderToString(
        <StaticRouter location={req.originalUrl} context={{}}>
            <App />
        </StaticRouter>
    )

    indexHTML = indexHTML.replace(
        '<div id="root"></div',
        `<div id="app">${app}</div>`
    )


    res.contentType('text/html')
    res.status(200)

    res.send(indexHTML)
})

server.listen(3000, () => {
    console.log('port 3000 serving...');
})

'./src/App.js'

import React from 'react';
import './App.css';


export function App() {
  return (
    <div className="App">
      <h1>hello</h1>
    </div>
  );
}

export default { App } ;

'./package.json'

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/register": "^7.16.7",
    "ignore-styles": "^5.0.1",
    "url-loader": "^4.1.1"
  }
}

AS A RESULT:

this is what I'm getting...

Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\aarons\Dev\live-mystery\portfolio\src'
Did you mean 'reportWebVitals.js'?
BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

and when I can get the application to build and run on port 3000, this is what i get any time the page is re-rendered...

running... node --trace-warnings server gets me...

port 3000 serving...
Warning: React.jsx: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
(node:17740) UnhandledPromiseRejectionWarning: Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
    at ReactDOMServerRenderer.render (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4053:17)
    at ReactDOMServerRenderer.read (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:294:22)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)
dom\cjs\react-dom-server.node.development.js:4053:17)
m\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtimefunction (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's d.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenedom\cjs\react-dom-server.node.development.js:4053:17)rator-runtime\runtime.js:294:22)                                                                    m\cjs\react-dom-server.node.development.js:3690:29)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\rom-server.node.development.js:4298:27)untime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)         .js:63:40)
    at _next (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:194)                      rator-runtime\runtime.js:294:22)
    at C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:364                              untime.js:119:21)
(node:17740) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at emitDeprecationWarning (internal/process/promises.js:180:11)                                 e, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at processPromiseRejections (internal/process/promises.js:249:13)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)

CONTEXT: I'm trying to start with SSR using react, and I've ran into this problem before the updates, and I'm pretty sure I'm missing something obvious but I'm not sure what it could be.

In my root directory I've got public, server, and src.

'./server/index.js'

require('ignore-styles')
require('url-loader')
require('file-loader')
require('regenerator-runtime/runtime')
require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: [
        '@babel/preset-env',
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
             
            }
        ]
    ],
    plugins: [],
})
require('./ssr')

'./server/ssr.js'

import express from 'express';
import fs from 'fs';
import path from 'path';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { App } from "../src/App.js";

const server = express();

server.get(
    /.(js|css|map|ico|svg|png)$/,
    express.static(path.resolve(__dirname, '../build'))
)


server.use('*', async (req, res) => {
    let indexHTML = fs.readFileSync(
        path.resolve(__dirname, '../build/index.html'),
        {
            encoding: 'utf8',
        }
    )
    

    const app = renderToString(
        <StaticRouter location={req.originalUrl} context={{}}>
            <App />
        </StaticRouter>
    )

    indexHTML = indexHTML.replace(
        '<div id="root"></div',
        `<div id="app">${app}</div>`
    )


    res.contentType('text/html')
    res.status(200)

    res.send(indexHTML)
})

server.listen(3000, () => {
    console.log('port 3000 serving...');
})

'./src/App.js'

import React from 'react';
import './App.css';


export function App() {
  return (
    <div className="App">
      <h1>hello</h1>
    </div>
  );
}

export default { App } ;

'./package.json'

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/register": "^7.16.7",
    "ignore-styles": "^5.0.1",
    "url-loader": "^4.1.1"
  }
}

AS A RESULT:

this is what I'm getting...

Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\aarons\Dev\live-mystery\portfolio\src'
Did you mean 'reportWebVitals.js'?
BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

and when I can get the application to build and run on port 3000, this is what i get any time the page is re-rendered...

running... node --trace-warnings server gets me...

port 3000 serving...
Warning: React.jsx: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
(node:17740) UnhandledPromiseRejectionWarning: Error: Element type is invalid: expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.
    at ReactDOMServerRenderer.render (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4053:17)
    at ReactDOMServerRenderer.read (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:294:22)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)
dom\cjs\react-dom-server.node.development.js:4053:17)
m\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtimefunction (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's d.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenedom\cjs\react-dom-server.node.development.js:4053:17)rator-runtime\runtime.js:294:22)                                                                    m\cjs\react-dom-server.node.development.js:3690:29)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\rom-server.node.development.js:4298:27)untime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)         .js:63:40)
    at _next (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:194)                      rator-runtime\runtime.js:294:22)
    at C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:364                              untime.js:119:21)
(node:17740) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at emitDeprecationWarning (internal/process/promises.js:180:11)                                 e, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at processPromiseRejections (internal/process/promises.js:249:13)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)
  • javascript
  • node.js
  • reactjs
  • server-side-rendering
  • react-dom-server
Share asked Jan 9, 2022 at 3:48 djossirdjossir 931 gold badge1 silver badge7 bronze badges 2
  • I should also mention in the browser console im getting crbug/1173575, non-JS module files deprecated. – djossir Commented Jan 9, 2022 at 3:50
  • Does this answer your question? Why is 'type: module' in package.json file? – Fody Commented Feb 24, 2023 at 21:00
Add a ment  | 

1 Answer 1

Reset to default 2

I resolved it adding a package.json in the server folder scope with { "type": "module" } and removing that property from the main package.json as it was before

本文标签：

版权声明：本文标题：javascript - setting &quot;type&quot; to &quot;module&quot; in package.json then not able to read es modules - S 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744908966a2631796.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。