Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript code gets "Attempted import error:" in react-scripts build when importing from Typescript file

Getting an error with react-scripts V2.1.3. We are just migrated to this from V1.x. This all worked well previous to the react-scripts upgrade.

The source file (metadataAccess, doing the export) is typescript and has the following code:

export const NAVIGATION = 'Navigation';

The file referencing the const is Javascript as follows:

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

The error is:

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

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

If I were to fix this error (above), I get the same problem on another const. Sadly, the errors are reported one at a time. I also get it on an exported enum. All from Typescript files. I changed the extensions of the referencing files to be .tsx (from .jsx) and it makes no difference.

I have searched the source code of the Typescript compile, webpack, and babel for the string "Attempted import" and not found anything, so I don't even know which code is causing this error.

I also tried adding ".js" to the file name in the import statement, and the (generated) Javascript file has this line:

exports.NAVIGATION = 'Navigation';

It gets the same result. I tried changing the import statement to refer to a non-existent file, and I get a different error, so it seems to be finding the imported file.

Any ideas about how to get this to run?

like image 483
Francis Upton IV Avatar asked Feb 06 '19 09:02

Francis Upton IV


People also ask

How do I fix attempted import error in react JS?

The React. js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file. To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports.

Do you need to import react in TSX?

You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement . However, other exports like hooks must be imported.

How do I import a react file?

To import a component from another file in React:Export the component from file A , e.g. export function Button() {} . Import the component in file B as import {Button} from './another-file' . Use the imported component in file B .

What is import in react?

Importing and exporting in React JS will help us write modular code, i.e., splitting code into multiple files. Importing allows using contents from another file, whereas exporting makes the file contents eligible for importing.


1 Answers

Below is for react-native-web, and include the solution of "Attempted import error", maybe also helpful for you.

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

Create a config-overrides.js in your project root

// 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;
  },
};

Also create a 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 = () => {};

Now you can just run react-app-rewired start instead of react-scripts start

like image 60
Li Zheng Avatar answered Sep 20 '22 16:09

Li Zheng