javascript - How to export React component as npm package? Create-React-App SyntaxError: Unexpected token - Stack Overflow

admin管理员组

文章数量:1025477

I have created react app which name is "create-react-app-npm". And in the ./src/index.js file I have exported ponent to use it npm package in the another project. Firstly I have run this code in my main root.

npm run eject and then next part of my project

This is the src/index.js in the create-react-app-npm folder

import React from 'react';
import './index.css';
import App from './App';

class ExportApp extends React.Component{
    render(){
        return(<App sayHi="hello There I am creating my first npm package"/>);
    }
}
export default ExportApp;

this is the package.json file in the create-react-app-npm folder

{
  "name": "create-react-app-npm",
  "version": "0.1.0",
  "main": "src/index.js",
  "dependencies": {
    "@babel/core": "7.5.5",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "1.13.0",
    "@typescript-eslint/parser": "1.13.0",
    "babel-eslint": "10.0.2",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.8.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.8.0",
    "jest-watch-typeahead": "0.3.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.9.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.2",
    "url-loader": "2.1.0",
    "webpack": "4.39.1",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

I have run npm link in the terminal while I am in the root folder of my project.

After I have created this main project, I have also created npm_test project folder by using create-react-app npm_test code.

I have run npm link create-react-app-npm code to link previous main project which is create-react-app-npm and my second npm-test project.

My App.js file as follows in my npm-test project folder.

import React from 'react';
import './App.css';
import ExportApp from 'create-react-app-npm'

function App2() {
  return (
    <div className="App">
     <ExportApp/>
    </div>
  );
}

export default App2;

when I run npm start I could not run the project. I have got the error messages. I do not have any ideas what does it mean. What should I do?

Error is like this

Failed to pile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

I have expected to run ExportMain ponent in the npm-test project. What should be the path which I should follow?

I have created react app which name is "create-react-app-npm". And in the ./src/index.js file I have exported ponent to use it npm package in the another project. Firstly I have run this code in my main root.

npm run eject and then next part of my project

This is the src/index.js in the create-react-app-npm folder

import React from 'react';
import './index.css';
import App from './App';

class ExportApp extends React.Component{
    render(){
        return(<App sayHi="hello There I am creating my first npm package"/>);
    }
}
export default ExportApp;

this is the package.json file in the create-react-app-npm folder

{
  "name": "create-react-app-npm",
  "version": "0.1.0",
  "main": "src/index.js",
  "dependencies": {
    "@babel/core": "7.5.5",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "1.13.0",
    "@typescript-eslint/parser": "1.13.0",
    "babel-eslint": "10.0.2",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.8.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.8.0",
    "jest-watch-typeahead": "0.3.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.9.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.2",
    "url-loader": "2.1.0",
    "webpack": "4.39.1",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

I have run npm link in the terminal while I am in the root folder of my project.

After I have created this main project, I have also created npm_test project folder by using create-react-app npm_test code.

I have run npm link create-react-app-npm code to link previous main project which is create-react-app-npm and my second npm-test project.

My App.js file as follows in my npm-test project folder.

import React from 'react';
import './App.css';
import ExportApp from 'create-react-app-npm'

function App2() {
  return (
    <div className="App">
     <ExportApp/>
    </div>
  );
}

export default App2;

when I run npm start I could not run the project. I have got the error messages. I do not have any ideas what does it mean. What should I do?

Error is like this

Failed to pile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

I have expected to run ExportMain ponent in the npm-test project. What should be the path which I should follow?

• javascript
• reactjs
• npm
• webpack
• create-react-app

Share Improve this question Follow edited Sep 17, 2020 at 17:10 ford04 75k2525 gold badges217217 silver badges176176 bronze badges asked Aug 31, 2019 at 12:36 Semih ÖzdenSemih Özden 22744 silver badges88 bronze badges 3

• The error means, your JSX has not been transpiled into valid JavaScript syntax. CRA in your main project does not transpile JSX from node_modules (ponent lib). Build your library for node - e.g. config from here, adjust your main field in package.json to be the dist index.js and you should be good to go. – ford04 Commented Aug 31, 2019 at 16:34
• Thank you for your answer. However my webpack-config file is different from any examples on the internet. I do not know how to configure it according to website which you have given above. My webpack-config file code sample is as follows; const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve('style-loader'), isEnvProduction && { loader: MiniCssExtractPlugin.loader, options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {}, }, – Semih Özden Commented Aug 31, 2019 at 18:08
• (github./SemihOzden/npm_example) this is the my create-react-app-npm repository link. I want to create npm package with it in local and then import another react project in my local puter. What should I do with it? – Semih Özden Commented Sep 1, 2019 at 12:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Create React App/CRA is not the optimal tool to build and bundle npm packages, its main purpose is to create Single Page Applications. For ponent libraries, CRA team remends to use more flexible toolchains.

As you have ejected CRA, you can still try to adjust Webpack config. Here is an example config with the essential settings targeting npm packages:

// simply way to exclude all node_modules from bundle.
// You can configure entries manually, too.
const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...
  output: {
    // provide entry point exports via CommonJS / as npm package
    libraryTarget: "monjs"
  },
  ...
  // ignore built-in modules like path, fs, etc.
  target: "node",
  // don't bundle node_modules with your library
  // external packages should be required
  externals: [nodeExternals()]
};

Concerning CRA, add those settings to the base config <root>/config/webpack.config.js. Possible Further adjustments:

output: {
  // give your main npm package file a static name
  // It should be stored to build/node_bundle.js
  filename: "node_bundle.js"
},

package.json:

"main": "build/node_bundle.js"

Last, build your library and require it in your client application.

Links:

• Webpack libraryTarget setting
• Webpack externals setting
• webpack-node-externals
• Authoring libraries

I have created react app which name is "create-react-app-npm". And in the ./src/index.js file I have exported ponent to use it npm package in the another project. Firstly I have run this code in my main root.

npm run eject and then next part of my project

This is the src/index.js in the create-react-app-npm folder

import React from 'react';
import './index.css';
import App from './App';

class ExportApp extends React.Component{
    render(){
        return(<App sayHi="hello There I am creating my first npm package"/>);
    }
}
export default ExportApp;

this is the package.json file in the create-react-app-npm folder

{
  "name": "create-react-app-npm",
  "version": "0.1.0",
  "main": "src/index.js",
  "dependencies": {
    "@babel/core": "7.5.5",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "1.13.0",
    "@typescript-eslint/parser": "1.13.0",
    "babel-eslint": "10.0.2",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.8.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.8.0",
    "jest-watch-typeahead": "0.3.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.9.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.2",
    "url-loader": "2.1.0",
    "webpack": "4.39.1",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

I have run npm link in the terminal while I am in the root folder of my project.

After I have created this main project, I have also created npm_test project folder by using create-react-app npm_test code.

I have run npm link create-react-app-npm code to link previous main project which is create-react-app-npm and my second npm-test project.

My App.js file as follows in my npm-test project folder.

import React from 'react';
import './App.css';
import ExportApp from 'create-react-app-npm'

function App2() {
  return (
    <div className="App">
     <ExportApp/>
    </div>
  );
}

export default App2;

when I run npm start I could not run the project. I have got the error messages. I do not have any ideas what does it mean. What should I do?

Error is like this

Failed to pile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

I have expected to run ExportMain ponent in the npm-test project. What should be the path which I should follow?

I have created react app which name is "create-react-app-npm". And in the ./src/index.js file I have exported ponent to use it npm package in the another project. Firstly I have run this code in my main root.

npm run eject and then next part of my project

This is the src/index.js in the create-react-app-npm folder

import React from 'react';
import './index.css';
import App from './App';

class ExportApp extends React.Component{
    render(){
        return(<App sayHi="hello There I am creating my first npm package"/>);
    }
}
export default ExportApp;

this is the package.json file in the create-react-app-npm folder

{
  "name": "create-react-app-npm",
  "version": "0.1.0",
  "main": "src/index.js",
  "dependencies": {
    "@babel/core": "7.5.5",
    "@svgr/webpack": "4.3.2",
    "@typescript-eslint/eslint-plugin": "1.13.0",
    "@typescript-eslint/parser": "1.13.0",
    "babel-eslint": "10.0.2",
    "babel-jest": "^24.8.0",
    "babel-loader": "8.0.6",
    "babel-plugin-named-asset-import": "^0.3.3",
    "babel-preset-react-app": "^9.0.1",
    "camelcase": "^5.2.0",
    "case-sensitive-paths-webpack-plugin": "2.2.0",
    "css-loader": "2.1.1",
    "dotenv": "6.2.0",
    "dotenv-expand": "4.2.0",
    "eslint": "^6.1.0",
    "eslint-config-react-app": "^5.0.1",
    "eslint-loader": "2.2.1",
    "eslint-plugin-flowtype": "3.13.0",
    "eslint-plugin-import": "2.18.2",
    "eslint-plugin-jsx-a11y": "6.2.3",
    "eslint-plugin-react": "7.14.3",
    "eslint-plugin-react-hooks": "^1.6.1",
    "file-loader": "3.0.1",
    "fs-extra": "7.0.1",
    "html-webpack-plugin": "4.0.0-beta.5",
    "identity-obj-proxy": "3.0.0",
    "is-wsl": "^1.1.0",
    "jest": "24.8.0",
    "jest-environment-jsdom-fourteen": "0.1.0",
    "jest-resolve": "24.8.0",
    "jest-watch-typeahead": "0.3.1",
    "mini-css-extract-plugin": "0.5.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.5.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "7.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.9.0",
    "react-app-polyfill": "^1.0.2",
    "react-dev-utils": "^9.0.3",
    "react-dom": "^16.9.0",
    "resolve": "1.12.0",
    "resolve-url-loader": "3.1.0",
    "sass-loader": "7.2.0",
    "semver": "6.3.0",
    "style-loader": "1.0.0",
    "terser-webpack-plugin": "1.4.1",
    "ts-pnp": "1.1.2",
    "url-loader": "2.1.0",
    "webpack": "4.39.1",
    "webpack-dev-server": "3.2.1",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "4.3.1"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1"
  }
}

I have run npm link in the terminal while I am in the root folder of my project.

After I have created this main project, I have also created npm_test project folder by using create-react-app npm_test code.

I have run npm link create-react-app-npm code to link previous main project which is create-react-app-npm and my second npm-test project.

My App.js file as follows in my npm-test project folder.

import React from 'react';
import './App.css';
import ExportApp from 'create-react-app-npm'

function App2() {
  return (
    <div className="App">
     <ExportApp/>
    </div>
  );
}

export default App2;

when I run npm start I could not run the project. I have got the error messages. I do not have any ideas what does it mean. What should I do?

Error is like this

Failed to pile.

../create-react-app-npm/src/index.js
SyntaxError: /home/semih/Desktop/create-react-app-npm/src/index.js: Unexpected token (7:15)

   5 | class ExportApp extends React.Component{
   6 |     render(){
>  7 |         return(<App sayHi="hello There I am creating my first npm package"/>);
     |                ^
   8 |     }
   9 | }
  10 | export default ExportApp;

I have expected to run ExportMain ponent in the npm-test project. What should be the path which I should follow?

• javascript
• reactjs
• npm
• webpack
• create-react-app

Share Improve this question Follow edited Sep 17, 2020 at 17:10 ford04 75k2525 gold badges217217 silver badges176176 bronze badges asked Aug 31, 2019 at 12:36 Semih ÖzdenSemih Özden 22744 silver badges88 bronze badges 3

• The error means, your JSX has not been transpiled into valid JavaScript syntax. CRA in your main project does not transpile JSX from node_modules (ponent lib). Build your library for node - e.g. config from here, adjust your main field in package.json to be the dist index.js and you should be good to go. – ford04 Commented Aug 31, 2019 at 16:34
• Thank you for your answer. However my webpack-config file is different from any examples on the internet. I do not know how to configure it according to website which you have given above. My webpack-config file code sample is as follows; const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ isEnvDevelopment && require.resolve('style-loader'), isEnvProduction && { loader: MiniCssExtractPlugin.loader, options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {}, }, – Semih Özden Commented Aug 31, 2019 at 18:08
• (github./SemihOzden/npm_example) this is the my create-react-app-npm repository link. I want to create npm package with it in local and then import another react project in my local puter. What should I do with it? – Semih Özden Commented Sep 1, 2019 at 12:00

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Create React App/CRA is not the optimal tool to build and bundle npm packages, its main purpose is to create Single Page Applications. For ponent libraries, CRA team remends to use more flexible toolchains.

As you have ejected CRA, you can still try to adjust Webpack config. Here is an example config with the essential settings targeting npm packages:

// simply way to exclude all node_modules from bundle.
// You can configure entries manually, too.
const nodeExternals = require('webpack-node-externals');

module.exports = {
  ...
  output: {
    // provide entry point exports via CommonJS / as npm package
    libraryTarget: "monjs"
  },
  ...
  // ignore built-in modules like path, fs, etc.
  target: "node",
  // don't bundle node_modules with your library
  // external packages should be required
  externals: [nodeExternals()]
};

Concerning CRA, add those settings to the base config <root>/config/webpack.config.js. Possible Further adjustments:

output: {
  // give your main npm package file a static name
  // It should be stored to build/node_bundle.js
  filename: "node_bundle.js"
},

package.json:

"main": "build/node_bundle.js"

Last, build your library and require it in your client application.

Links:

• Webpack libraryTarget setting
• Webpack externals setting
• webpack-node-externals
• Authoring libraries

本文标签：