Search code examples
reactjswebpacknpm-link

ReactJS: Importing symlinked components error: Module parse failed: Unexpected token: You may need an appropriate loader to handle this file type

I'm writing a React component library which I want to use in other projects without much overhead ( bit, create-react-library, generact, etc. ) and without publishing. I want to use npm install ../shared_lib to add it to my project as a symlink in /node_modules. This command adds the symlink to project node_modules. In my shared_lib I just have a test to export default a <div></div>:

import React from 'react';

const TryTest = function() {
  return (
    <div>
      TryTest
    </div>
  )
}

export default TryTest;

The problem I'm facing is the following error when I import the component into my working project:

import TryTest from 'shared_lib';

Error:

ERROR in ../shared_lib/src/index.js 6:4
Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
| const TryTest = function() {
|   return (
>     <div>
|       TryTest
|     </div>
 @ ./src/App.js 27:0-33 28:12-19
 @ ./src/index.js
 @ multi babel-polyfill ./src/index.js

If I import anything from shared_lib other than a file with jsx - for example, a string or a function, etc. - it works fine.

EDIT: the application webpack has resolve object's symlinks prop set to false:

  resolve: {
    symlinks: false
  },

EDIT: After applying the solution in the answer below (https://stackoverflow.com/a/60980492/3006493), I later changed symlinks prop back to true. I didn't need to set it to false for the solution to work and render shared_lib components.

My app's loader:

{
  test: /\.jsx?$/,
  include: [
    path.join( __dirname, 'src'), // app/src
    fs.realpathSync(__dirname + '/node_modules/shared_lib'), // app/node_modules/shared_lib/dist/shared_lib.js
  ],
  exclude: /node_modules/,
  use: [ 'babel-loader' ]
}

EDIT: When I applied the solution in the answer below, the loader now looks like this:

{
  test: /\.jsx?$/,
  include: [
    path.join( __dirname, 'src'), // app/src
    fs.realpathSync(__dirname + '/node_modules/shared_lib'), // app/node_modules/shared_lib/dist/shared_lib.js
  ],
  exclude: /node_modules/,
  use: [ {
          loader: 'babel-loader',
          options: require("./package.json").babel
          }
        ]
}

App's current .babelrc settings (I also tried removing .babelrc and including the presets in package.json with same result):

{
  "presets": [ "@babel/preset-react", "@babel/preset-env"]
}

**EDIT: After applying the solution in the answer below, I ended up putting babel presets back into package.json.

"babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
},

I researched for a while to find a solution to this and apparently webpack has issues bundling symlinked react components? I am not using create-react-app. So, I tried to bundle the shared_lib before importing it into the project, just to see what would happen. Here's the final webpack config (I tried other configurations as well):

const pkg = require('./package.json');
const path = require('path');
const buildPath = path.join( __dirname, 'dist' );
const clientPath = path.join( __dirname, 'src');
const depsPath = path.join( __dirname, 'node_modules');
const libraryName = pkg.name;

module.exports = [
  'cheap-module-source-map'
].map( devtool => ({
  bail: true,
  mode: 'development',
  entry: {
    lib : [ 'babel-polyfill', path.join( clientPath, 'index.js' ) ]
  },
  output: {
    path: buildPath,
    filename: 'shared_lib.js',
    libraryTarget: 'umd',
    publicPath: '/dist/',
    library: libraryName,
    umdNamedDefine: true
  },
  // to avoid bundling react
  externals: {
    'react': {
        commonjs: 'react',
        commonjs2: 'react',
        amd: 'React',
        root: 'React'
    }
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: [
          clientPath
        ],
        exclude: /node_modules/,
        use: [ 'babel-loader' ],
      },
    ]
  },
  devtool,
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  }
}));

And the package.json for the shared_lib

{
  "name": "shared_lib",
  "version": "1.0.0",
  "description": "",
  "main": "dist/shared_lib.js",
  "scripts": {
    "clean": "rm -rf dist/",
    "build": "$(npm bin)/webpack --config ./webpack.config.js",
    "prepublish": "npm run clean && npm run build"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "react": "^16.8.6"
  },
  "devDependencies": {
    "react": "^16.8.6",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "babel-polyfill": "^6.26.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  },
  "babel": {
    "presets": [
      "@babel/preset-react",
      "@babel/preset-env"
    ]
  }
}

The package is bundled without errors: enter image description here

enter image description here

When I try to import the component in the same way:

import TryTest from 'shared_lib';

enter image description here

The console.log returns undefined.

enter image description here

The path to the library file in my app is fine, because if I erase everything in shared_lib/dist/shared_lib.js and just write export default 1 the console.log(TryTest) in my App.js will return 1.

I tried changing libraryTarget property in shared_lib/webpack.config to libraryTarget: 'commonjs'. The result of console.log(TryTest) becomes {shared_lib: undefined}.

enter image description here

Has anyone ever run into this?

Solution

  • I found what finally worked for me and rendered the symlinked shared_lib to the app.

    This answer: https://github.com/webpack/webpack/issues/1643#issuecomment-552767686

    Worked well rendering symlinked shared_lib components. I haven't discovered any drawbacks from using this solution, but it's the only one that worked so far.