当从 TypeScript 文件中导入时，JavaScript 代码在 react-scripts 构建过程中出现“尝试导入错误”的错误。

Question

在使用react-scripts V2.1.3时出现了错误。我们刚从V1.x迁移过来。在升级react-scripts之前，所有这些都运行良好。

源文件（metadataAccess，进行导出）是typescript，并具有以下代码：

export const NAVIGATION = 'Navigation';

引用 const 的文件代码如下：

import { WIDGET_TREE, NAVIGATION, metadataScan } from './universal/metadataAccess';
...
const scanNavigation = await metadataScan(dynamoClient, NAVIGATION);

错误信息如下：

Creating an optimized production build...
Failed to compile.

./src/App.jsx
Attempted import error: 'NAVIGATION' is not exported from './universal/metadataAccess'.

如果我要修复这个错误（如上所述），那么我会在另一个const中遇到相同的问题。不幸的是，这些错误是逐一报告的。我还在导出的枚举中遇到了这个问题。所有这些都来自TypeScript文件。我将引用文件的扩展名更改为.tsx（从.jsx），但没有任何区别。

我已经在TypeScript编译器、Webpack和Babel源代码中搜索了字符串“Attempted import”，但没有找到任何内容，因此我甚至不知道哪段代码引起了这个错误。

我还尝试在导入语句中添加“.js”到文件名中，生成的JavaScript文件有这行代码：

exports.NAVIGATION = 'Navigation';

它得到了相同的结果。我尝试将导入语句更改为引用不存在的文件，然后我会得到不同的错误，因此它似乎找到了导入的文件。

有什么想法如何运行它？

- Francis Upton IV

---

你确定 './universal/metadataAccess' 是正确的路径，没有拼写错误吗？ - Roy.B

是的，我尝试更改路径，但出现了不同的错误。而且这之前是可以正常工作的。 - Francis Upton IV

出现类似的错误。第一个库使用正常，添加第二个库后无法构建。 - landrykapela

Answer 1

以下内容适用于react-native-web，并包含“尝试导入错误”的解决方案，这也可能对您有所帮助。

npm install --save-dev react-app-rewired

在你的项目根目录中创建一个名为 config-overrides.js 的文件。

// used by react-app-rewired

const webpack = require('webpack');
const path = require('path');

module.exports = {
  webpack: function (config, env) {
    config.module.rules[1].use[0].options.baseConfig.extends = [
      path.resolve('.eslintrc.js'),
    ];

    // To let alias like 'react-native/Libraries/Components/StaticRenderer'
    // take effect, must set it before alias 'react-native'
    delete config.resolve.alias['react-native'];
    config.resolve.alias['react-native/Libraries/Components/StaticRenderer'] =
      'react-native-web/dist/vendor/react-native/StaticRenderer';
    config.resolve.alias['react-native'] = path.resolve(
      'web/aliases/react-native',
    );

    // Let's force our code to bundle using the same bundler react native does.
    config.plugins.push(
      new webpack.DefinePlugin({
        __DEV__: env === 'development',
      }),
    );

    // Need this rule to prevent `Attempted import error: 'SOME' is not exported from` when `react-app-rewired build`
    // Need this rule to prevent `TypeError: Cannot assign to read only property 'exports' of object` when `react-app-rewired start`
    config.module.rules.push({
      test: /\.(js|tsx?)$/,
      // You can exclude the exclude property if you don't want to keep adding individual node_modules
      // just keep an eye on how it effects your build times, for this example it's negligible
      // exclude: /node_modules[/\\](?!@react-navigation|react-native-gesture-handler|react-native-screens)/,
      use: {
        loader: 'babel-loader',
      },
    });

    return config;
  },
  paths: function (paths, env) {
    paths.appIndexJs = path.resolve('index.web.js');
    paths.appSrc = path.resolve('.');
    paths.moduleFileExtensions.push('ios.js');
    return paths;
  },
};

同时创建一个 web/aliases/react-native/index.js。

// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b

import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';

// And let's stub out everything that's missing!
export const ViewPropTypes = {
  style: () => {},
};
RNText.propTypes = {
  style: () => {},
};
RNImage.propTypes = {
  style: () => {},
  source: () => {},
};

export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};

现在您只需运行react-app-rewired start而不是react-scripts start。

- Li Zheng