React-native-web: Module not found: Can't resolve 'react-art'

[ethanneff]

Do you want to request a feature or report a bug?

• bug

What is the current behavior?

./node_modules/react-native-web/dist/exports/ART/index.js
Module not found: Can't resolve 'react-art' in '/Users/eneff/drive/active4/react-native/main/node_modules/react-native-web/dist/exports/ART'

If the current behavior is a bug, please provide the steps to reproduce and
if a minimal demo of the problem via Glitch or similar (template:
https://glitch.com/edit/#!/react-native-web-playground).

• blank create-react-app and create-react-native-app app with yarn add react react-dom react-native-web
• react-scripts start to build the website

What is the expected behavior?

• Is yarn add react-art required? I can only get rid of the error if I include the dependency

Environment (include versions). Did this work in previous versions?

• OS: Mac 10.13
• Device:
• Browser: Chrome 65.0.3325.181
• React Native for Web (version): 0.6.0
• React (version): 16.3.1

[koulmomo]

It's set as a peerDependency

You have 2 choices:

1. Add react-art as a dependency to your project

2. use https://www.npmjs.com/package/babel-plugin-react-native-web along with making sure you never import all of React Native and only using named imports instead.

// never do this
import ReactNative from 'react-native';

// do this instead
import {View, Text} from 'react-native';

The downside is that you will have to run transpiled code on the server.

more info on peer dependencies here

Maybe this info should be added to the Readme or should just have the instructions to install react-art even if you don't use ART.

[necolas]

The readme says to install this peer dependency as needed. The npm log will also list peer dependencies

[askiiRobotics]

Tha 'react-art' package is out of date. Last updated a year ago. It throws an error.

[roysG]

Any updates?

[seame1on]

I follow the package.json, add the peer dependencies:

"peerDependencies": {
    "react": "16.0.0-alpha.12",
    "react-dom": "^16.3.1",
    "react-art": "~16.0.0"
}

It still not working

[abhilekhsingh041992]

I added the "react-art" in dependencies that worked for me.
"dependencies": { "expo": "^25.0.0", "react": "^16.4.1", "react-dom": "^16.4.1", "react-native": "0.52.0", "react-native-web": "^0.8.6", "react-scripts": "1.1.4", "react-art": "~16.0.0" }

[baptistemanson]

We are using create-react-app with Typescript and don't have the luxury of adding a babel plugin without ejecting, which is a steep price to pay.

In our context, adding react-art was mandatory for us to get the react-native-web working.
React-art adds 50KB in the build we will never use.

[SuhairZain]

@koulmomo @necolas
Hi, my current webpack rule for babel is as follows:

{
    test: /\.(js|jsx|mjs)$/,
    include: [
        paths.src,
        // In order to use react-native targetted libraries on web,
        // we have to use babel to compile them from ES6 to ES5.
        // This would still not allow us to use libraries that have RN
        // dependencies that are not polyfilled by react-native-web.
        path.resolve(paths.nodeModules, 'react-native-vector-icons'),
    ],
    loader: 'babel-loader',
    options: {
        compact: true,
        presets: ['react-native'],
    },
},

But this gives me an error that 'react-art' cannot be resolved. I tried running yarn list react-art to see if any packages we use depend on it, but it didn't list any. As per the suggestion in this thread, I replaced the usage of react-native babel preset with react-native-web, but the error is still there. Could it be that there is some library we're using that depends on react-art or am I doing something wrong with the babel step?

We always use named imports for react-native, never an umbrella import.

Also, could you explain what was meant by "The downside is that you will have to run transpiled code on the server."?

[EvanBacon]

I'm also having this problem.

ERROR in /node_modules/react-native-web/dist/exports/ART/index.js
Module not found: Error: Can't resolve 'react-art' in '//node_modules/react-native-web/dist/exports/ART'
 @ //node_modules/react-native-web/dist/exports/ART/index.js 1:0-27 1:42-45
 @ //node_modules/react-native-web/dist/index.js
 @ multi react react-native-web

package.json

"dependencies": {
  "react": "16.5.0",
  "react-dom": "16.7.0",
  "react-native": "0.57.1",
  "react-native-web": "^0.10.0",
  ...
},
"peerDependencies": {
  "react-art": "^16.8.2"
  ...
},
"devDependencies": {
  "babel-loader": "^8.0.5",
  "babel-plugin-react-native-web": "^0.9.6",
  "webpack": "4.24.0",
  "webpack-cli": "^3.2.3",
  ...
}

[narendrapxm]

hhh

[kwoxer]

I was having this issue:

react Module not found: Can't resolve 'react-native'

and it helped me to do

yarn add react-native-web

Now works. Thanks for the hint.