错误：未捕获（承诺中）ReferenceError：未定义React

时间：2020-07-12 09:27:23

标签： javascript node.js reactjs webpack preact

我已经有一段时间了。
整个图片：
我已将react组件制作为npm模块，并尝试在另一个使用preact而不是react的项目中使用该npm模块。尝试加载项目页面时，就会发生上述错误。

我使用webpack捆绑了npm模块，这是我的webpack配置：

const path = require('path');
module.exports = {
entry: "./src/components/index.js",
output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: 'umd',      
    publicPath: '/dist/',      
    umdNamedDefine: true 
},
module: {
    rules: [
        {
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        },
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-class-properties']
              }
            }
        },
        {
            test: /\.(woff|woff2|eot|ttf|svg)$/,
            exclude: /node_modules/,
            loader: 'url-loader',
            options: {
                publicPath: './src/fonts/',
                name: './src/fonts/[name].[ext]',
                limit: 1000
            }
        }
    ]
},
resolve: {
    alias: {
        "react" : "preact-compat",
    "react-dom" : "preact-compat"
    }
    
},
externals: {      
    // Don't bundle react or react-dom      
    react: {          
        commonjs: "react",          
        commonjs2: "react",          
        amd: "React",          
        root: "React"      
    },      
    "react-dom": {          
        commonjs: "react-dom",          
        commonjs2: "react-dom",          
        amd: "ReactDOM",          
        root: "ReactDOM"      
     }  
 }
}

这是我的package.json：

{
   "name": "tutorial12",
    "version": "1.0.41",
    "description": "",
    "main": "./dist/main.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "buildWebpack": "webpack --config webpack.config.js"
    },
    "author": "",
    "license": "ISC",
    "peerDependencies": {
    "react": "16.8.3",
    "react-redux": "5.0.7",
    "redux": "4.0.0",
    "redux-thunk": "2.3.0"
   },
   "devDependencies": {
       "preload-webpack-plugin": "3.0.0-beta.3",
       "webpack": "4.43.0",
       "webpack-cli": "3.3.12",
       "babel-plugin-react-transform": "3.0.0",
       "css-loader": "3.6.0",
       "file-loader": "6.0.0",
       "style-loader": "1.2.1",
       "url-loader": "4.1.0",
       "react": "16.8.3",
       "react-redux": "5.0.7",
       "redux": "4.0.0",
       "redux-thunk": "2.3.0"
    },
    "dependencies": {
       "@babel/cli": "7.10.4",
       "@babel/core": "7.10.4",
       "@babel/plugin-proposal-class-properties": "7.10.4",
       "@babel/preset-env": "7.10.4",
       "@babel/preset-react": "7.10.4",
        "babel-loader": "8.1.0"
     }
   }

我尝试过的事情：

  1. 在webpack.config.js中添加resolve: {alias: {"react": "preact-compat", "react-dom" : "preact-compat"}}
  2. 在webpack.config.js中添加resolve: {alias: {"react": path.resolve(__dirname, "./node_modules/react"), "react-dom" : path.resolve(__dirname, "./node_modules/react-dom")}}。
  3. 添加一个resolve: {alias: {"react": path.resolve(__dirname, "./node_modules/preact-compat"), "react-dom" : path.resolve(__dirname, "./node_modules/react-dom")}}
  4. 将package.json中的依赖项从devDependencies字段移至dependencies字段

这是错误的堆栈跟踪：

Uncaught (in promise) ReferenceError: React is not defined
at i.value (main.js:1)
at callMethod (preact-compat.es.js:491)
at i.render (preact-compat.es.js:502)
at renderComponent (preact.esm.js:728)
at setComponentProps (preact.esm.js:676)
at buildComponentFromVNode (preact.esm.js:856)
at idiff (preact.esm.js:397)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at diff (preact.esm.js:348)
at renderComponent (preact.esm.js:769)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at buildComponentFromVNode (preact.esm.js:842)
at idiff (preact.esm.js:397)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at diff (preact.esm.js:348)
at renderComponent (preact.esm.js:769)
at setComponentProps (preact.esm.js:676)
at buildComponentFromVNode (preact.esm.js:842)
at idiff (preact.esm.js:397)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at innerDiffNode (preact.esm.js:516)
at idiff (preact.esm.js:439)
at diff (preact.esm.js:348)
at renderComponent (preact.esm.js:769)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
at renderComponent (preact.esm.js:746)
at setComponentProps (preact.esm.js:676)
value   @   main.js:1
callMethod  @   preact-compat.es.js:491
(anonymous) @   preact-compat.es.js:502 
renderComponent @   preact.esm.js:728
setComponentProps   @   preact.esm.js:676
buildComponentFromVNode @   preact.esm.js:856
idiff   @   preact.esm.js:397
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
diff    @   preact.esm.js:348
renderComponent @   preact.esm.js:769
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
buildComponentFromVNode @   preact.esm.js:842
idiff   @   preact.esm.js:397
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
diff    @   preact.esm.js:348
renderComponent @   preact.esm.js:769
setComponentProps   @   preact.esm.js:676
buildComponentFromVNode @   preact.esm.js:842
idiff   @   preact.esm.js:397
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
diff    @   preact.esm.js:348
renderComponent @   preact.esm.js:769
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
buildComponentFromVNode @   preact.esm.js:842
idiff   @   preact.esm.js:397
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
innerDiffNode   @   preact.esm.js:516
idiff   @   preact.esm.js:439
diff    @   preact.esm.js:348
renderComponent @   preact.esm.js:769
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
rerender    @   preact.esm.js:163
Promise.then (async)        
enqueueRender   @   preact.esm.js:154
setState    @   preact.esm.js:951
onStateChange   @   connectAdvanced.js:205
dispatch    @   redux.js:221
e   @   VM9188:1
(anonymous) @   index.js:28
(anonymous) @   index.js:11
dispatch    @   redux.js:563
(anonymous) @   index.js:110
Promise.then (async)        
(anonymous) @   index.js:94
(anonymous) @   index.js:11
(anonymous) @   redux.js:449
componentDidMount   @   index.js:112
flushMounts @   preact.esm.js:328
renderComponent @   preact.esm.js:821
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
setComponentProps   @   preact.esm.js:676
renderComponent @   preact.esm.js:746
rerender    @   preact.esm.js:163
Promise.then (async)        
enqueueRender   @   preact.esm.js:154
setState    @   preact.esm.js:951
onStateChange   @   connectAdvanced.js:205
dispatch    @   redux.js:221
e   @   VM9188:1
(anonymous) @   index.js:28
(anonymous) @   index.js:11
dispatch    @   redux.js:563
(anonymous) @   index.js:110
Promise.then (async)        
(anonymous) @   index.js:94
(anonymous) @   index.js:11
(anonymous) @   redux.js:449
componentDidMount   @   index.js:82
flushMounts @   preact.esm.js:328
diff    @   preact.esm.js:357
render  @   preact.esm.js:991
render$1    @   preact-compat.es.js:149
./src/index.js  @   index.js:10
__webpack_require__ @   bootstrap 183f69c…:678
fn  @   bootstrap 183f69c…:88
0   @   socketManager.js:101
__webpack_require__ @   bootstrap 183f69c…:678
(anonymous) @   bootstrap 183f69c…:724
(anonymous) @   bootstrap 183f69c…:724

0 个答案:

没有答案
相关问题
最新问题