从 Typescript 文件导入时，Javascript 代码在 react-scripts 构建中出现“尝试导入错误：”

Posted 2023-02-21

【中文标题】从 Typescript 文件导入时，Javascript 代码在 react-scripts 构建中出现“尝试导入错误：”

【英文标题】：Javascript code gets "Attempted import error:" in react-scripts build when importing from Typescript file

【发布时间】：2019-06-30 04:24:54

【问题描述】：

react-scripts V2.1.3 出现错误。我们刚刚从 V1.x 迁移到此。在 react-scripts 升级之前，这一切都运行良好。

源文件（元数据访问，进行导出）是打字稿，代码如下：

export const NAVIGATION = 'Navigation';

引用 const 的文件是 javascript，如下：

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 compile、webpack和babel的源代码中搜索了字符串“Attempted import”，没有找到任何东西，所以我什至不知道是哪个代码导致了这个错误。

我也尝试在导入语句中的文件名中添加“.js”，（生成的）Javascript文件有这一行：

exports.NAVIGATION = 'Navigation';

它得到相同的结果。我尝试更改导入语句以引用不存在的文件，但我得到了一个不同的错误，所以它似乎正在查找导入的文件。

关于如何让它运行的任何想法？

【问题讨论】：

你确定 './universal/metadataAccess' 是正确的路径并且没有错别字吗？

是的，我尝试更改路径，但出现了不同的错误。这在以前也有效。

出现类似错误。它在第一个库中运行良好。添加第二个后它不会构建

【参考方案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