与 webpack 一起使用时，react-navigation 无法捆绑 [英] react-navigation is failing to bundle when using with webpack

问题描述

我们在通过 web pack 打包时遇到此错误

We are getting this error while bundling through web pack

 ERROR in ./node_modules/react-navigation-stack/lib/module/views/StackView/StackViewLayout.js
    Module not found: Error: Can't resolve 'react-native-screens' in 'C:\Users\gowthaman.s\Desktop\WebPack Testing\SampleButton\node_modules\react-navigation-stack\lib\module\views\StackView'
     @ ./node_modules/react-navigation-stack/lib/module/views/StackView/StackViewLayout.js 1:1712-1762 1:10662-10677
     @ ./node_modules/react-navigation-stack/lib/module/index.js
     @ ./node_modules/react-navigation/src/react-navigation.js
     @ ./Lw.Mobile.Base/RootAppContainer.js
     @ ./App.js
     @ ./index.js

推荐答案

在 package.config 中添加以下包

Add the following packages in the package.config

{
"@webpack-cli/init": "^0.2.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react-native": "2.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "imports-loader": "^0.8.0",
    "json-loader": "^0.5.7",
 "react-native-webpack": "^0.1.1"
}


  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.5.5",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-cli": "^6.24.0",
    "babel-core": "^6.26.3",
    "babel-jest": "^24.9.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^3.2.0",
    "eslint": "^6.2.2",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^5.0.0",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.56.0",
    "mini-css-extract-plugin": "^0.8.0",
    "postcss-loader": "^3.0.0",
    "react-test-renderer": "16.8.6",
    "sass": "^1.22.10",
    "sass-loader": "^7.3.1",
    "style-loader": "^1.0.0",
    "webpack": "^4.39.3",
    "webpack-cli": "^3.3.7",
    "webpack-dev-server": "^3.8.0",
    "webpack-node-externals": "^1.7.2"
  }

我的 Webpack.cnfig 看起来像

My Webpack.cnfig looks like

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
var PACKAGE = require('./package.json');
var banner = PACKAGE.buildname + ' - ' + PACKAGE.version + ' | ' +
  '(c) ' + new Date().getFullYear() + ',  ' + PACKAGE.author + ' | ' + '\n' +  PACKAGE.license + ' \n' +
  PACKAGE.copyright;

const defaultConfig = {
    mode: "production",
    devtool: 'source-map',
    target: 'node', // in order too ignore built-in modules like path, fs, etc.
    externals: [nodeExternals()], // in order to ignore all modules in node_modules folde   
    module: {
        rules: [
            {
                test: /\.(js|jsx|mjs)$/,
                exclude: /node_modules/,
                 use: ['babel-loader']
            },
              {
                test: /\.(jpe?g|png|gif)$/i,
                exclude: /node_modules/,
                use: [
                  'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                  'image-webpack-loader',
                ],
              },
              {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [
                       {
                         loader: "css-loader",
                       },
                       {
                         loader: "postcss-loader"
                       },
                       {
                         loader: "sass-loader",
                         options: {
                           implementation: require("sass")
                         }
                       }
                     ]
            },
              {
                test: /\.(woff|woff2|ttf|otf|eot)$/,
                exclude: /node_modules/,
                use: [
                       {
                         loader: "file-loader",
                         options: {
                           outputPath: 'fonts'
                         }
                       }
                     ]
              }
        ]
    }
};
const reactNativeBundle = Object.assign({}, defaultConfig, { //Bundle 3: compile the react native client
    entry: {
        main: './Lw.Mobile.Base/App.js'
    },
    output: {
      filename: PACKAGE.buildname + ".js",
      library: PACKAGE.buildname,
      libraryTarget: "umd",
      path: path.join(__dirname, '/Bundled_modules'),
      sourceMapFilename: PACKAGE.buildname + ".js.map"
    },  
    resolve: {
      extensions: ['.js', '.jsx', '.json']
    },
    plugins: [
      new webpack.BannerPlugin(banner)
    ]
    
});

module.exports = [
 reactNativeBundle
];

这篇关于与 webpack 一起使用时，react-navigation 无法捆绑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！