在入口路径之外导入文件时，Webpack Babel 构建失败答案

【问题标题】：Webpack Babel build fails when importing files outside entry path在入口路径之外导入文件时，Webpack Babel 构建失败
【发布时间】：2021-02-28 22:35:19
【问题描述】：

我有这个项目，我已经在使用 webpack + babel 来构建。我碰壁了，因为我想做的是在我的节点（服务器）和我的反应应用程序（前端）之间共享一些常量。我的项目结构是这样的

- app
- internals
  - webpack
    - different webpack configs (node, react-dev, react-production etc)
- server
- shared
- .babelrc

我已将一些“常量”文件放入我在应用程序和服务器中使用的共享文件夹中。当我尝试构建我的服务器时，我得到了这个

ERROR in ./shared/reports.constants.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: Cannot read property 'code' of null
at transpile (C:\Users\XXX\Desktop\XXX\XXX\node_modules\babel-loader\lib\index.js:70:21)
at Object.module.exports (C:\Users\XXX\Desktop\XXX\XXX\node_modules\babel-loader\lib\index.js
:173:20)

下面是我的 webpack 配置文件。有什么想法可能是错的吗？

{
    mode: 'production',
    target: 'node',
    externals: nodeExternals(),
    entry: {
        server: [path.join(process.cwd(), 'server/index.js')],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(process.cwd(), 'build'),
        // sourceMapFilename: '[name].js.map',
    },
    devtool: 'hidden-source-map',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                  { fallback: 'style-loader', use: { loader: 'css-loader', options: { minimize: true } } }),
            },
            { test: /\.jpg$/, use: [{ loader: 'file-loader', options: { name: '/images/[name].[ext]' } }] },
            { test: /\.md$/, use: [{ loader: 'markdown-with-front-matter-loader' }] },
            {
                test: /\.js$/,
                exclude: [/node_modules/],
                include: [/server/, /shared/],
                use: [
                    'babel-loader',
                    {
                        loader: 'webpack-preprocessor-loader',
                        options: {
                            debug: process.env.NODE_ENV !== 'production',
                            directives: {
                                secret: false,
                            },
                            params: {
                                ENV: process.env.NODE_ENV,
                                DEBUG: process.env.NODE_ENV !== 'production',
                                PRODUCTION: process.env.NODE_ENV === 'production',
                                ENVIRONMENT: process.env.ENVIRONMENT,
                            },
                            verbose: false,
                        },
                    },
                ],
            },
        ],
    },
plugins
etc
}

.babelrc 文件

{
  "presets": [
     "@babel/preset-env"
   ],
   "plugins": [
       "react-hot-loader/babel",
       "@babel/transform-runtime",
       "transform-html-import-to-string"
   ]
}

我已将 /shared/ 添加到包含规则中。

提前谢谢你

【问题讨论】：

根据您提供的内容很难找出问题所在，因此最好提供最少的可重现 repo。
您的.babelrc 在哪个文件夹中？如果它不在所有代码的父目录中，那么它将无法工作。您可能想改用babel.config.js。
它在根目录中，但 webpack 配置嵌套在文件夹中。使用 babel.config.js 代替 babelrc 有什么好处？
但是只有 1 个 package.json 文件。只是应用程序/服务器的不同 webpack 配置

标签： node.js webpack babeljs webpack-4 babel-loader

【解决方案1】：

出于某种原因，我已经有了 babel.config.js + babelrc。我所要做的就是进入 babel.config.js 并添加要包含在 env => 生产中的共享文件夹。

感谢您的宝贵时间

【讨论】：