theKashey / used-styles

📝All the critical styles you've used to render a page.
MIT License
138 stars 9 forks source link

Production build: Error: Cannot find module 'tslib' #7

Closed shatodj closed 5 years ago

shatodj commented 5 years ago

I'm facing this error in production build:

build pipeline:

npm i
npm run build
npm prune --production
npm start

Error message after npm start

Error: Cannot find module 'tslib'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (XXXXXXX/node_modules/used-styles/dist/es5/scanForStyles.js:3:15)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

The file containing the error: ....node_modules/used-styles/dist/es5/scanForStyles.js:3:15)

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib"); // <--- this lib is not listed as prod or peer dependency so it's crashing
var fs_1 = require("fs");
// .... etc

package.json snippet:

"scripts": {
    "dev": "npm run build:generate-imported-component && concurrently -r \"npm:type-check:watch\" \"npm:dev:start\"",
    "dev:start": "parcel ./src/index.html",
    "build": "npm run build:clean && npm run build:generate-imported-component && npm run type-check && npm run build:client && npm run build:server",
    "build:client": "cross-env BABEL_ENV=client parcel build ./src/index.html -d dist/client --public-url /dist ",
    "build:server": "cross-env BABEL_ENV=server parcel build ./src/server.ts -d dist/server --public-url /dist --target=node",
    "build:clean": "del-cli dist",
    "build:generate-imported-component": "imported-components src src/imported.ts",
    "start": "node ./dist/server/server.js",
    "start:debug": "node --inspect --debug-brk ./dist/server/server.js",
    "type-check": "tsc --noEmit",
    "type-check:watch": "tsc --noEmit --watch",
  },
"dependencies": {
    "babel-polyfill": "^6.26.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-helmet": "^5.2.1",
    "react-imported-component": "^5.5.3",
    "react-markdown": "^4.2.1",
    "react-on-screen": "^2.1.1",
    "react-progressive-image": "^0.6.0",
    "react-promise": "^3.0.2",
    "react-router-dom": "^5.0.0",
    "react-scroll": "^1.7.11",
    "react-transition-group": "^4.0.1",
    "reflect-metadata": "^0.1.13",
    "serialize-javascript": "^1.9.0",
    "used-styles": "^2.0.3"
  },
"devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "concurrently": "^4.1.0",
    "cross-env": "^5.2.0",
    "del-cli": "^2.0.0",
    "jest": "^24.7.1",
    "marked": "^0.7.0",
    "parcel-bundler": "^1.12.3",
    "parcel-plugin-bundle-visualiser": "^1.2.0",
    "parcel-plugin-markdown-string": "^1.4.0",
    "react-test-renderer": "^16.8.6",
    "react-testing-library": "^6.1.2",
    "ts-jest": "^24.0.2",
    "tslint": "^5.16.0",
    "tslint-config-airbnb": "^5.11.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.0.0",
    "typescript": "^3.4.4"
  }

usage: middleware.tsx

import { discoverProjectStyles, getUsedStyles } from 'used-styles'

const projectStyles = discoverProjectStyles(`${__dirname}/../client`)

export default (req: Request, res: Response) => {
      // ...
      //some code above 
      const usedStyles = getUsedStyles(markup, projectStyles)
      console.log('used styles', usedStyles)

      // and some code after ...
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "strict": true,
    "jsx": "react",
    "rootDir": "./src",
    "incremental": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "lib": ["es2015", "es2016", "es2017", "dom"],
    "types": ["reflect-metadata"],
    "baseUrl": "./src",
    "allowSyntheticDefaultImports": true,
    "paths": {
      "*": ["./@types/*"],
      "~/*": ["./*"]
    }
  }
}
theKashey commented 5 years ago

:( as usual, sorry

theKashey commented 5 years ago

Having this problem every second package, as long it's hard to detect if everything around is typescript.

theKashey commented 5 years ago

fixed v2.0.4