Код Javascript получает ошибку попытки импорта: в сборке сценариев реакции при импорте из файла Typescript

Получение ошибки с реактивными скриптами V2.1.3. Мы только что перешли на это с V1.x. Все это хорошо работало до обновления сценариев реакции.

Исходный файл (metadataAccess, экспорт) является машинописным и имеет следующий код:

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'.

Если бы я исправил эту ошибку (см. Выше), я бы получил ту же проблему на другом константе. К сожалению, об ошибках сообщается по одной. Я также получаю это в экспортированном перечислении. Все из файлов Typescript. Я изменил расширения ссылочных файлов на .tsx (от .jsx), и это не имеет значения.

Я искал в исходном коде компиляции Typescript, webpack и babel строку «Попытка импорта» и ничего не нашел, поэтому я даже не знаю, какой код вызывает эту ошибку.

Я также попытался добавить ".js" к имени файла в операторе импорта, и в (сгенерированном) файле Javascript есть эта строка:

exports.NAVIGATION = 'Navigation';

Получается тот же результат. Я попытался изменить оператор импорта, чтобы он ссылался на несуществующий файл, и получил другую ошибку, так что похоже, что импортированный файл находился.

Есть идеи о том, как это запустить?


reactjs typescript create-react-app javascript react-scripts
person Francis Upton IV    schedule 06.02.2019    source источник
comment
Вы уверены, что "./universal/metadataAccess" правильный путь и без опечаток?   -  person Roy.B    schedule 06.02.2019
comment
да, я попытался изменить путь, но получил другую ошибку. И это работало раньше.   -  person Francis Upton IV    schedule 06.02.2019
comment
Получаю аналогичную ошибку. С первой библиотекой все работало нормально. После добавления второго он не будет строиться   -  person landrykapela    schedule 04.03.2020

Ответы (1)


arrow_upward
0
arrow_downward

Ниже приведено решение для response-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

person Li Zheng    schedule 02.09.2020